Flash 文章

Flash 動畫學習指南

結合動畫與 Drawing API

您可以結合使用 Drawing API 與 Tween 及 TransitionManager 類別來創造不錯的動畫效果, 這樣一來, 就只要撰寫少量的 ActionScript 即可。

若需 Tween 與 TransitionManager 類別的更多資訊, 請參閱前面的章節「使用 Tween 與 TransitionManager 類別」。

若需 Drawing API 的資訊, 請參閱「學習 ActionScript 2.0」›「動畫、濾鏡與繪圖」›「使用 ActionScript 繪圖」*。

以下程序會載入 JPEG 影像, 然後動態遮住影像, 藉由漸變影像的遮罩, 慢慢顯現出載入的影像。

若要製作動態遮罩動畫:

建立新的 Flash 文件, 並儲存為 dynmask.fla。

將下面的 ActionScript 加入時間軸的畫格 1 (Frame 1) :

import mx.transitions.Tween;
import mx.transitions.easing.*;
var mclListener:Object = new Object();
mclListener.onLoadInit = function(target_mc:MovieClip)  {
   target_mc._visible = false;
   // Center the image on the Stage.
   target_mc._x = (Stage.width - target_mc._width)  / 2;
   target_mc._y = (Stage.height - target_mc._height)  / 2;
   var maskClip:MovieClip = target_mc.createEmptyMovieClip("mask_mc", 20);
   with (maskClip)  {
      // Draw a mask that is the same size as the loaded image.
      beginFill(0xFF00FF, 100);
      moveTo(0, 0);
      lineTo(target_mc._width, 0);
      lineTo(target_mc._width, target_mc._height);
      lineTo(0, target_mc._height);
      lineTo(0, 0);
      endFill();
   }
   target_mc.setMask(maskClip);
   target_mc._visible = true;
   var mask_tween:Object = new Tween(maskClip, "_yscale", Strong.easeOut, 0, 100, 2, true);
};
this.createEmptyMovieClip("img_mc", 10);
var img_mcl:MovieClipLoader = new MovieClipLoader();
img_mcl.addListener(mclListener);
img_mcl.loadClip("http://www.helpexamples.com/flash/images/image1.jpg", img_mc);

上面的程式碼範例會載入 Tween 類別以及加減速套件中的每個類別。接著會建立物件當做聆聽器物件, 供程式碼後面區段所建立的 MovieClipLoader 執行個體之用。聆聽器物件會定義單一的事件聆聽器 onLoadInit, 這個聆聽器會將動態載入的 JPEG 影像置於舞台中央。在程式碼重新調整影像的位置之後, target_mc 影片 (其中包含動態載入的 JPEG 影像) 內會建立新的影片執行個體。Drawing API 程式碼會繪製矩形, 尺寸就跟這個新影片內的 JPEG 影像一樣。新的影片會呼叫 MovieClip.setMask() 方法遮住 JPEG 影像。在繪製和設定遮罩之後, 遮罩會使用 Tween 類別形成動畫, 讓影像慢慢顯現出來。

儲存 Flash 文件, 然後選取「控制 (Control)」›「測試影片 (Test Movie)」來測試 SWF 檔。圖 24 顯示最後的成果。

網頁內容需要 Flash

若要檢視本內容，JavaScript 必須已啟用，且您必須有最新版本的 Adobe Flash Player。

現在就下載免費的 Adobe Flash Player!

圖 24. 動畫遮罩使用 ActionScript 動畫特效顯現影像

注意: 若要讓上面範例中的 _alpha 變成動畫 (而非 _yscale), 請直接插入 target_mc 影片來代替遮罩影片。

如果您要套用執行時期點陣圖快取, 可以使用 alpha 遮罩。請參閱 Flash 範例*網頁上示範這項功能的範例 FLA 檔案。

Flash 文章

Flash 動畫學習指南

目錄

結合動畫與 Drawing API

網頁內容需要 Flash