「動畫太難、代碼太複雜」是很多設計師的心理門檻。其實，用 AS3 配合 GSAP（GreenSock Animation Platform）寫動畫，比你想像中簡單、有趣得多。本教程採用「先跑通、再拆解、後魔改」的逆向學習法，帶你 30 分鐘產出第一個波浪動畫，零挫折入門代碼動畫世界。

準備工作：安裝 Adobe Animate (Flash Professional)

官網下載：creative.adobe.com，註冊後可免費試用 30 天。CC 2015 或 CS3-CS6 均可。本教程以 Mac 英文版為例，快捷鍵標註 Win/Mac 雙版本。

Step 1：新建 AS3 文檔

• 快捷鍵：Win Ctrl+N / Mac ⌘+N
• 類型選 ActionScript 3.0
• 舞台尺寸：寬高均設 400px（可自定）
• 幀率：改為 60 fps（默認 12 太卡）

Step 2：打開代碼面板

• 快捷鍵：Win Alt+F9 / Mac Option+F9
• 建議將面板背景設為深色護眼

Step 3：複製貼上核心代碼（波浪動畫）

var box:Shape = new Shape();
var i:int;
var count:int;
addChild(box);
box.y = stage.stageHeight/2; // 嘗試改 0~400 看效果
addEventListener(Event.ENTER_FRAME, wave);
function wave(e:Event) {
    count += 1.5; // 改這個數字調整波速
    box.graphics.clear();
    box.graphics.beginFill(0x000000, 1); // 改 0xFF0000 試試紅色
    for(i = 0; i < stage.stageWidth + 1; i++) {
        box.graphics.lineTo(i, Math.sin((i - count)*Math.PI/180) * i / 4);
    }
    box.graphics.lineTo(stage.stageWidth, stage.stageHeight);
    box.graphics.lineTo(0, stage.stageHeight/2);
    box.graphics.lineTo(0, 0);
    box.graphics.endFill();
}

Step 4：發布預覽

• 快捷鍵：Win Ctrl+Enter / Mac ⌘+Enter
• 正常情況下將看到平滑的黑色波浪動畫

進階玩法：像玩積木一樣修改參數

• box.y：控制波浪垂直位置
• count += 1.5：控制波動速度（負數反向）
• 0x000000：16 進制顏色值（紅 0xFF0000、藍 0x0000FF）
• i / 4：控制波浪振幅增長率

每改一處發布一次，觀察變化，建立「代碼-視覺」心智映射。卡住了？歡迎微博 @每日一動劉嘉偉 找我。

下一站：GSAP——業界良心動畫引擎

下節課將介紹 GSAP，讓時間軸控制、緩動函數、鏈式動畫變得極其優雅。依然延續「複製貼上即見效」風格，敬請期待！