萬盛學電腦網

您现在的位置: 萬盛學電腦網 >> 軟體知識 >  >> 影像處理 >> Flash 教學

Flash AS2 教學:滑鼠感應圖片放大縮小互動效果

經典 AS2 技巧:利用巢狀影片剪輯結構,內層做放大縮小補間動畫,外層用 tellTarget 控制播放頭跳轉,實現滑鼠移入放大、移出縮小的圖片互動效果。

製作步驟

1. 建立內層縮放動畫元件(元件 1)

  • 新建文件,幀率 40fps。繪製/匯入圖片,轉為影片剪輯(元件 1)。
  • 進入元件 1:第 8 幀 F6 關鍵幀,自由變形放大;第 16 幀 F6 縮回原大小。
  • 第 1 幀右鍵 創建移動補間。
  • 第 1、32、60 幀各加入 stop();(分別對應:初始靜止、放大結束靜止、縮小結束靜止)。

2. 建立外層容器元件(元件 2)

  • 新建影片剪輯 元件 2,將元件 1 拖入其舞台中心,賦予實例名 a。

3. 主場景佈置與 AS2 代碼

  • 回主場景,拖入元件 2 至舞台,實例名同為 a(或其他)。
  • 選取主場景實例,動作面板(F9)輸入:
on (rollOver) {
    tellTarget("_parent.a") {
        gotoAndPlay(2); // 播放放大動畫
    }
}
on (rollOut) {
    tellTarget("_parent.a") {
        gotoAndPlay(32); // 播放縮小動畫
    }
}

原理解析

  • 巢狀結構:主場景實例 a (元件 2) → 內含 a (元件 1)。
  • tellTarget("_parent.a"):從主場景實例指向其父時間軸(元件 2)中的實例 a(元件 1)。
  • gotoAndPlay(2):從第 2 幀開始播放放大補間,至第 8 幀達最大,第 32 幀 stop() 停留放大狀態。
  • gotoAndPlay(32):從第 32 幀播放縮小補間,至第 60 幀 stop() 回原狀。

AS3 遷移對照

AS3 不再支援 tellTarget,改用顯示列表層級存取:

// 主場景實例命名为 container
container.addEventListener(MouseEvent.ROLL_OVER, onOver);
container.addEventListener(MouseEvent.ROLL_OUT, onOut);

function onOver(e:MouseEvent):void {
    var inner:MovieClip = e.currentTarget.getChildByName("a") as MovieClip;
    inner.gotoAndPlay(2);
}
function onOut(e:MouseEvent):void {
    var inner:MovieClip = e.currentTarget.getChildByName("a") as MovieClip;
    inner.gotoAndPlay(32);
}

此範例展示了 AS2 時代「時間軸動畫 + 路徑控制」的典型模式,理解其邏輯有助於遷移至 AS3 事件驅動架構。

copyright © 萬盛學電腦網 all rights reserved