萬盛學電腦網

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

Flash AS3 入門教學:打造圖片彈性緩動特效動畫

本教學示範如何使用 Flash AS3 的 fl.transitions.Tween 類別,以簡單幾行程式碼實現圖片點擊後的彈性滑動效果,適合初學者練習 ActionScript 3.0 動畫控制。

製作流程

1. 設定文件屬性

新建 Flash 文件(ActionScript 3.0),依需求調整舞台寬高、背景色與影格率(建議 24~30 fps)。

2. 匯入素材並轉換元件

  • 將準備好的圖片(範例為美女圖片)匯入舞台,選取後按 F8 轉換為 影片剪輯,實例名稱設為 Image。
  • 使用文字工具繪製一個按鈕文字(如「開始」),同樣轉換為 按鈕 元件,實例名稱設為 myButton。

3. 撰寫 AS3 程式碼

新增一個圖層命名為「actions」,選取第 1 幀按 F9 開啟動作面板,輸入以下程式碼:

import fl.transitions.*;
import fl.transitions.easing.*;

myButton.addEventListener(MouseEvent.CLICK, tweenMyObject);

function tweenMyObject(event:MouseEvent):void {
    // 參數:目標物件, 屬性名稱, 緩動類型, 起始值, 結束值, 持續時間(秒), 是否使用秒為單位
    var moveTween:Tween = new Tween(Image, "x", Elastic.easeOut, 0, 260, 3, true);
}

程式碼解析:

  • 引入 fl.transitions 套件以使用內建緩動類別。
  • 為按鈕註冊 CLICK 事件監聽器。
  • 在處理函數中建立 Tween 實例:目標為 Image,屬性為 x(水平位置),使用 Elastic.easeOut 彈性緩動,從 0 移動到 260 像素,耗時 3 秒。

4. 測試與發布

按 Ctrl+Enter 測試影片,點擊按鈕即可看到圖片以彈性效果滑動。若需調整移動距離、時間或緩動類型,只需修改 Tween 建構式的參數即可。

此範例展示了 AS3 以程式碼控制動畫的基本概念,掌握後可輕鬆擴展至更複雜的互動特效。

copyright © 萬盛學電腦網 all rights reserved