Illustrator 不僅是矢量繪圖工具，更能直接導出 SWF/HTML5 動畫。本教程以倒計時數字動畫為例，完整演示從畫板設定、幀內容製作、圖層序列化、SWF 導出參數配置的全流程，讓平面設計師零門檻掌握基礎動畫輸出能力。

最終效果

核心邏輯：圖層即幀

Illustrator 導出 SWF 時，選項「AI 圖層到 SWF 幀」將每個頂層圖層對應一幀。因此，動畫製作的關鍵在於：將每一幀內容整理為獨立的頂層圖層。

詳細製作步驟

步驟 1：新建動畫文檔

• `Ctrl+N` 新建文件：設定檔「行動裝置」或自定 QVGA (320×240px)，色彩模式 RGB，解析度 72ppi。
• 命名「倒計時動畫」。

步驟 2：製作單一數字元件

1. 矩形工具繪製矩形，`物件 > 路徑 > 分割為網格`，設定行列數（如 7×5）構成七段式數字基礎網格。
2. 調整網格大小比例，填充基礎顏色。
3. 按住 `Alt` 拖動複製 4 份 (`Ctrl+D` 重複)，分別填充不同顏色區分。
4. 通過顯示/隱藏特定色塊，組合成 0-9 十個數字形狀。
5. 每個數字的所有色塊 `Ctrl+G` 群組，命名「num_0」~「num_9」。

步驟 3：建立倒計時幀序列

1. 全選所有數字群組，對齊面板「水平/垂直置中對齊」至畫板中心。
2. 關鍵：圖層面板中按順序排列群組：最底層「num_10」（或起始數），向上依序「num_9」、「num_8」...「num_0」。
3. 全選所有數字群組，圖層面板右上角選單 > 「釋放到圖層 (順序)」。
4. AI 將自動為每個群組建立獨立頂層圖層，層名為「num_10」、「num_9」...。

步驟 4：導出 SWF 動畫

1. `檔案 > 匯出 > 匯出為`，格式選「Flash (SWF)」。
2. 彈出選項對話框：
• 匯出：「AI 圖層到 SWF 幀」。
• 點擊「進階」：幀速率設 1 fps（每秒 1 幀，適合倒計時）。
• 圖層順序：「從下往上」（對應倒計時遞減邏輯）。
• 其他選項：勾選「包含字型」、「壓縮」。
3. 點擊確定，獲得 `倒計時動畫.swf`。

進階擴展：導出 HTML5 Canvas / SVG 動畫

現代工作流建議導出更通用的格式：

1. 安裝擴充套件「Adobe Animate CC」或使用「Bodymovin」面板（需另裝）。
2. 或手動導出 SVG 序列：每幀單獨 `檔案 > 匯出 > SVG`，再用腳本/工具合成 JSON/WebP 動畫。
3. 或直接在 Illustrator 中使用「檔案 > 匯出 > 供螢幕使用」，導出 PNG 序列，再用 Photoshop/線上工具合成 GIF/APNG/WebP。

常見問題排查

問題	原因	解決
動畫播放速度不對	幀速率設定錯誤	SWF 導出選項中精確設定 fps；GIF 需在 PS 中設定幀延遲
圖層順序顛倒	「從下往上」/「從上往下」選錯	倒計時遞減用「從下往上」；正向播放用「從上往下」
字體缺失/替換	未嵌入字型或系統無該字體	導出選項勾選「包含字型」；或文字預先「建立輪廓」
檔案過大	矢量點數過多、未簡化	導出前「物件 > 路徑 > 簡化」；使用符號複用重複元件
透明背景失效	SWF 版本/播放器設定	導出選項勾選「透明背景」；或導出 PNG 序列合成

從靜態到動態的思維轉變

Illustrator 的動畫能力雖不如 Animate/After Effects 專業，但「圖層即幀」的邏輯極其直觀，完美契合平面設計師的思維模式。掌握這套流程，你就能：

• 快速產出 Banner 廣告、Loading 動畫、圖標微交互原型。
• 將現有插畫/圖標資產零成本動態化。
• 與開發協作時提供精確的動畫規格藍圖（時序、缓动、循環邏輯）。

建立「靜態設計 → 圖層序列化 → 動畫導出」的肌肉記憶，讓動態設計成為你設計工具箱中隨時可調用的標準能力。