綜合運用 Flash 繪圖工具製作素材元件、TweenMax 緩動庫、程式化粒子系統、滑鼠事件驅動，打造滑鼠移動軌跡留下彩色發光曲線、粒子爆發、漸隱消失的視覺特效。附完整 FLA 結構與文件類代碼架構。

素材元件準備（圖形元件）

1. 圖形 1：5×5px 白圓（橢圓工具 Shift 畫正圓，對齊置中）。
2. 圖形 2：5×5px 放射漸變圓（左 #FFCC00 → 右 #FFFAE6）。
3. 圖形 3：~ 形狀曲線（直線工具 1.5px，描邊線性漸變 #F70000→#FFFFFF，選取/部分選取工具拉曲）。
4. 圖形 4：100px 直線（描邊 1.5px，線性漸變 #FFFFFF→#0033FF→#FF0000）。
5. 圖形 5：3×3px 白方塊。

核心影片剪輯元件

遮罩元件 遮片

• 矩形 1044×570px，座標 (0,0)，套用色調：黑色，作為全螢幕遮罩背景。

粒子特效元件 MouseEff（時間軸幀腳本驅動）

• 第 1 層（圖形 1 粒子爆發漸隱）：
  1幀：拖入 圖形 1 打散成點陣，置中，寬高 1px。
  34幀：關鍵幀，寬高 59px，Alpha 0%。
  1-34幀：創建形狀補間 → 從小變大漸隱。
  35幀：空白關鍵幀。
  55幀：關鍵幀，拖入 圖形 5 打散，座標 (294,109)，寬高 3。
  73幀：關鍵幀，寬高 1，座標 (0,0)，形狀補間。
  73幀動作：this.parent.removeChild(this); stop();（自我銷毀）。
• 第 2 層（曲線/光線/粒子複合動畫）：
  1幀：拖入 圖形 3 打散，鎖寬高比，寬 463，紅色通道 Alpha 20%。
  13幀：關鍵幀，寬 100，紅色 Alpha 100%。
  21幀：關鍵幀，中心點移至註冊點，逆時針旋轉 110°。
  22幀：關鍵幀，拖入 圖形 2 打散，寬高 23，座標 (-80, 0.5)。
  24幀：寬高 20。
  25幀：拖入 圖形 4 打散，置中。
  26幀：順時針旋轉 10°。
  54幀：垂直旋轉（-90°），寬 0、高 5，座標 (295.5, 112.5)。
  各區段套用形狀補間。
  鎖定圖層，庫中 MouseEff 設連結類別，勾選為 ActionScript 導出。

主場景與文件類

1. 場景 1 拖入 遮片，尺寸 1024×768 置中，色調黑色。
2. 文件類輸入 Test（需同目錄下 Test.as）。

Test.as 核心邏輯（精簡版）

package {
    import flash.display.Sprite;
    import flash.events.MouseEvent;
    import flash.events.Event;
    import gs.*; // TweenMax

    public class Test extends Sprite {
        public function Test() {
            stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
        }

        private function onMouseMove(e:MouseEvent):void {
            var eff:MouseEff = new MouseEff();
            eff.x = mouseX;
            eff.y = mouseY;
            addChild(eff);
            // 可加入 TweenMax 讓 eff 縮放/旋轉/淡出增強效果
        }
    }
}

技術亮點

• 形狀補間 + 程式碼實例化：時間軸內預製複雜形變動畫，運行時大量實例化形成粒子系統。
• 多層時間軸並行：單一元件內兩層獨立形狀補間，豐富視覺層次。
• 自我銷毀模式：動畫結束幀 removeChild(this) 避免記憶體洩漏。
• TweenMax 整合：文件類可進一步為每個實例添加緩動增強。

注意事項

• 需將 gs 資料夾（TweenMax 庫）置於 FLA 同目錄。
• 大量實例化時建議改用對象池復用 MouseEff 實例。
• 現代專案建議移植至 HTML5 Canvas + GSAP/Particles.js 實現同等效果。

此教學展示了「設計師在時間軸製作視覺素材 → 程式師以代碼控制實例化邏輯」的經典 Flash 協作模式，特效表現力極強。