1. 著作權所有 © 旗標出版股份有限公司 第 2 章 動畫快速上手

2. 2 本章提要  2-1 快速建立移動動畫 2-1 快速建立移動動畫  2-2 製作逐一影格動畫 2-2 製作逐一影格動畫

3. 3 2-1 快速建立移動動畫  Flash 能讓製作網頁動畫的人趨之若鶩, 有大半功勞都要歸給補間動畫 (Tweened) 。它是最方便又容易的一種 動畫製作方式, 我們只要製作連續動作 的開始和結束的內容, 中間的動畫過程 就交給 Flash 自動完成。

4. 4 快速建立移動動畫

5. 5  運用補間動畫可以輕易製作出具有移動、 縮放、旋轉、形狀漸變、色彩漸變等效 果的動畫, 還能控制移動速度變慢或變 快 … 等。  Flash 的補間動畫分為形狀補間動畫 (Shape Tweening) 和移動補間動畫 (Motion Tweening) 2 種, 此處我們先介 紹移動補間動畫的製作方法, 讓您搶先 體驗補間動畫的魅力。

6. 6 快速建立移動動畫  請雙按範例檔 02.swf, 先看看已完成的 移動補間動畫是什麼樣子。

7. 7 快速建立移動動畫 1. 請開啟練習檔 02-learn.fla, 我們來實 際體驗一下移動補間動畫的製作步驟。

8. 8 快速建立移動動畫 2. 開啟檔案後, 我們要製作第 1 格影格的 內容。請先按一下時間軸面板上圖層 1 的影格 1, 再執行『視窗 / 元件庫』 命令開啟元件庫面板, 其中小汽車是我 們準備好的圖形, 請從元件庫面板將小 汽車拉曳到舞台左邊的位置：

9. 9 快速建立移動動畫

10. 10 快速建立移動動畫 3. 接下來我們要製作結束影格的內容。 假設動畫共有 10 格影格, 請在時間軸 面板上圖層 1 的影格 10 處按下滑鼠 右鈕, 執行『插入關鍵影格』命令：

11. 11 「播放磁頭」的作用  我們可由播放磁頭得知目前舞台上播放 的是哪一格影格的內容。請先按一下影 格 1 的位置, 將播放磁頭移至動畫的最 前面, 再按下 [Enter] 鍵, 此時播放磁頭 會依序由影格 1 移動至影格 10, 不過由 於我們尚未進行移動的設定, 因此舞台 上的小汽車沒有任何的移動或變化。

12. 12 快速建立移動動畫 4. 選取圖層 1 的影格 10, 然後按下工具 箱的選取工具, 再將舞台左邊的小汽車 拉曳到舞台的右邊, 代表小汽車的行徑 路線。移動時請儘量保持水平移動, 如 果擔心無法維持在相同的水平位置, 請 在拉曳前先按下 [Shift] 鍵不放再進行 拉曳, 小汽車就會維持在相同的水平位 置囉！

13. 13 快速建立移動動畫

14. 14 快速建立移動動畫  請在影格 1 上按右鈕, 執行『建立移動 補間動畫』命令, 影格 1 到影格 10 之間 便會顯示一個箭頭圖示, 箭頭穿過的影 格, 就是 Flash 幫我們完成的, 這些自動 完成的影格稱之為補間動畫影格：

15. 15 快速建立移動動畫

16. 16 快速建立移動動畫  動畫設定到此就完成了, 請按下時間軸 面板上的影格 1, 將播放磁頭移至影格 1 的位置, 再按下 [Enter] 鍵, 即可藉由播 放磁頭的移動來檢視小汽車的移動效果。  在此動畫中, 小汽車會從舞台左邊開往 右邊, 如果將影格 1 的小汽車移至舞台 外左邊的位置：

17. 17 快速建立移動動畫

18. 18 快速建立移動動畫  再將影格 10 的小汽車移至舞台外右邊 的位置：

19. 19 快速建立移動動畫  如此一來當動畫重複播放時, 就會有穿 流不息的效果囉！你可以執行『控制 / 測 試影片』命令, 瀏覽完成的動畫效果。

