繪圖工具 + 程式碼，建構具備三態（正常/啟用/禁用）的互動單選鈕

本教程帶領你從零開始，使用 Flash 繪圖工具與 AS3 事件機制，製作一個外觀精美、邏輯清晰的單選按鈕元件，適合初學者理解元件架構與事件驅動開發。

最終預覽效果

環境建置

• 新建 AS3 文檔：舞台 320×190，背景 #181818，幀率 24 fps。

文檔屬性設定

介面佈局

• 頂部標題列：放射漸變矩形 #D45C10 → #B43B02 + 1px 分隔線。
• 文字系統：標題 Helvetica Bold 20pt #FFFFFF（Windows 可用 Arial 替代），內文 Myriad Pro 20pt/14pt #DDDDDD/#BBBBBB。
• 動態文字欄位 statusField 顯示按鈕狀態（[Disabled]/[Enabled]）。

介面佈局草圖

標題列漸變與分隔線

分隔線細節

標題文字描邊效果

標題文字樣式

描述文字樣式

動態文字欄位佈放

按鈕三態繪製

按鈕結構：外圓背景 + 內圓指示器。三態關鍵幀分佈於同一影片剪輯時間軸：

1. 第 1 幀 - 正常態：外圓 128×128px，描邊 #AAAAAA，填充 #F7F3F7 → #BDBEBD（放射漸變）。
2. 第 2 幀 - 啟用態：內圓縮放至 64×64px，描邊 #EEEEEE → #AAAAAA（線性），填充 #D45C10 → #B43B02（品牌色高光）。
3. 第 3 幀 - 禁用態：移除內圓，背景變暗 #D4D2D4 → #A2A3A2，失去互動視覺暗示。

按鈕三態結構示意

正常態外圓繪製

啟用態內圓樣式

啟用態關鍵幀

禁用態樣式

實例命名與類關聯

• 舞台上放置三個按鈕實例：active（可互動）、enabledBox（預設啟用）、inactive（預設禁用）。
• 按鈕影片剪輯關聯 Document Class Main。

實例命名對照

Document Class 設定

ActionScript 3.0 完整代碼

package {
  import flash.display.Sprite;
  import flash.events.MouseEvent;

  public class Main extends Sprite {
    public function Main():void {
      active.stop();
      inactive.gotoAndStop(3);
      enabledBox.gotoAndStop(2);

      active.addEventListener(MouseEvent.MOUSE_UP, changeState);
    }

    private function changeState(e:MouseEvent):void {
      if (e.target.currentFrame == 1) {
        e.target.gotoAndStop(2);
        statusField.text = "[Enabled]";
      } else {
        e.target.gotoAndStop(1);
        statusField.text = "[Disabled]";
      }
    }
  }
}

代碼解析

• stop() 防止按鈕時間軸自動播放。
• gotoAndStop() 控制狀態幀跳轉。
• MouseEvent.MOUSE_UP 確保點擊釋放時觸發，避免誤觸。
• 邏輯封裝於 Document Class，符合現代 AS3 開發規範。

擴展建議

• 加入懸停態（MOUSE_OVER/MOUSE_OUT）。
• 派發自訂事件 RadioButtonEvent.CHANGE，實現表單資料綁定。
• 皮膚化：將外觀繪製邏輯抽離為 ISkin 介面，支援主題切換。