預先載入preload

目標
學會預先載入的製作

觀念

• 當一個flash作品檔需耗時載入，最好提供「載入中 （loading）」的動畫，俾讓瀏覽者明白載入的狀態。此一「載入中」的做法是「預先載入（preload）」。
• 「預先載作（preload）」的作法很多種，以能同時提供百分比及動畫者為佳。

練習

1. 開啟新的Flash檔案。
2. 新增影片片段元件，取名為mc_Preloader。
3. 新增一圖像元件，取名為gr_Outline，在作業區內畫一長方形外框。利用對齊視窗，使該長方形外框齊左、齊上。
4. 選取該長方形外框，編輯 > 複製。
5. 新增一圖像元件，取名為gr_Fill。在作業區內，編輯 > 在原處貼上。
6. 選取新複製的長方外框，修改其內部為實色，外框為白色。
7. 新增一影片片段元件，取名為mc_Fill。將gr_Fill元件拖拉放到作業區內，利用對齊視窗，讓gr_Fill元件齊左、齊上。
8. 開啟mc_Preloader，建三個圖層，由下而上，取名為Outline、Fill及Text。
9. 從元件庫將gr_Outline拖移到Outline層；mc_Fill拖移到Fill層。兩者須對齊，使mc_Fill落在gr_Outline之內。
10. 在Text層新增一文字框，位在Outline長方形外框的下方中央，設其為Dynamic Text（動態文字），Var（變數）取名為txt。
11. 在作業區選取mc_Fill，在屬性視窗的「實體名稱」欄取名「preloader」。
12. 新增一圖層，將它移到最上層，取名為ActionScript。點選該圖層的第一個影格，在動作視窗內鍵入以下的語令：
    preloader.onLoad=function() {_root.stop();
    }
    preloader.onEnterFrame=function() {
    var totalk=_root.getBytesTotal()/1024;
    var loadedk=_root.getBytesLoaded()/1024;
    var percent=Math.ceil((loadedk/totalk)*100);
    if (percent < txt="percent" _xscale="percent;">
13. 由元件切換到場景，將mc_Preloader置入舞台，它會存放在第一影格。
14. 到第二影格新增一空白關鍵影格。檔案 > 匯入舞台。選取檔案大的動畫檔，如swf或mov及avi檔。
15. 存檔。
16. Ctrl + Enter，測試影片。
17. 檔案 > 出版，產生html檔及swf檔。
18. 將上述的兩個檔案上傳到個人網站。
19. 瀏覽該檔案，結果類似以下範例的超連結。

• 本範例Flash檔（973k)下載

〔補充〕

• 本範例中的ActioScript是在影格完成的，也可以選用舞台上的實體來寫，其做法是做到上述步驟11，選取舞台上的mc_Fill元件後，在動作視窗內鍵入的語令與步驟12完全相同，只是第一列改為
  onClipEvent (load) {_root.stop();
  第三列改為
  onClipEvent (enterFrame) {
  餘均不變。
• 為了使視訊影片也能加以控制，步驟14可以更改為新增一影片片段元件，將視訊影片置入該元件的時間軸（可能佔用很多的影格）內。再將該元件放在場景的第二個影格，設其實體名稱，例如mc_Video，接著第二個影格設定ActionScript如下：
  stop();
  mc_Video.play();
  

〔範例〕

• http://web.ntit.edu.tw/~hsieh/preload/preload.html

〔參考網站〕

• http://www.webwasp.co.uk/tutorials/b29-load-images/index.php