效果展示

9 件鼓組（大鼓、軍鼓、三個通通鼓、兩顆鈸、踩鈸、鑼），滑鼠滑過或按鍵盤 0~9 即時發聲，附帶擊打動畫回饋。

核心架構：三層元件體系

1. 圖形元件：各鼓件擊打高光圖形（smallcrash、BASS 等 9 個）。
2. 按鈕元件：smcrashbutton 等 9 個，Over 幀放入聲音、Down 幀放入對應圖形元件，實現滑鼠觸發聲光同步。
3. 影片剪輯元件：crash1movie 等 9 個，內含圖形元件淡出動畫 + 聲音同步，供鍵盤觸發 tellTarget/play() 調用。

詳細製作流程

1. 文件與素材

600×580 px，白底。匯入 9 支鼓聲音檔 + 一張架子鼓全圖（無標註）。

2. 9 個圖形元件

各繪製對應鼓件的高光/擊打變形圖（如 smallcrash 對應 crash1 區塊）。

3. 9 個按鈕元件

以 smcrashbutton 為例：
• 彈起幀：空白
• 經過幀：放入聲音 crash1（同步：事件）
• 按下幀：放入圖形元件 smallcrash
其餘 8 個同理，聲音與圖形一一對應。

4. 9 個影片剪輯元件

以 crash1movie 為例：
• 圖層 1：第 1 幀 stop();，第 2 幀放入 smallcrash 透明度 50%，第 5 幀關鍵幀，2→5 建立形狀補間（淡出縮放）。
• 圖層 2：第 2 幀放入聲音 crash1（同步：開始）。
其餘 8 個同理。

5. 主場景組裝

• 圖層 pic：放入架子鼓全圖。
• 圖層 crashamovie：拖入 9 個影片剪輯實例，命名對應圖2編號（crash1、bass、hihat…）。
• 圖層 BUTTONS：拖入 9 個按鈕實例，精準蓋在對應鼓件上方。

6. 鍵盤觸發腳本（各按鈕實例加入）

按鈕	按鍵	目標實例
smcrashbutton	7	/crash1
BASSBUTTON	0	/bass
hihatbutton	1	/hihat
lgcrashbutton	8	/crash2
ridebutton	9	/ride
SMAREBUT	2	/snare
tomabutton	4	/toma
tombbutton	5	/tomb
tomcbutton	6	/tomc

統一腳本模板：

on(keyPress "7"){
    tellTarget("/crash1"){ play(); }
}

設計亮點

• 聲光分離：按鈕負責滑鼠即時回饋，MovieClip 負責鍵盤觸發與動畫播放，職責清晰。
• 零衝突：滑鼠觸發聲音於按鈕 Over 幀（事件同步），鍵盤觸發於 MovieClip 內部，互不干擾。
• 擴充性：新增鼓件只需複製三層元件結構，修改聲音/圖形/按鍵映射即可。

現代化重構建議（AS3）

• 使用 Sound 類別 + SoundChannel 管理播放，支援多聲道混音。
• 鍵盤事件改用 stage.addEventListener(KeyboardEvent.KEY_DOWN, ...) 集中處理映射表。
• 擊打動畫改用 TweenLite/GSAP 或 SpriteSheet，效能更佳。
• 輸出為 HTML5 Canvas/WebAudio，跨平台無縫體驗。