搜索
第16章時間軸特效動畫─趣味小廣告2本章提要16-1時間軸特效動畫16-2動畫元件與流程說明16-3製作文字陰影16-4元件轉場特效16-5文字爆破特效16-6圖片速成複製法16-7延伸學習3前言本章的重點在於應用Flash現成的時間軸特效來製作動畫,我們一共會使用到：複製至格線(CopytoGrid)、投影(DropShadow)、爆破(Explode)、與轉場(Transition)4種特效。請先播放範例檔16.swf,觀看製作完成的時間軸特效：4前言516-1時間軸特效動畫時間軸特效(TimelineEffects)提供多達8種特效供你選用,包括：複製至格線(CopytoGrid)、散佈副本(DistributedDuplicate)、模糊(Blur)、投影(DropShadow)、展開(Expand)、爆破(Explode)、轉場(Transform)、變形(Transition)。你只要在交談窗中設定選項和參數,接著Flash就會自動幫你完成時間軸、圖層、與影格的安排,快速獲得不錯的動畫效果。6時間軸特效動畫時間軸特效全部收錄在『插入/時間軸特效』命令之下,您只要先選取欲加上時間軸特效的影格,然後再挑選一種時間軸特效,便會開啟交談窗讓你做相關設定。716-2動畫元件與流程說明元件介紹動畫製作流程重點說明8元件介紹本範例要製作一部神奇糖果小廣告,大意是小女孩吃下神奇糖果後,馬上擁有全新漂亮的髮型,因此我們先準備好最主要的4個女孩圖像元件：9動畫製作流程10重點說明動畫一開始,中央出現陰影文字MagicCandy,並以移動補間動畫讓文字移動至動畫底部。接著使用girl1、girl2、girl3圖像元件,製作西瓜皮髮型女孩吃下糖果的動作。第2階段重點在於轉場特效的應用,先讓變髮前的女孩往下淡出消失,再讓變髮後的摩登女孩往上淡入顯現,營造人物變身的效果。11重點說明12重點說明第3階段要應用爆破特效製作文字向上左右炸開的驚奇效果。而為了讓畫面更具有動感,還會加入糖果影片片段做為裝飾之用。最後影格總數確認了,再利用拷貝至格線特效,讓簡單的圖形快速佈滿整個舞台,幫動畫的背景美化一番。1316-3製作文字陰影設定文件屬性加入文字陰影建立文字移動補間動畫14設定文件屬性本範例之文件屬性如右圖所示,你可執行『修改/文件』命令,開啟文件屬性交談窗來做設定：15加入文字陰影請開啟練習檔16-learn.fla,我們要運用投影時間軸特效(DropShadow)來製作文字陰影：1.首先使用文字工具鈕在舞台中建立文字物件：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來參考文字動畫的安排。2716-4元件轉場特效這節要先來一段女孩從口袋拿糖果吃的動畫,接著再應用轉場時間軸特效(Transition),讓變髮前的女孩往下淡出,再讓變髮後的摩登女孩往上淡入,製造人物變身的效果。28女孩吃糖動畫請開啟練習檔16-learn2.fla,裡面已經為你準備好女孩圖像元件供你練習。此外,檔案中我們把投影1圖層延伸至影格55,以便讓MagicCandy文字維持顯示在舞台底部。1.選取吃糖果圖層的影格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如下操作。1.首先將吃糖果圖層的影格45複製到變髮中圖層的影格56：33加入轉場特效34加入轉場特效2.選取變髮中圖層的影格56,執行『插入/時間軸特效/變形/轉場/轉場』命令,開啟轉場交談窗做如下設定：35加入轉場特效36加入轉場特效3.原本的變髮中圖層這時會根據上面的設定,加入一段長度為30影格的轉場動畫,並自動更名為轉場2：37加入轉場特效38加入轉場特效4.接著比照相同的方法,另外新增一個變髮後圖層,然後在影格86插入關鍵影格並放入girl4圖像元件(X：150、Y：16),再執行『插入/時間軸特效/變形/轉場/轉場』命令,開啟轉場交談窗做屬性設定(跟不上的讀者可直接打開ch16-learn4.fla來執行『轉場』命令)：39加入轉場特效40加入轉場特效最後按下交談窗的確定鈕就完成女孩變髮的動畫了：4116-5文字爆破特效接著要帶出此段廣告的文字標語MagicCandychangeyourhairstyle!!,然後使用爆破時間軸特效(Explode)製做文字爆破效果。42加入爆破特效請開啟練習檔16-learn5.fla,檔案中我們已經將上一節的轉場3圖層延長為135個影格,讓變髮後的女孩多停留在畫面上幾秒。另外還加入了哇wow~圖層,放入逐字出現的wow~文字,你可自己研究看看。言歸正傳,我們來看看怎麼製作爆破文字吧！43加入爆破特效使用文字工具鈕在舞台中輸入MagicCandychangeyourhairstyle!!,並應用屬性面板設定文字的字型、大小、色彩：44加入爆破特效45加入爆破特效2.將標語圖層的影格160設成關鍵影格,讓標語文字延伸到第160格。接著選取影格160,執行『插入/時間軸特效/特效/爆破』命令,開啟爆破交談窗來設定爆破特效的屬性：46加入爆破特效47加入爆破特效按下爆破交談窗的確定鈕,即可回到動畫中觀賞文字爆炸效果了(此時標語圖層已自動改名為爆破4圖層)：48加入爆破特效49加入爆破特效5016-6圖片速成複製法這段趣味廣告已接近完成,最後我們再利用複製至格線時間軸特效(CopytoGrid),替單調的素色背景做點兒美化。請開啟練習檔16-learn6.fla,檔案中我們已在爆破4圖層的影格135加入幾個可愛的糖果影片片段,增加俏皮效果。1.新增背景圖層並搬移到最底層,然後選取影格1並如下操作：51圖片速成複製法52圖片速成複製法2.選取背景圖層的影格1,執行『插入/時間軸特效/助理/拷貝至格線』命令,開啟拷貝至格線交談窗來設定：53圖片速成複製法54圖片速成複製法55圖片速成複製法這段神奇糖果廣告總算完成了,期間一共運用了4種不同的時間軸特效,相信經過本範例的磨練後,你對於時間軸特效已經不再陌生了吧！假如你有興趣想研究這些時間軸特效究竟是怎麼做出來的,可以雙按元件庫面板中,時間軸特效元件名稱前的圖示,進入該元件的編輯模式下研究。56圖片速成複製法5716-7延伸學習-詩中有畫~畫中有詩~本範例總共使用了時間軸特效中的散佈副本、模糊效果,製作出靜態的羽毛落水分解動作,並加入動態的連漪效果,再搭配上背景及詩詞的結合後,就完全達到了詩情畫意的效果。請開啟範例檔16-a01.swf先來體驗一下詩中有畫,畫中有詩的意境吧！58延伸學習-詩中有畫~畫中有詩~59套用模糊特效製作水波紋動畫首先來製作水中的波紋效果,我們已經在舞台中安排好背景,以及元件庫中的羽毛和波紋元件,請開啟練習檔16-q01.fla。60套用模糊特效製作水波紋動畫61套用模糊特效製作水波紋動畫62套用散佈副本特效製作羽毛飄落效果接下來製作羽毛飄落水中靜態散佈的連續圖形：63套用散佈副本特效製作羽毛飄落效果64套用散佈副本特效製作羽毛飄落效果完成特效套用後,現在你就可以開啟範例檔16-a01.fla對照設定是否正確,若確定無誤後就可以按下[Ctrl]+[Enter]鍵瀏覽動畫效果。