第 10 章 Flash 基本動畫與 時間軸效果 著作權所有 © 旗標出版股份有限公司.

Presentation on theme: "第 10 章 Flash 基本動畫與 時間軸效果 著作權所有 © 旗標出版股份有限公司."— Presentation transcript:

1 第 10 章 Flash 基本動畫與 時間軸效果 著作權所有 © 旗標出版股份有限公司

2 本章提要 連續影格動畫 (Frame by Frame) 形狀補間動畫 (Shape Tweening) 與
移動補間動畫 (Motion Tweening) 時間軸特效動畫

3 連續影格動畫 (Frame by Frame)
運用描圖紙 (Onion Skin) 功能逐格繪製分解動作 匯入分解動作連續圖檔 Flash 可以匯入的向量圖檔格式 匯入向量圖的好處

4 連續影格動畫 (Frame by Frame)
Flash 的連續影格動畫就是採用連續的影格上製作分解動作：

5 運用描圖紙 (Onion Skin) 功能 逐格繪製分解動作
如果要在 Flash 中逐格畫出連續動作, 那麼基本的製作流程是這樣的︰ 先繪製連續動作影格 1 (即第 1 格影格) 的內容：

6 運用描圖紙 (Onion Skin) 功能 逐格繪製分解動作
請點選影格 2 後再按下 鍵 (或可按滑鼠右鈕執行『插入關鍵影格』命令), 把影格 2 設成關鍵影格。 繪製影格 2 的內容：

7 運用描圖紙 (Onion Skin) 功能 逐格繪製分解動作
重複步驟 2~4, 繼續新增關鍵格並繪製影格內容, 直到完成整個連續動作為止。

8 匯入分解動作連續圖檔 Flash 可以匯入向量圖檔和點陣圖檔, 但由於 Flash 本身是向量繪圖軟體, 所以一般建議最好匯入向量圖檔。你可以使用向量繪圖軟體, 如 FreeHand、CorelDRAW、Illustrator 來畫連續影格動畫的分解動作, 只要存檔時存成連續編號的檔名, 如︰影格 01、影格 02、影格 , Flash 便可以一次匯入所有連續編號的圖檔, 並且一個蘿蔔一個坑地將圖檔自動插入連續的影格中 。

9 Flash 可以匯入的向量圖檔格式 Flash 目前能支援的向量圖格式包括︰EMF、WMF、PDF、FreeHand 的 FH 檔、Adobe Illustrator (10 以前) 的 EPS、AI、以及 AutoCAD 的 DXF ...等等。 其中 FreeHand 是最建議與 Flash 配合的向量繪圖軟體, 因為凡是匯入 FreeHand 7.0 以後版本的圖檔, Flash 皆可接收它的圖層、文字物件、元件等, 幾乎是能以原貌匯入編輯呢！

10 Flash 匯入連續圖檔的方法 例如我們希望在船圖層中置入 5 格連續的圖檔, 而背景 圖層則維 持同一張 的背景圖：

11 Flash 匯入連續圖檔的方法 選取要匯入連續圖檔之圖層的影格 1 (如船圖層的影格 1), 再執行『檔案 / 匯入 / 匯入至舞台』命令開啟匯入交談窗, 選取連續圖檔的第一張圖, 按下開啟鈕。接著在彈出的訊息窗中按下是鈕, 確定要匯入連續的圖檔：

12 Flash 匯入連續圖檔的方法

13 Flash 匯入連續圖檔的方法 某些圖檔, 例如我們匯入的 .ai (Illustrator) 檔, 還可以進一步選擇匯入的方式。指定好匯入方式後, 按 下確定鈕便 可匯 入圖 檔：

14 Flash 匯入連續圖檔的方法 Flash 會自動依序將圖檔插入在連續的影格當中, 這樣馬上就完成了連續影格動畫了：

15 Flash 匯入連續圖檔的方法

16 匯入向量圖的好處 由於 Flash 本身是向量圖形編輯軟體, 所以匯入向量圖的好處是, 可以在 Flash 中修改、編輯向量圖。至於使用點陣圖, 由於受限於無專屬的編輯功能, 所以修改的範圍有限, 而且點陣圖還會增大檔案體積, 也不適合過度使用。 如果要在其他繪圖軟體中製作 Flash 要使用的分解圖檔, 還是建議以向量圖為佳。

17 形狀補間動畫 (Shape Tweening) 與 移動補間動畫 (Motion Tweening)
何謂補間動畫 (Tweened) 形狀補間動畫 (Shape Tweening) 說明 製作形狀補間動畫 (Shape Tweening) 預覽動畫的方法 移動補間動畫 (Motion Tweening) 說明 製作移動補間動畫 (Motion Tweening) 移動補間動畫 V.S. 形狀補間動畫

18 何謂補間動畫 (Tweened)

19 何謂補間動畫 (Tweened) 運用補間動畫可以輕易製作出具有移動、縮放、旋轉、形狀漸變、色彩漸變等效果的動畫, 還能控制動畫行進變慢或變快！另外, 使用補間動畫還可以保持檔案的苗條, 非常適合用於網頁這種受限於頻寬問題的情況。 補間動畫分為形狀補間動畫 (Shape Tweening) 和移動補間動畫 (Motion Tweening) 2 種, 它們各有不同的動畫效果及作用對象。

20 形狀補間動畫 (Shape Tweening)
形狀補間動畫可以製造的動畫效果以及作用對象與作用條件如下︰

