2007/06/14

預先載入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();
範例參考網站