第 16 章 時間軸特效動畫─趣味小廣告.

Presentation on theme: "第 16 章 時間軸特效動畫─趣味小廣告."— Presentation transcript:

1 第 16 章 時間軸特效動畫─趣味小廣告

2 本章提要 16-1 時間軸特效動畫 16-2 動畫元件與流程說明 16-3 製作文字陰影 16-4 元件轉場特效 16-5 文字爆破特效
16-6 圖片速成複製法 16-7 延伸學習

3 前言 本章的重點在於應用 Flash 現成的時間軸特效來製作動畫, 我們一共會使用到：複製至格線 (Copy to Grid)、投影 (Drop Shadow)、爆破 (Explode)、與轉場 (Transition) 4 種特效。 請先播放範例檔 16.swf, 觀看製作完成的時間軸特效：

4 前言

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

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

7 16-2 動畫元件與流程說明 元件介紹 動畫製作流程 重點說明

8 元件介紹 本範例要製作一部 "神奇糖果" 小廣告, 大意是小女孩吃下神奇糖果後, 馬上擁有全新漂亮的髮型, 因此我們先準備好最主要的 4 個女孩圖像元件：

9 動畫製作流程

10 重點說明 動畫一開始, 中央出現陰影文字 "Magic Candy", 並以移動補間動畫讓文字移動至動畫底部。接著使用 girl1、girl2、girl3 圖像元件, 製作西瓜皮髮型女孩吃下糖果的動作。 第 2 階段重點在於轉場特效的應用, 先讓變 "髮" 前的女孩往下淡出消失, 再讓變 "髮" 後的摩登女孩往上淡入顯現, 營造人物變身的效果。

11 重點說明

12 重點說明 第 3 階段要應用爆破特效製作文字向上左右炸開的驚奇效果。而為了讓畫面更具有動感, 還會加入糖果影片片段做為裝飾之用。
最後影格總數確認了, 再利用拷貝至格線特效, 讓簡單的圖形快速佈滿整個舞台, 幫動畫的背景美化一番。

13 16-3 製作文字陰影 設定文件屬性 加入文字陰影 建立文字移動補間動畫

14 設定文件屬性 本範例之文件屬性如右圖所示, 你可執行『修改/文件』命令, 開啟文件屬性交談窗來做設定：

15 加入文字陰影 請開啟練習檔 16-learn.fla, 我們要運用投影時間軸特效 (Drop Shadow) 來製作文字陰影：
首先使用文字工具鈕在舞台中建立文字物件：

16 加入文字陰影

17 加入文字陰影 選取剛建立的文字物件, 執行『插入/時間軸特效/特效/投影』命令, 開啟投影交談窗來設定投影屬性：

18 加入文字陰影 最後按下投影交談窗的確定鈕, 文字陰影就做好了：

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

20 編輯與移除時間軸特效

21 建立文字移動補間動畫 接著進行文字墜落舞台底部的移動補間動畫。而為了讓畫面更顯活潑, 在文字墜落底部後, 我們還刻意讓文字彈跳一下, 請如下操作：

22 建立文字移動補間動畫

23 建立文字移動補間動畫

24 出現 "你正嘗試編輯已套用特效的元件" 訊息 當我們打算在影格 15 插入關鍵影格時, 會跳出如下的提示訊息, 這是因為時間軸特效動畫是由 Flash 根據交談窗設定而產生的, 因此若你嘗試手動編輯時間軸特效所產生的影格內容, 就會告知你如果要繼續編輯, 便無法再透過『修改/時間軸特效/編輯特效』命令來修改特效設定了：

25 出現 "你正嘗試編輯已套用特效的元件" 訊息

26 建立文字移動補間動畫 至於文字彈跳的效果也很容易, 只要繼續在影格 17、18 插入關鍵影格, 然後讓影格 17 中的文字略為往上移動 (位於 X：38、Y：291.4)；影格 18 中的文字恢復在動畫底部 (位於 X：38、Y：298.4), 播放起來就會有文字彈跳的感覺了。 你可開啟練習檔 16-learn1.fla 來參考文字動畫的安排。

27 16-4 元件轉場特效 這節要先來一段女孩從口袋拿糖果吃的動畫, 接著再應用轉場時間軸特效(Transition), 讓變 "髮" 前的女孩往下淡出, 再讓變 "髮" 後的摩登女孩往上淡入, 製造人物變身的效果。

28 女孩吃糖動畫 請開啟練習檔 16-learn2.fla, 裡面已經為你準備好女孩圖像元件供你練習。此外, 檔案中我們把投影 1 圖層延伸至影格 55, 以便讓 "Magic Candy" 文字維持顯示在舞台底部。 選取吃糖果圖層的影格 25, 按下 [F6] 鍵插入關鍵影格, 然後從元件庫面板將 girl1 圖像元件拉曳到舞台正中央 (位於 X：206.8、Y：56.8)：

29 女孩吃糖動畫

30 女孩吃糖動畫 接著將影格 30、35、40、45 設成空白關鍵影格, 然後分別放入 girl2、girl3、girl2、girl3 圖像元件, 製造女孩吃糖的動作 (注意！女孩出現的位置要保持一樣)。最後再將影格延伸到第 55 格：

