时间轴特效动画趣味小广告

1、第第 16 章章時間軸特效動畫時間軸特效動畫趣味小廣告趣味小廣告本章提要本章提要16-1 時間軸特效動畫16-2 動畫元件與流程說明16-3 製作文字陰影16-4 元件轉場特效16-5 文字爆破特效16-6 圖片速成複製法16-7 延伸學習2前言前言本章的重點在於應用 Flash 現成的時間時間軸特效軸特效來製作動畫, 我們一共會使用到：複製至格線複製至格線 (Copy to Grid)、投影投影 (Drop Shadow)、爆破爆破 (Explode)、與轉轉場場 (Transition) 4 種特效。請先播放範例檔 16.swf, 觀看製作完成的時間軸特效：3前言前言416-1 時間軸特效

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

3、收錄在插入插入/時間軸時間軸特效特效命令之下, 您只要先選取欲加上時間軸特效的影格, 然後再挑選一種時間軸特效, 便會開啟交談窗讓你做相關設定。616-2 動畫元件與流程說明動畫元件與流程說明元件介紹動畫製作流程重點說明7元件介紹元件介紹本範例要製作一部 神奇糖果 小廣告, 大意是小女孩吃下神奇糖果後, 馬上擁有全新漂亮的髮型, 因此我們先準備好最主要的 4 個女孩圖像元件：8動畫製作流程動畫製作流程9重點說明重點說明動畫一開始, 中央出現陰影文字 Magic Candy, 並以移動補間動畫讓文字移動至動畫底部。接著使用 girl1、girl2、girl3 圖像元件, 製作西瓜皮髮型女孩吃下糖

4、果的動作。第 2 階段重點在於轉場轉場特效的應用, 先讓變 髮 前的女孩往下淡出消失, 再讓變 髮 後的摩登女孩往上淡入顯現, 營造人物變身的效果。10重點說明重點說明11重點說明重點說明第 3 階段要應用爆破爆破特效製作文字向上左右炸開的驚奇效果。而為了讓畫面更具有動感, 還會加入糖果影片片段做為裝飾之用。最後影格總數確認了, 再利用拷貝至格拷貝至格線線特效, 讓簡單的圖形快速佈滿整個舞台, 幫動畫的背景美化一番。1216-3 製作文字陰影製作文字陰影設定文件屬性加入文字陰影建立文字移動補間動畫13設定文件屬性設定文件屬性本範例之文件屬性如右圖所示, 你可執行修改修改/文件文件命令, 開啟文

5、件屬文件屬性性交談窗來做設定：14加入文字陰影加入文字陰影 請開啟練習檔 16-learn.fla, 我們要運用投影投影時間軸特效 (Drop Shadow) 來製作文字陰影：1. 首先使用文字工具文字工具鈕在舞台中建立文字物件：15加入文字陰影加入文字陰影16加入文字陰影加入文字陰影選取剛建立的文字物件, 執行插入插入/時時間軸特效間軸特效/特效特效/投影投影命令, 開啟投影投影交談窗來設定投影屬性：17加入文字陰影加入文字陰影最後按下投影投影交談窗的確定確定鈕, 文字陰影就做好了：18編輯與移除時間軸特效編輯與移除時間軸特效若是覺得效果不甚滿意, 想要修改時間軸特效的設定, 可選取加上時間

6、軸特效的影格, 然後執行修改修改/時間軸特效時間軸特效/編編輯特效輯特效命令 (或者按下屬性屬性面板中的編輯編輯鈕), 即可再次開啟交談窗來修改設定值。而若是想移除時間軸特效, 則是可執行修改修改/時間軸特效時間軸特效/移除特效移除特效命令。19編輯與移除時間軸特效編輯與移除時間軸特效20建立文字移動補間動畫建立文字移動補間動畫接著進行文字墜落舞台底部的移動補間動畫。而為了讓畫面更顯活潑, 在文字墜落底部後, 我們還刻意讓文字彈跳一下, 請如下操作：21建立文字移動補間動畫建立文字移動補間動畫22建立文字移動補間動畫建立文字移動補間動畫23出現出現 你正嘗試編輯已套用特效你正嘗試編輯已套用特效

