Fireworks 動態元件深度解析：從靜態元件到屬性面板驅動的可複用按鈕系統

Fireworks 提供「圖形」、「按鈕」、「動畫」三類元件。若直接從文件庫拖用屬「靜態元件」，修改文字需打散重做，文件庫會堆疊大量相似元件。「動態元件」則只需一個元件定義，拖出後在「元件屬性」面板即時修改文字、寬高、滑過/按下狀態等屬性，文件庫僅存一份定義，極大提升複用效率。

動態按鈕製作完整流程

1. 繪製四狀態背景： 正常、滑過、按下、停用四種狀態背景圖，座標統一重疊。
   
2. 轉為圖形元件並進入編輯： 全選按 F8 轉「圖形元件」 → 雙擊進入編輯模式 → 加入文字框 → 為每個狀態圖層命名 (up/over/down/disabled)。
   
3. 關鍵設定：
   • 開啟「九宮智能縮放」，拉伸區域設在文字框外部。
   • 文字框寬度 = 按鈕寬度 - 縮放區寬度，設定置中對齊。
   • 背景圖建議平面化為位圖，避免縮放時路徑斷裂 (不平面化也可保持向量品質)。
   • 隱藏不需顯示狀態的圖層 (關閉眼睛圖示)。
     
4. 儲存至公用程式庫： 文件庫右鍵選「儲存到公用程式庫」，預設路徑：.../Common Library/Custom Symbols。
   
5. 建立元件腳本： 「指令」>「建立元件腳本」 → 開啟剛儲存的 PNG → 設定動態屬性 (文字、寬高、狀態圖層對應) → 儲存。
   
   
6. 使用動態元件： 新建文件 → 從公用程式庫「Custom Symbols」拖入畫布 → 開啟「視窗」>「元件屬性」 → 即時修改文字、尺寸、狀態。
   

優勢總結

• 單一元件定義支援無限變體 (文字、尺寸、狀態)。
• 九宮縮放保護圓角與邊框不變形。
• 團隊共享公用程式庫確保 UI 一致性。