20. 20 快速建立移動動畫  特別提醒您, 執行『控制 / 測試影片』命 令後, Flash 將會自動建立一個相同檔名, 但格式為.swf 的播放檔, 因此若是開啟 光碟中的練習檔來練習, 請務必將檔案 儲存至自己的硬碟中, 才能順利進行動 畫測試。  有關於動畫測試及發佈的完整說明, 可 參考第 17 章。

21. 21 2-2 製作逐一影格動畫  除了補間動畫的製作方式, 我們也可以 一格一格的繪製影格內容, 這種類似傳 統卡通的繪製方法, 我們稱之為連續影 格動畫 (Frame by Frame) 。  連續影格動畫所採用的製作方式, 是將 要表現動態的部份分解成多個動作, 然 後一個個的製作, 再將這些動作連續播 放, 就形成了動態效果。

22. 22 製作逐一影格動畫  請雙按範例檔 02-01.swf, 瀏覽我們完成 的連續影格動畫：

23. 23 製作逐一影格動畫  由範例來看, 連續影格動畫需要繪製很 多內容不同的影格, 適合用來表現細膩 的動作, 例如︰人物的跑步, 但它的缺點 主要是製作費時, 而且檔案體積較大, 所 以如果動畫要應用在網頁上的話, 最好 盡量減少使用連續影格動畫, 以免增加 網頁下載的時間。

24. 24 製作逐一影格動畫  在 Flash 中製作連續影格動畫有 2 種方 式, 一種是在 Flash 中逐格地繪製分解 動作, 另一種是直接匯入由其它軟體 ( 如︰ Illustrator 、 Photoshop 、 PhotoImpact...) 所製作的分解動作連續 圖檔。  在此, 我們使用的是第 1 種方式, 在 Flash 中逐格繪製動作。

25. 25 製作逐一影格動畫  為了方便您練習, 我們已在練習檔 02- learn1.fla 準備好每個分解動作的圖檔, 請開啟練習檔 02-learn1.fla, 跟我們一 起進行如下的操作。

26. 26 製作逐一影格動畫 1. 開啟檔案後, 即可在元件庫面板 ( 執行 『視窗 / 元件庫』命令可開啟元件庫面 板 ) 看到我們事先準備好的 7 個分解 動作圖檔。請拉曳動作 1 至舞台中靠 近右邊的位置：

27. 27 製作逐一影格動畫

28. 28 製作逐一影格動畫 2. 請點選時間軸面板圖層 1 的影格 2 再 按下 [F6] 鍵 ( 或在影格 2 上按右鈕, 執 行『插入關鍵影格』命令 ), 將影格 2 設定為關鍵影格。 此時影格 2 會延續影格 1 的內容, 而 影格 2 的內容原本應該由動作 1 的圖 形修改而成。

29. 29 製作逐一影格動畫 但為了節省您繪製圖形的時間, 我們已 將每個影格的動作分解至元件庫面板中, 所以請按下 [Delete] 鍵, 將舞台上影格 2 中的動作 1 刪除。

30. 30 製作逐一影格動畫 3. 按下時間軸面板下方的描圖紙鈕, 再 將動作 2 由元件庫拉曳至舞台上動作 1 的左邊位置。啟動描圖紙的好處, 就 是可以參考影格 1 中動作 1 的位置來 安排影格 2 的內容, 使動作 2 的位置 能更準確, 動畫的效果更流暢。

31. 31 製作逐一影格動畫

32. 32 製作逐一影格動畫 4. 重覆步驟 2 及步驟 3 的操作, 一一設 定好每個影格的動作, 每設定一個影格 就要往左邊移動一點, 才會有走向左邊 的效果。請設定到動作 7, 整個動畫會 有 7 個影格。

33. 33 製作逐一影格動畫

34. 34 製作逐一影格動畫  完成後請在影格 1 的位置按一下, 將播 放磁頭移到影格 1 的位置, 即可按下 [Enter] 鍵瀏覽每個影格的設定結果, 並 檢查動畫的流暢度再做適當的調整；或 是先儲存檔案, 再執行『控制 / 測試動畫』 命令, 檢視動畫的播放效果。