7、的元件的元件 訊息訊息當我們打算在影格影格 15 插入關鍵影格時, 會跳出如下的提示訊息, 這是因為時間軸特效動畫是由 Flash 根據交談窗設定而產生的, 因此若你嘗試手動編輯時間軸特效所產生的影格內容, 就會告知你如果要繼續編輯, 便無法再透過修改修改/時間軸特效時間軸特效/編輯特效編輯特效命令來修改特效設定了：24出現出現 你正嘗試編輯已套用特效你正嘗試編輯已套用特效的元件的元件 訊息訊息25建立文字移動補間動畫建立文字移動補間動畫至於文字彈跳的效果也很容易, 只要繼續在影格影格 17、18 插入關鍵影格, 然後讓影格影格 17 中的文字略為往上移動 (位於 X：38、Y：291.4)；

8、影格影格 18 中的文字恢復在動畫底部 (位於 X：38、Y：298.4), 播放起來就會有文字彈跳的感覺了。你可開啟練習檔 16-learn1.fla 來參考文字動畫的安排。2616-4 元件轉場特效元件轉場特效這節要先來一段女孩從口袋拿糖果吃的動畫, 接著再應用轉場轉場時間軸特效(Transition), 讓變 髮 前的女孩往下淡出, 再讓變 髮 後的摩登女孩往上淡入, 製造人物變身的效果。27女孩吃糖動畫女孩吃糖動畫 請開啟練習檔 16-learn2.fla, 裡面已經為你準備好女孩圖像元件供你練習。此外, 檔案中我們把投影投影 1 圖層延伸至影格影格 55, 以便讓 Magic Can

9、dy 文字維持顯示在舞台底部。1. 選取吃糖果糖果圖層的影格影格 25, 按下 F6 鍵插入關鍵影格, 然後從元件庫元件庫面板將 girl1 圖像元件拉曳到舞台正中央 (位於 X：206.8、Y：56.8)：28女孩吃糖動畫女孩吃糖動畫29女孩吃糖動畫女孩吃糖動畫接著將影格影格 30、35、40、45 設成空白關鍵影格, 然後分別放入 girl2、girl3、girl2、girl3 圖像元件, 製造女孩吃糖的動作 (注意！女孩出現的位置要保持一樣)。最後再將影格延伸到第 55 格：30女孩吃糖動畫女孩吃糖動畫31加入轉場特效加入轉場特效 接著要套用轉場時間軸特效。請利用 ch16-learn3

10、.fla 如下操作。1. 首先將吃糖果吃糖果圖層的影格影格 45 複製到變變髮中髮中圖層的影格影格 56：32加入轉場特效加入轉場特效33加入轉場特效加入轉場特效2. 選取變髮中變髮中圖層的影格影格 56, 執行插插入入/時間軸特效時間軸特效/變形變形/轉場轉場/轉場轉場命令, 開啟轉場轉場交談窗做如下設定：34加入轉場特效加入轉場特效35加入轉場特效加入轉場特效3. 原本的變髮中變髮中圖層這時會根據上面的設定, 加入一段長度為 30 影格的轉場轉場動畫, 並自動更名為轉場轉場 2：36加入轉場特效加入轉場特效37加入轉場特效加入轉場特效4. 接著比照相同的方法, 另外新增一個變變髮後髮後圖層

11、, 然後在影格影格 86 插入關鍵影格並放入 girl4 圖像元件 (X：150、Y：16), 再執行插入插入/時間軸特效時間軸特效/變形變形/轉場轉場/轉場轉場命令, 開啟轉場轉場交談窗做屬性設定 (跟不上的讀者可直接打開 ch16-learn4.fla 來執行轉場轉場命令)：38加入轉場特效加入轉場特效39加入轉場特效加入轉場特效最後按下交談窗的確定確定鈕就完成女孩變髮的動畫了：4016-5 文字爆破特效文字爆破特效接著要帶出此段廣告的文字標語 Magic Candy change your hairstyle!, 然後使用爆破爆破時間軸特效 (Explode) 製做文字爆破效果。41加入

