建立日期 2006/11/24
第四講 動態載入器與預載器製作
親民視傳系助理教授 陳弘正
經過期中考的洗禮，相信同學們對前三講所教的內容已有『深刻』的認識，接下 來，我們進到網頁製作最核心的概念－動態載入－的概念。此一概念可幫助我們 在建構大型網站時可將內容有效的『模組化』，並且加快網站載入的時間。 至於預載器的製作則常見於 Flash 網站中，相關的作法這一講亦會介紹。老規 矩，同學們一定要仔細研究老師給的範例，老師在這裏僅作重點提示及簡要說 明，其它部分請同學自行研究。 1. 網站規格與圖層安排 a. 這裏以老師自己製作的網站為例（只是示範啦！），一般來說，網站的規 格設定為中規中矩的 800*600；其中，置放網站 Logo 及導覽列的頂列區 塊(top block)大小為 800*70，而置放版權聲明列(copyright declaration)的底 部區塊(bottom block)則佔 800*30，剩下中間的部份，則全歸內容區塊 (content block)的範圍，共佔 800*500。
b. 接下來則是圖層安排，關於這部份，我們遵循上一講立定的慣例，亦即將 網站作成『單影格網站』，在此例中，我們一共用了七個圖層，由上至下 分別是 action, preLoader, content, menu, bottomBar, topBar 以及 bg 七個圖 層；其中，後六個圖層分別放置相應的影片片段，分別是 preLoader_mc, myLoader, menu_mc, bottomBar_mc, topBar_mc 以及 bg_mc 等影片片段。 值的注意的是，以上的 myLoader 並不屬於影片片段的類別，而是由 Loader （載入器）所實體化的一個元件，以下為其詳細介紹。 1
建立日期 2006/11/24
2. 動 態 載 入 技 巧 － 『 焦 不 離 孟 、 孟 不 離 焦 』 － 論 以 物 件 導 向 程 式 設 計 之 MovieClipLoader 與 Preloader a. 在 Flash 中，關於動態載入的方法有很多種，在以前 Flash MX 的時代，使 用的是 ActionScript 1.0 的 loadMovie 語法，該語法是將外部檔案（swf 檔或 jpeg 檔）載入空白影片片段元件中， （另還有 loadMovieNum 語法，則是載 入至階層中） ；該方法的好處當然是簡單明白，但有一好沒二好（忘了是誰 說的？好像是技安（胖虎）?），缺點則是在製作檔案載入時等待的『預載 器 (preloader)』時，方法頗為煩瑣。 （詳細請參考小正正第四章第三至四節） b. 還好，現在是 Flash 8 的時代，而 AS 也進步到 ActionScript 2.0 的時代，其 中，相關的語法乍看之下有些落落長，不過，多打些字的代價換來的卻是 相對語法上的便利與強大。待我細細說來～ c. 首先暫且不看其它圖層，我們先專注在 preLoader 和 content 這兩個圖層， 在 content 圖層中，我們先打開組件面版(Ctrl+F7)，在 User Interface (UI)分 類下有一個 Loader 的組件，直接將其拖至場景中，並將其大小及位置調整 適當，如下圖所示，其中，該 Loader 組件亦類似影片片段元件一般需給定 實體名稱，在此稱之為 myLoader。
拉到場景上並調 整至 800*500
實體名稱 myLoader
2
建立日期 2006/11/24
d. 另外，當Loader組件加入場景的同時，你會發現元件庫(Ctrl+L)中會多出一 個”Loader”的元件，在其類型的欄位寫著『編譯後的影片片段 (complied movie clip』 。這代表我們所使用的Loader組件事實上就是一個影片片段；而 『編譯』一詞則代表此組件已經Flash事先作最佳化的處理，當我們呼叫它 來使用時，它會有最佳的效率。事實上，從Flash MX2004 版本以後，Flash 已大量增加各式各樣的組件，這意思是，未來各位在發展更大型的Flash 專 案時，可以多多倚賴好用的組件來拼湊成你要的成品。關於更多組件的使 用，我們會在下一學期更仔細的談到。 關於Loader的作用，簡單講，它扮演了一個『動態的』裝載外部swf檔 的角色，也就是說，當使用者點選時，相關的內容頁面（以獨立的swf呈現） 才 會 載 入 （ 伴 隨 著 preloader ）， 如 此 可 有 效 降 低 主 檔 的 大 小 ， 真 可 謂 Loader-On-Demand 1 (隨選載入)。 e. 接下來，在我們真正進入語法之前，很抱歉，我們在這裏必須先談一些預 備知識，主要是關於 Flash 8 中所使用的 ActionScript 2.0 中所使用的物件導 向程式設計 (Object-Oriented Program，簡稱 OOP)的概念。 在 OOP 設計的想法中，程式世界被想像成由一個一個屬於不同類別 (class)的物件（object）所構成的系統，每個物件在要使用前必需經過『類 別建構』的程序，這一點很像是生物體內的基因的建構，簡單講，不同的 生物擁有不同的基因，當造物主要創造不同的生物時，祂必定是先預備了 不同生物的基因，如此才能創造出不同的生物。而在 OOP 的領域裏，這個 『創造』的程序，以我們目前要使用的 Loader 組件來說，其語法如下： var mcLoader:MovieClipLoader = new MovieClipLoader();
(1)
其中，var 為變數宣告的關鍵字，mcLoader 為 MovieClipLoader 物件的名 稱；而第一個 MovieClipLoader (紅色字) 為類別宣告 (class declaration)， 第二個草綠色 MovieClipLoader()則為建構子 (constructor)，new 則為建構 子的先行關鍵語。簡單講，整句語法就是宣告有一個名為 mcLoader 的 MovieClipLoader 被建構出來了。 接下來，一旦 mcLoader 被建立後，我們就可以用這個物件來載入外部 影片片段（swf 檔），語法如下： mcLoader.loadClip("home2.swf", myLoader);
1
這個名詞（我自己講的）借用了目前很流行的一個名詞Movie-On-Demand (隨選視訊)。 3
(2)
建立日期 2006/11/24
其中，loadClip()為載入影片片段的方法，其中的第一個選項放入要載入的 MC，而第二個選項則是該 MC 載入的位置（此處為之前放進場景的 Loader 組件（其實體名稱為 myLoader）） 。 f. 乍看之下，應該寫到這裏，就可以順利載入外部影片了吧？但可惜的是， 由於 Flash 預設任何影片皆在網路環境下運作，因此，(2)式雖然作了載入 的動作，但到底真的載入影片了沒有，或者說到底載入了多少（百分比） 的影片，其實皆為未定之數。 在 Flash 中，它設計了另一種稱為『偵聽器（listener）』的物件來偵測 外部影片載入的比例（或進度） 。其建構方法與上述方法類似，唯其類別為 Object 而已。亦即： var myListener:Object = new Object();
(3a)
mcLoader.addListener(myListener);
(3b)
上列(3b)式，其作用為偵聽器(名字為 myListener)被加入 mcLoader 的物件中 （使用 addListener()方法） ，這樣的動作其實非常像醫生看病時把聽診器放 在病人胸口聽診一樣的動作。我們因此可以藉著該偵聽器的作用，即時的 偵測影片載入的進度。 g. 好，預備工作總算完成了， （2）式表示了外部影片片段被載入至 Loader 組 件中，而(3a), (3b)則表示偵聽器已放至 Loader 的『胸口』（很寫實吧？）， 接下來，只要外部影片片段有任何動靜（被載入） ，都會忠實的回報，而這 個回報的方法就是附屬於偵聽器上的 onLoadProgress 方法，這個方法最強 的地方就是它會回報給我們外部影片片段被即時載入的檔案大小，其中， 一個是 bytesLoaded 變數，代表已被下載的檔案大小，而 bytesTotal 變數 則代表下載檔案的總大小，而 target_mc 目前則無作用。詳細用法，我附上 說明檔如下：
4
建立日期 2006/11/24
h. 在這裏我直接列出整段的語法如下：
仔細說明如下： (1).
第 11 行的作用是讓 preLoader_mc 恢復可被看見。 （關於 preLoader_mc 的製作，我們將其放於 preloader 的圖層，容後再敘；因為在第一行的 語 法 中 ＜ 此 未 列 出 ＞ ， 我 們 先 設 定 preLoader 為 不 可 見 (preLoader_mc._visible=false)。
(2).
第 12 行我們定義一變數 pctLoad（pct 代表 percent，百分比的意思）： var pctLoaded = Math.round(bytesLoaded/bytesTotal*100); 其 中 bytesLoaded/bytesTotal*100 為 下 載 的 百 分 比 （ 非 整 數 ）， Math.round 則為取整數的函數。
(3).
接下來從第 13 行到 17 行為三種不同的 preloader 的作法，其共通點 為利用所計算得的 pctLoaded 的結果來作 preLoader，這裏列出我們用 5
建立日期 2006/11/24
模擬下載時所得的螢幕截圖。（至於為什麼這樣寫，請同學自己想想 囉！）
最後 18 行以後的 if 判斷式則決定了如果外部影片下載完畢，則
(4).
preLoader 會再次看不見。 3. 吁，好累，寫到這兒，我心裏不免想，同學們還跟上的有幾人？沒關係，老 師心裏想，我還是盡量寫，我相信對同學們而言，總是有用的，大家加油吧！ 接下來，我把剩下其它比較旁枝末節的部分交待完，其他就交給同學們去努 力囉！ a. 首先是關於 preLoader 的部分，請開啟 preLoader 圖層的 preLoader_mc 影 片片段。這裏我把三種不同的 preLoader 作在一起，只是給同學們參考， 希望大家還可以設計出更好的 preLoader 來。 一般 preLoader 的作法，就是利用上述的 pctLoaded 的變數的大小改變， 來變動(1)preLoader Bar 的長短或(2)下載百分比等。其中第 1 種作法是用 到 preLoaderBar_mc 的 xscale（水平長度） ，而第二種作法則是用動態文字 來反應 pctLoaded 的變化。（請同學們自行參閱範例） 另外一種作法是用影格的位置來作 preLoader，例如以下載進度為一百 分為例，我們可以在一百個影格內作一些動畫改變，如此一來，伴隨著下
6
建立日期 2006/11/24
載百分比的增加，動畫即會隨之變動了。
b. 至於其它的各圖層及其上的影片片段，相信同學們應該都能一目了然，老 師就不多費唇舌。最後，我們在 menu 圖層上一樣設計了不同的頁面，以 現在的作法，很簡單，就是作不同的按鈕在 menu 上，再寫相對應的按鈕 事件處理函式(onPress event handler)就能順利解決。語法如下：
關於主場景語法的部份，到這裏就算告一段落了，同學們辛苦了！ 4. 等等，戲還沒演完！請回座！我們還沒交待要載入的影片片段咧？以老師附 的 home2.fla 為例，其寫法與第三講所提者大致相同，唯值得注意的是，在第 一影格語法中，原先_root 的部份都要改為 this，這是因為當 home2.swf 載入 主程式(intWeb01b.fla)的 Loader 時，原先所用的絕對路徑_root 已不適用，故 須改用相對路徑 this。簡單講，以後同學們製作分頁內容時，請一律用相對 路徑就對了。 5. 好了，大功總算告成了！接下來，同學們練習時間到囉！ 7