21 製作形狀補間動畫 (Shape Tweening)
接著我們實作一個星形變圓形的動畫, 在動手之前, 讓我們先看看, 已完成的形狀補間動畫是什麼樣 子︰

22 製作形狀補間動畫 Flash 會自動將新開啟動畫的起始影格設為關鍵影格, 請直接點 選此影格畫 個星形︰

23 製作形狀補間動畫 接著選個結尾影格, 設為空白關鍵影格, 並且畫個圓形︰

24 製作形狀補間動畫 此時, 選擇影格預覽功能, 就可以清楚看出起始影格和結尾影格的內容：

25 製作形狀補間動畫 接著再次選取起始影格, 然後在屬性面板設定形狀補間動畫︰ 做好啦！現在馬上可以按下 鍵預覽效果囉！

26 預覽動畫的方法 不論是連續影格動畫還是形狀補間、移動補間動畫, 設定好後, 總要不時地播放看看, 以方便修改。通常直接按下 鍵, 或是執行『控制 / 播放』命令就可以播放動畫。不過,控制器工具列把這項工作變得更實用且便利囉！ 請執行『視窗 / 工具列 / 控制器』命令開啟此工具列, 以下就是控制器工具列各按鈕的功能及其對應的快速鍵︰

27 預覽動畫 的方法 勾選『控制 / 重複播放』命 令, 可以讓動畫一直重複播放; 勾選『控制 / 播放全部場景』命令, 則播放動畫時會從第一個場景依順序播到最後一個場景為止。 至於那些無法在一般編輯環境中直接播放預覽的部分, 如影片片段元件, 你可以用『控制 / 測試影片』命令來測試。

28 製作形狀補間動畫 預覽動畫後, 你可能會發現, 你做的星形不僅變形成圓形, 還移動了位置！這是因為起始影格的星形位置和結尾影格的圓形位置不同, 所以它就一邊變形一邊移動了！若不想讓它移動, 可以利用描圖紙功能或是尺規、格線、排列物件等輔助功能, 讓兩者位置統一即可！

29 移動補間動畫 (Motion Tweening)
移動補間動畫可以製作的動畫效果以及作用對象與作用條件如下︰

30 製作移動補間動畫 (Motion Tweening)
接著我們實作一個人物移動的動畫試試, 在動手之前, 讓 我們先看看, 已完成的移 動補間動畫 是什麼樣子︰

31 製作移動補間動畫 選擇起始影格, 畫個娃娃, 並將之建立成為圖像元件︰

32 製作移動補間動畫

33 製作移動補間動畫 接著選個結尾影格並設為關鍵影格, 然後把結尾影格中的 Boy 實體移動一下位置︰

34 製作移動補間動畫 接著重新選取影格 1, 然後在屬性面板設定成移動補間動畫後,就可完成了︰

35 移動補間動畫 V.S. 形狀補間動畫 移動補間動畫與形狀補間動畫都是補間動畫, 而兩者最大的差別是作用對象的不同, 移動補間動畫必須作用在實體、群組物件、文字元件上, 而形狀補間動畫則是只能作用在圖像物件上。 至於可以製作出的動畫效果則大同小異, 若要各選出一個最具代表性的效果, 那就是移動補間動畫的路徑動畫, 與形狀補間動畫的形狀漸變囉！

36 時間軸特效動畫 套用時間軸特效 編輯與移除時間軸特效

37 時間軸特效動畫 時間軸特效 (Timeline Effects) 是 Flash MX 2004 的新增功能, 它提供多達 8 種特效供你選用, 包括：拷貝至格線 (Copy to Grid)、散佈副本 (Distributed Duplicate)、模糊 (Blur)、投陰 (Drop Shadow)、展開 (Expand)、爆破 (Explode)、轉場 (Transform)、變形 (Transition)。你只要在交談窗中設定選項和參數, 接著Flash 就會自動幫你完成時間軸、圖層、與影格的安排, 快速獲得不錯的動畫效果。

38 套用時間軸特效 時間軸特效全部收錄在『插入 / 時間軸特效』命令之下, 您只要先選取欲加上時間軸特效的影格, 然後再挑選一種時間軸特效, 便會開啟交談窗讓你做相關設定：

39 套用時間軸特效 這裡我們以拷貝至格線效果為例, 介紹如何加入時間軸特效。在實作之前, 先看看套用拷貝至格線前後的變化：

40 套用時間軸特效 先在影格 1 中繪製圖形, 然後選取影格 1 執行『插入 / 時間軸特效 / 助理 / 拷貝至格線』命令, 開 啟拷貝至
交談 窗：

41 套用時間軸特效

42 套用時間軸特效 接著在交談窗的參數設定區輸入適當的參數值, 並可 按下更新 預覽鈕從 效果預覽 區看看是 否滿 意：

43 套用時間軸特效 最後按下確定鈕即可將效果套用到動畫之中了：

44 編輯與移除時間軸特效 若是覺得效果不甚滿意, 想要修改時間軸特效的設定, 可選取加上時間軸特效的影格, 然後執行『修改 / 時間軸特效 / 編輯特效』命令 (或者按下屬性面板中的編輯鈕), 即可再次開啟交談窗來修改設定值。而若是想移除時間軸特效, 則是可執行『修改 / 時間軸特效 / 移除特效』命令。

45 編輯與移除時間軸特效