12、爆破特效加入爆破特效請開啟練習檔 16-learn5.fla, 檔案中我們已經將上一節的轉場轉場 3 圖層延長為135 個影格, 讓變髮後的女孩多停留在畫面上幾秒。另外還加入了哇哇 wow 圖層, 放入逐字出現的 wow 文字, 你可自己研究看看。言歸正傳, 我們來看看怎麼製作爆破文字吧！42加入爆破特效加入爆破特效使用文字工具文字工具鈕在舞台中輸入 Magic Candy change your hairstyle!, 並應用屬性屬性面板設定文字的字型、大小、色彩：43加入爆破特效加入爆破特效44加入爆破特效加入爆破特效2. 將標語標語圖層的影格影格 160 設成關鍵影格, 讓標語文字延伸到

13、第 160 格。接著選取影格影格 160, 執行插入插入/時間軸特效時間軸特效/特效特效/爆破爆破命令, 開啟爆破爆破交談窗來設定爆破特效的屬性：45加入爆破特效加入爆破特效46加入爆破特效加入爆破特效按下爆破爆破交談窗的確定確定鈕, 即可回到動畫中觀賞文字爆炸效果了 (此時標語標語圖層已自動改名為爆破爆破 4 圖層)：47加入爆破特效加入爆破特效48加入爆破特效加入爆破特效4916-6 圖片速成複製法圖片速成複製法 這段趣味廣告已接近完成, 最後我們再利用複製至格線複製至格線時間軸特效 (Copy to Grid), 替單調的素色背景做點兒美化。請開啟練習檔 16-learn6.fla, 檔

14、案中我們已在爆破爆破 4 圖層的影格影格 135 加入幾個可愛的糖果影片片段, 增加俏皮效果。1. 新增背景背景圖層並搬移到最底層, 然後選取影格影格 1 並如下操作：50圖片速成複製法圖片速成複製法51圖片速成複製法圖片速成複製法2. 選取背景背景圖層的影格影格 1, 執行插入插入/時間軸特效時間軸特效/助理助理/拷貝至格線拷貝至格線命令, 開啟 拷貝至格線拷貝至格線交談窗來設定：52圖片速成複製法圖片速成複製法53圖片速成複製法圖片速成複製法54圖片速成複製法圖片速成複製法這段神奇糖果廣告總算完成了, 期間一共運用了 4 種不同的時間軸特效, 相信經過本範例的磨練後, 你對於時間軸特效已經

15、不再陌生了吧！假如你有興趣想研究這些時間軸特效究竟是怎麼做出來的, 可以雙按元件庫元件庫面板中, 時間軸特效元件名稱前的圖示, 進入該元件的編輯模式下研究。55圖片速成複製法圖片速成複製法5616-7 延伸學習延伸學習- 詩中有畫詩中有畫 畫中畫中有詩有詩本範例總共使用了時間軸特效時間軸特效中的散佈散佈副本副本、模糊模糊效果, 製作出靜態的羽毛落水分解動作, 並加入動態的連漪效果, 再搭配上背景及詩詞的結合後, 就完全達到了詩情畫意的效果。請開啟範例檔 16-a01.swf 先來體驗一下詩中有畫, 畫中有詩的意境吧！57延伸學習延伸學習- 詩中有畫詩中有畫 畫中有詩畫中有詩58套用模糊特效製作水波紋動畫套用模糊特效製作水波紋動畫首先來製作水中的波紋效果, 我們已經在舞台中安排好背景, 以及元件庫元件庫中的羽毛羽毛和波紋波紋元件, 請開啟練習檔 16-q01.fla。59套用模糊特效製作水波紋動