標準 468×60 Banner 變色動畫全流程

Banner 是網站營收與資訊傳遞的關鍵載體。本教學以「三色循環變換」為核心動效，系統講解 Fireworks 符號、補間實例、圖層共享、幀面板操作，並總結高效製作技巧。

製作步驟詳解

1. 新建文件： 468×60 px、黑底（圖 1）。
2. 準備三色素材： 匯入基底圖（圖 2），Ctrl+Shift+D 複製兩份，分別套用「濾鏡 ▸ 調整顏色 ▸ 色相/飽和度」調整色相值，得到紫、紅、綠三版（圖 3、4）。
3. 轉為動畫符號： 三圖各自 F8 轉為「動畫」符號，命名 Symbol 1/2/3，轉換後從畫布刪除（圖 5-7）。
4. 背景層共享： 圖層面板命名 Layer 1 為 Background，勾選「跨幀共享」（圖 8-9）。
5. 第一組變色（紫→紅）：
   • 新圖層 Layer 2，拖入 Symbol 1 置右側 (X:282, Y:0)。
   • 修改 ▸ 動畫 ▸ 設定，幀數 10，確認自動添加幀 → 產生 10 幀漸變（圖 10-14）。
6. 第二組變色（紅→綠，含淡入淡出）：
   • 第 10 幀畫面為紅色，複製幀插在之後（第 11 幀）。
   • 新圖層 Layer 3，拖入 Symbol 3（綠），同座標，動畫設定 10 幀、透明度 0→100（淡入）。
   • Layer 2 再拖入 Symbol 2（紅），同座標，動畫設定 10 幀、透明度 100→0（淡出）。
   • 第 10 幀查看：紅漸隱、綠漸現，交叉淡化完成（圖 15-17）。
7. 第三組變色（綠→紫，閉環）：
   • 第 20 幀複製插入第 21 幀，Layer 3 拖入 Symbol 1（紫）透明度 0→100，Layer 2 拖入 Symbol 3（綠）透明度不變，同 10 幀。
   • 播放預覽，若速度過快，統一調大各幀 Frame Delay 或減少補間步數。
8. 左側裝飾圖層： 全程置於共享背景層上方，不參與動畫。

技巧總結

• 符號複用： 同一素材不同色相製成符號，避免重複匯入位圖、減輕檔案體積。
• 補間實例自動插幀： 只需設定首尾態與幀數，Fireworks 自動計算中間幀，極大提升效率。
• 圖層共享鎖定靜態： 背景、裝飾等不變內容勾選「跨幀共享」，一次編輯全幀生效。
• 透明度補間實現交叉淡化： 兩組符號反向透明度補間，無需手動逐幀調整不透明度。
• 幀複製插入控制節奏： 複製關鍵幀插入前/後，精準控制色彩停留與切換時機。

掌握此套「符號→補間→共享層→幀節奏」工作流，可快速產出各類變色、位移、縮放、淡入淡出的 Banner 動畫，並易於後期修改維護。