靜態元件 vs 動態元件：核心差異在「可複用參數化」

Fireworks 提供圖形、按鈕、動畫三類元件，直接拖用即為「靜態元件」——每個文字、尺寸變化都需重新建立元件，文件庫極易膨脹。而「動態元件」僅需一個元件定義，拖入畫布後即可在「元件屬性」面板即時修改文字、寬高、狀態（正常/滑入/按下/禁用）等屬性，庫中永遠只保留一份主元件。公用庫內建的按鈕即為典型動態元件範例。

第一部分：建立基礎動態按鈕元件

1. 繪製四態背景： 正常、滑入、按下、禁用四種狀態背景圖，座標對齊疊合，全選 F8 轉為「圖形」元件並進入編輯模式。
2. 加入文字與命名： 放入文字物件，依序命名各狀態圖層（normal、mouseOver、mouseDown、unavailable）。
3. 關鍵設定：
   • 開啟「九宮智能縮放」，拉伸區域設在文字框外側；
   • 文字框寬度 = 背景寬 - 縮放區寬，置中對齊；
   • 背景圖建議平面化為位圖，避免縮放時路徑崩壞（不平面化可保留矢量品質）；
   • 隱藏非預設狀態圖層（關閉眼睛圖示）。
4. 存入公用庫： 文件庫右鍵選單 ▸ 「儲存至公用庫」，預設路徑為 .../Adobe Fireworks CS3/Common Library/Custom Symbols。
5. 產生元件腳本： 「命令」選單 ▸ 「建立元件腳本」，開啟剛存的 PNG，依介面設定動態屬性（Label 文字、State 下拉選單等）並儲存。
6. 測試使用： 新建文件，從公用庫「自定義」目錄拖入元件，開啟「視窗 ▸ 元件屬性」即可即時調整文字、狀態、尺寸，一個元件衍生無數變體。

第二部分：JSF 腳本進階移植——突破介面限制

內建動態元件（如 Mac 風格按鈕）擁有更豐富的互動邏輯（如自動邊框縮放、圖示切換等），這些邏輯封裝在 .jsf 腳本中。透過閱讀並移植官方腳本，可為自製元件賦予企業級互動行為。

1. 定位自製元件腳本：.../Custom Symbols/myBtn.jsf。
2. 參考官方腳本：公用庫 ▸ Mac 目錄下任一按鈕（如 ButtonBarLeft），搜尋其名稱可得官方腳本路徑 .../Configuration/Common Library/Mac/Button.jsf。
3. 以記事本開啟 Button.jsf 研讀邏輯，再清空 myBtn.jsf 寫入自定義代碼（需儲存為 ANSI 編碼）。核心邏輯包含兩階段：

   switch (Widget.opCode) {
     case 1: setDefaultValues(); break;  // 初始化：建立 Label、State 屬性預設值
     case 2: applyCurrentValues(); break; // 監聽屬性變更：同步文字、顯示/隱藏對應狀態圖層
   }
   function setDefaultValues() { ... }
   function applyCurrentValues() {
     var vals = Widget.elem.customData["currentValues"];
     var state = vals[1].value.split(",")[0];
     Widget.GetObjectByName("label").textChars = vals[0].value;
     Widget.GetObjectByName("normal").visible = (state=="normal");
     Widget.GetObjectByName("mouseOver").visible = (state=="mouseOver");
     Widget.GetObjectByName("mouseDown").visible = (state=="mouseDown");
     Widget.GetObjectByName("unavailable").visible = (state=="unavailable");
   }
   

4. 重新載入公用庫，拖入元件即生效。此法雖繞過「建立元件腳本」精靈的相容性檢查，卻能解鎖無限客製化潛能。

掌握動態元件與 JSF 腳本，即能建立自適應、可維護、團隊共享的 UI 元件庫，大幅提升設計系統產出效率。