建立日期 2006/10/11

第三講＜
第三講＜第一部份＞
部份＞ 單影格網站 親民視傳系助理教授 陳弘正

1. 上一次介紹了複合導覽例的介紹，同學們不知道吸收的如何？上一例中，美
中不足的是，主場景上仍存在各分頁之內容；一般說來，我們比較希望主場景看
起來乾淨一點；所以在此，我們要把主場景再作修整，成為所謂的單影格網站
（one-frame website）。
－原來的主場景

－修正的主場景

兩者效果完全相同，其奧秘就在於把主場景上的內容全部移至一單一的影片片段
content_mc；

其它完全與上例相同，出來的結果也一樣。

1
 建立日期 2006/10/11

第三講 ＜第二部份＞
第二部份＞
Current Page Variables – used for transition of content pages

1. 接下來這個段落的內容對同學或許會稍微難一點，但過了這一關，同學們對
網站的架構的相關語法可以說能有相當程度的掌握了；首先，我們會延續上
一部分的概念，在主場景作到『單影格網站』
，並且，進一步，我們希望各分
頁內容能為獨立的影片片段；再者，我們在不同的頁面切換時，能作出各分
頁轉場的效果。

2. 參考 One-Frame Website 的架構分主場景為 menu, content, action 三個圖層，在

這裏，我們將進一步把主場景上的 content layer 擴增成為 layer directory (目
錄)，底下包含有八個圖層，每個圖層上於相同位置放置對應圖層的影片片段。

3. 其中，每一個圖層皆於相同位置，放置一子內容影片片段，並命名。每一
MC 其架構如下：

(i) 其中，”on” 部份內容(由第 5 影格播至第 15 影格然後停止)為子內容頁入

場動畫，而”off”部份則為子內容頁離場動畫；另外，在 action 圖層中，第 1、

2
 建立日期 2006/10/11

15 影格皆為 stop();
(ii) 關於入場及離場動畫，同學們各再自行發揮，唯 on 及 off label 一定要標
好。這裏我們僅僅用最陽春的水平移動動畫來呈現。
(iii) 各子內容頁完成後，回到主場景，記得下實體名稱(instance name)；舉例
來說， contentWeb_mc 為”web”子內容頁的名稱。

4. 上一次範例中，我們已完成 menu_mc 的製作，唯內容部份仍顯陽春；這一次，

我們希望能一併將各內容頁皆以影片片段的形式來呈現。另外，不同分頁的
影片片段在切換轉場時，一方面要使『正在使用中』的內容 MC 退場，一方
面又要使『準備使用』的內容 MC 進場，這部份的技巧，需仰賴更進一步的
語法來達成，說明如下：
(i) 上一講語法中，關於主導覽列中的 rollOver 效果部分的語法保留，亦即：

再來則是取消語法中『Navigation without sub-menus』的段落。用/* */，如下

取消的語法部份會變色成灰色。

(ii) 接下來作全域變數宣告
_global.currentPage = “contentHome_mc”;

3
 建立日期 2006/10/11

(iii) 首頁載入
_root.onLoad = function () {
animateOn(currentPage);
}
(iv) 當然，有全域變數就一定會有全域函數；其基本的寫法如下：
引入參數)
引入參數 {
_global.functionName = function (引入參數
actions ();
}
(v) 在此，我們撰寫兩個全域函數_global.animateOn(), _global.animateOff()
驅使各子內容分頁之 MC 進場及退場

_global.animateOn = function (page) {

eval(page).gotoAndPlay(“on”);
}
_global.animateOff = function (page) {
eval(page).gotoAndPlay(“off”);
}

其中，引入參數 page 為傳入字串(string)，為內容 MC 的路徑加實體名稱，eval()

為實體化函數，
為實體化函數 ，為 evaluate 之意。
之意。

5. 菜準備好了，好戲開始上場了！先談 home 及 about 兩個內容頁，上次提過，

因為這兩個按鈕一開始已出現在 menu_mc 的第一影格，故我們可以直接寫影
格語法控制之，另外，子內容頁的部份則需直接寫在按鈕內。

上述語法中(以 home_btn 的 onRelease event 為例)，

4
 建立日期 2006/10/11

(i) 先判斷目前網頁內容是否為按下之網頁，
if (_global.currentPage != “contentHome_mc”) {
actions();
}

若否，則執行事件處理函式中的程式：
第一、先讓先前網頁『退場』
animateOff(_globel.currentPage);
第二、再載入目前按下之網頁，
animateOn(“contentHome_mc”);
第三、設定當前網頁變數(current page variable)
_global.currentPage = “contentHome_mc”;
其中，全域變數 _global.currentPage 為當前網頁的實體名稱。

(ii) 上 述 這 段 語 法 可 以 說 是 本 範 例 最 重 要 的 一 段 語 法 ， 全 域 變 數
_global.currentPage 可以說扮演了中間人的一個角色，或者說像是一個參考
標籤一樣，代表著目前主場景內容頁所在的實體名稱。
(iii) 值得注意的是，關於全域變數_global.currentPage 的給值及取值，路徑
關鍵詞 _global 皆須出現，不可省略。
(iv) 在程式語言中的變數類別，依其變數影響範圍(scope)可概分為局域變數
local variable)與全域變數。以 ActionScript 來說，前者其 scope 僅及於局部之
函數、影格語法或元件語法中，並且隨該段語法之出現而存在，並伴隨其停
止而消失，並不恆佔據系統記憶體；然而，吾人在使用語法中，常需使用變
數或函數其 scope 能跨影格及元件而存在或呼叫者，此類變數或函數，吾人
可稱之為全域變（函）數。
(v) 值得注意的是，全域變數雖有其方便性，但亦存在相當之危險性，此乃
因全域變數即曰可於任意處取用之，亦當然可於任意處更改其值，因此，此
全域變數易遭不易查覺的原因更改其值，此一問題在程式執行期間(run time)
相當不易被查覺。

6. 類似上一點，在子內容網頁中的六個按鈕 pictureBooks, game, before, basic,

advance, web 上均需加上按鈕語法如下（此處以 pictureBooks button 為例，
其它按鈕的相對應實體名稱請記得修改）：

5
 建立日期 2006/10/11

值得注意的是，由於我們已宣告 animateOn() 及 animateOff()為全域函數，故

此處在按鈕中我們可以直接呼叫該函數；當然，全域變數_global.contentPage
也可直接使用。記得，六個按鈕的語上皆須改過。

7. 大功告成！