按鈕是 Flash 互動核心,本教學完整涵蓋「按鈕四幀結構」、「點擊區擴大技巧」、「文字按鈕製作」、「播放/重播控制器實作」四大主題,附圖文步驟與 ActionScript 代碼。
一、按鈕四幀結構與點擊區原理
- Up(正常):滑鼠未接觸時顯示。
- Over(經過):滑鼠懸停時顯示。
- Down(按下):滑鼠按下時顯示。
- Hit(點擊區):不顯示於舞台,定義實際觸發區域。此幀繪製的形狀決定按鈕的有效點擊範圍。
關鍵:文字按鈕若只在 Up 幀打字,點擊區僅限文字筆畫極小,極難點中。解決:在 Hit 幀畫一個大於文字的矩形(顏色任意),即可大幅擴大點擊區,發布時不可見但生效。
二、兩種擴大點擊區做法
- Hit 幀畫矩形法:按鈕編輯模式 → 第 4 幀 插入關鍵幀 → 畫矩形覆蓋文字區域。
- Up 幀透明矩形法:新增圖層 → 第 1 幀畫矩形 → 填滿顏色 → 設 Alpha 0% 透明。此法同樣擴大點擊區,且編輯時可見。
三、基本按鈕製作實作
- 新建元件 → 類型 按鈕。
- 第 1 幀畫背景矩形(藍色)。
- 新增圖層第 1 幀輸入文字「PLAY」。
- 第 4 幀(Hit)畫矩形覆蓋文字。
- 回場景拖入實例,Ctrl+Enter 測試(不可用 Enter 預覽,必須發布測試)。
四、Flash 作品必備兩按鈕:播放與重播
完整作品需:Play(播放)、Replay(重播)。
五、按鈕控制影片實作(AS2 風格)
- 主時間軸第 1 幀與最後一幀加入
stop(); 防止自動播放。
- 新建兩按鈕元件:
btnPlay、btnReplay,拖至主場景適當幀與位置。
- 選取
btnPlay,動作面板輸入:
on (release) {
play();
}
- 選取
btnReplay 輸入:
on (release) {
gotoAndPlay(1);
}
六、進階提示
- 按鈕風格應與作品整體視覺一致。
- 可用圖形、影片剪輯、甚至位圖作為按鈕外觀,只要放在四幀對應位置。
- AS3 專案請改用
addEventListener(MouseEvent.CLICK, handler) 寫在時間軸或文件類中,不再直接寫在按鈕實例上。
掌握按鈕四幀機制與 Hit 幀技巧,是製作易用 Flash 互動介面的基石。