Flash 按鈕元件四態設計與動效製作入門

Flash 按鈕元件內建四幀態（Up、Over、Down、Hit），善用這四態配合補間動畫、濾鏡、聲音，能打造豐富的互動視覺回饋。本教學以簡單範例示範核心流程。

效果預覽

四態功能解析

狀態幀	觸發時機	設計重點
Up (正常)	滑鼠未接觸	基礎外觀，設定註冊點置中
Over (懸停)	滑鼠移入 Hit 區域	添加發光濾鏡、放大 105%、顏色變亮、播放懸停音效
Down (按下)	滑鼠左鍵按下	內陰影/壓縮效果、顏色加深、播放點擊音效
Hit (觸發區)	定義偵測區域（不顯示）	繪製略大於視覺圖形的矩形，容錯率更高

製作流程

1. Ctrl+F8 新建「按鈕」元件，命名「Btn_Primary」。
2. 進入編輯模式，時間軸自動顯示 Up/Over/Down/Hit 四幀標籤。
3. Up 幀：繪製基礎按鈕外觀（圓角矩形 + 文字 + 漸變填充），轉為圖形元件置中。
4. Over 幀：插入關鍵幀（F6），複製 Up 幀內容，套用「濾鏡 > 發光」、縮放 105%、調亮色相。
5. Down 幀：插入關鍵幀，套用「濾鏡 > 陰影（內部）」、縮放 95%、調暗色相。
6. Hit 幀：插入關鍵幀，繪製一個略大於按鈕視覺範圍的矩形，無描邊無填充（或 Alpha 0），定義點擊熱區。
7. 返回主場景，從庫拖入「Btn_Primary」實例，屬性面板賦予實例名 `btn_submit`。
8. 主時間軸框架代碼添加事件監聽：

btn_submit.addEventListener(MouseEvent.CLICK, onClick);
function onClick(e:MouseEvent):void {
    trace("按鈕被點擊");
    // 執行業務邏輯
}

進階技巧

• 聲音同步：在 Over/Down 幀的屬性面板「音效」欄位關聯音效檔，同步「事件」或「開始」模式。
• 動畫過渡：若需 Over/Down 狀態有動畫過渡（而非瞬間切換），可將按鈕改為「影片剪輯」元件，自行用 AS 控制狀態機（`gotoAndPlay("over")` 等）。
• 無障礙：按鈕實例設定 `tabEnabled = true`、`accessibilityProperties.name`，支援鍵盤導航與螢幕閱讀器。