31 女孩吃糖動畫

32 加入轉場特效 接著要套用轉場時間軸特效。請利用 ch16-learn3.fla 如下操作。
首先將吃糖果圖層的影格 45 複製到變髮中圖層的影格 56：

33 加入轉場特效

34 加入轉場特效 選取變髮中圖層的影格 56, 執行『插入/時間軸特效/變形/轉場/轉場』命令, 開啟轉場交談窗做如下設定：

35 加入轉場特效

36 加入轉場特效 原本的變髮中圖層這時會根據上面的設定, 加入一段長度為 30 影格的轉場動畫, 並自動更名為轉場 2：

37 加入轉場特效

38 加入轉場特效 接著比照相同的方法, 另外新增一個變髮後圖層, 然後在影格 86 插入關鍵影格並放入 girl4 圖像元件 (X：150、Y：16), 再執行『插入/時間軸特效/變形/轉場/轉場』命令, 開啟轉場交談窗做屬性設定 (跟不上的讀者可直接打開 ch16-learn4.fla 來執行『轉場』命令)：

39 加入轉場特效

40 加入轉場特效 最後按下交談窗的確定鈕就完成女孩變髮的動畫了：

41 16-5 文字爆破特效 接著要帶出此段廣告的文字標語 "Magic Candy change your hairstyle!!", 然後使用爆破時間軸特效 (Explode) 製做文字爆破效果。

42 加入爆破特效 請開啟練習檔 16-learn5.fla, 檔案中我們已經將上一節的轉場 3 圖層延長為135 個影格, 讓變髮後的女孩多停留在畫面上幾秒。另外還加入了哇 wow~ 圖層, 放入逐字出現的 "wow~" 文字, 你可自己研究看看。言歸正傳, 我們來看看怎麼製作爆破文字吧！

43 加入爆破特效 使用文字工具鈕在舞台中輸入 "Magic Candy change your hairstyle!!", 並應用屬性面板設定文字的字型、大小、色彩：

44 加入爆破特效

45 加入爆破特效 將標語圖層的影格 160 設成關鍵影格, 讓標語文字延伸到第 160 格。接著選取影格 160, 執行『插入/時間軸特效/特效/爆破』命令, 開啟爆破交談窗來設定爆破特效的屬性：

46 加入爆破特效

47 加入爆破特效 按下爆破交談窗的確定鈕, 即可回到動畫中觀賞文字爆炸效果了 (此時標語圖層已自動改名為爆破 4 圖層)：

48 加入爆破特效

49 加入爆破特效

50 16-6 圖片速成複製法 這段趣味廣告已接近完成, 最後我們再利用複製至格線時間軸特效 (Copy to Grid), 替單調的素色背景做點兒美化。請開啟練習檔 16-learn6.fla, 檔案中我們已在爆破 4 圖層的影格 135 加入幾個可愛的糖果影片片段, 增加俏皮效果。 新增背景圖層並搬移到最底層, 然後選取影格 1 並如下操作：

51 圖片速成複製法

52 圖片速成複製法 選取背景圖層的影格 1, 執行『插入/時間軸特效/助理/拷貝至格線』命令, 開啟 拷貝至格線交談窗來設定：

53 圖片速成複製法

54 圖片速成複製法

55 圖片速成複製法 這段神奇糖果廣告總算完成了, 期間一共運用了 4 種不同的時間軸特效, 相信經過本範例的磨練後, 你對於時間軸特效已經不再陌生了吧！ 假如你有興趣想研究這些時間軸特效究竟是怎麼做出來的, 可以雙按元件庫面板中, 時間軸特效元件名稱前的圖示, 進入該元件的編輯模式下研究。

56 圖片速成複製法

57 16-7 延伸學習- 詩中有畫~ 畫中有詩~ 本範例總共使用了時間軸特效中的散佈副本、模糊效果, 製作出靜態的羽毛落水分解動作, 並加入動態的連漪效果, 再搭配上背景及詩詞的結合後, 就完全達到了詩情畫意的效果。請開啟範例檔 16-a01.swf 先來體驗一下詩中有畫, 畫中有詩的意境吧！

58 延伸學習- 詩中有畫~ 畫中有詩~

59 套用模糊特效製作水波紋動畫 首先來製作水中的波紋效果, 我們已經在舞台中安排好背景, 以及元件庫中的羽毛和波紋元件, 請開啟練習檔 16-q01.fla。

60 套用模糊特效製作水波紋動畫

61 套用模糊特效製作水波紋動畫

62 套用散佈副本特效製作羽毛飄落效果 接下來製作羽毛飄落水中靜態散佈的連續圖形：

63 套用散佈副本特效製作羽毛飄落效果

64 套用散佈副本特效製作羽毛飄落效果 完成特效套用後, 現在你就可以開啟範例檔 16-a01.fla 對照設定是否正確, 若確定無誤後就可以按下 [Ctrl] + [Enter] 鍵瀏覽動畫效果。