Flash 動畫入門第一課：位圖平移。通過「聖誕老人駕馬車穿越雪地」經典案例，掌握「素材準備→圖層分離→動畫元件制作→逆向思維背景平移→補間動畫」核心工作流。零基礎 20 分鐘產出第一個完整動畫短片。

效果預覽

聖誕老人駕著馬車 (GIF 動畫元件) 置於舞台中央保持相對靜止，雪地背景從左向右平移，製造馬車向左前進的視覺錯覺，配合《鈴兒響叮當》背景音樂，氛圍拉滿。

素材準備（三件套）

• 背景圖： 寬幅雪景圖 (寬度 > 舞台寬度 2-3 倍，保證平移過程無縫銜接)。
• 動畫元件： 聖誕老人馬車 GIF 動畫 (多幀循環動畫，如 3 幀跑步循環)。
• 背景音樂： 《鈴兒響叮當》 MP3/WAV 文件。

圖層架構：分離關注點

圖層	名稱	內容	狀態
1	bgm	背景音樂	正常
2	bg_snow	雪景背景圖 (位圖)	正常
3	car_sleigh	馬車 GIF 動畫元件 (影片剪輯)	正常

圖1：三層結構初始佈局

步驟 1：處理馬車動畫元件（統一位置、循環播放）

1. 雙擊圖層 3 馬車元件進入編輯模式。
2. 檢查內部幀：共 3 幀構成跑步循環。
3. 逐幀調整：選中每幀馬車位圖 → 工具欄左下角座標輸入框設置統一 X=282.0, Y=166.0 (舞台近似中心)，確保 3 幀位置完全一致，避免抖動。
4. 退出元件編輯，回到主場景。
5. 主場景圖層 3 第 1 幀選中馬車元件 → 右鍵「複製幀」→ 連續粘貼複製至音樂結束幀 (約 370 幀)，實現循環播放。

圖2：統一馬車元件各幀座標 (X=282, Y=166)

圖3：複製幀覆蓋整段音樂時長

步驟 2：逆向思維——背景平移製造前進感（核心邏輯）

為什麼不動馬車動背景？ 馬車是多幀動畫元件，再加平移補間會極其複雜且易出錯。背景是單一位圖，平移極簡單。視覺上「背景向右移」≡「馬車向左移」，這就是逆向思維。

1. 隱藏圖層 3 (馬車)：點擊圖層 3 旁「眼睛圖標」下方的點，出現「紅叉」圖標，圖層隱藏。
2. 選中圖層 2 (bg_snow) 第 1 幀背景圖。
3. 調整背景初始位置：拖動/輸入座標使背景盡量向左邊緣靠齊（雪地左側超出舞台），記錄左下角座標 X = -379.6, Y = -112.0。

圖4：隱藏馬車層專注背景編輯

圖5：背景初始位置 X=-379.6, Y=-112.0

4. 在圖層 2 最後一幀 (與音樂結束幀對齊，約 370 幀) 右鍵「插入關鍵幀」。
5. 在最後一幀，將背景圖拖動/輸入座標使其盡量向右邊緣靠齊（雪地右側超出舞台）。
6. 關鍵：平移過程 Y 軸座標必須保持不變 (-112.0)，若有變動手動修正，否則畫面會上下抖動。

圖6：背景終止位置向右平移，Y座標不變

7. 回到圖層 2 第 1 幀，右鍵 → 「創建補間動畫」。背景平移動畫完成。

圖7：第 1 幀右鍵創建補間動畫

圖8：時間軸顯示補間動畫箭頭

步驟 3：音樂同步與測試

1. 圖層 1 (bgm) 第 1 幀拖入音樂文件，屬性面板同步選「流式」，最後一幀插入幀，確保音樂覆蓋全程。
2. 按 Ctrl+Enter 發布測試：馬車原地跑步循環，雪地背景平滑向右流動，視覺上馬車向左穿越雪地，《鈴兒響叮當》響徹全程。

核心知識點速記卡

知識點	操作要訣	避坑提醒
動畫元件內部幀位置統一	進入元件編輯，逐幀設置相同 X/Y 座標	不統一會導致元件在主場景抖動/跳躍
主場景複製幀循環播放	複製元件實例幀覆蓋所需時長	複製幀數 = 總幀數 / 元件幀數 向上取整
逆向思維背景平移	動主體難 → 動背景易，視覺等效	Y 軸座標必須鎖定，否則畫面上下抖動
背景圖寬度要求	≥ 舞台寬度 × 2，保證平移無縫	圖寬不夠會出現空白/硬切邊緣
補間動畫創建	起始幀右鍵「創建補間動畫」	別在結束幀創建，方向會反
音樂同步模式	「流式」同步，隨時間軸播放	「事件」模式會重複播放/不同步

進階挑戰：擴展練習

• 視差滾動： 添加圖層 2.5 (遠山)、圖層 2.8 (近樹)，不同速度平移 (遠山慢、近樹快)，模擬景深。
• 粒子效果： 在馬車層上方添加「雪花粒子」動畫元件 (ActionScript/逐幀)，增強沉浸感。
• 互動控制： 添加按鈕控制「開始/暫停/加速/減速」，學習 ActionScript 事件處理。

結語：平移動畫是 Flash 動畫的「Hello World」，但「逆向思維背景平移」蘊含著動畫制作的核心智慧——**用最簡單的技術手段，解決最複雜的視覺表達問題**。聖誕老人的馬車跑起來了，你的 Flash 之路也正式啟程。下一課，我們挑戰「旋轉+縮放」的扇形遮罩打開（見系列第 4 彈），敬請期待！