二維動(dòng)畫(huà)設(shè)計(jì)與制作 作者 鄧文達(dá) 第7章 Flash動(dòng)畫(huà)制作與案例

第7章Flash動(dòng)畫(huà)制作與案例7.1Flash的動(dòng)畫(huà)類(lèi)型7.2創(chuàng)建逐幀動(dòng)畫(huà)7.3創(chuàng)建補(bǔ)間動(dòng)畫(huà)7.4創(chuàng)建補(bǔ)間形狀7.5創(chuàng)建沿路徑運(yùn)動(dòng)的動(dòng)畫(huà)7.6英雄救美——傳統(tǒng)動(dòng)畫(huà)技法的運(yùn)用7.7課后思考與練習(xí)在線(xiàn)教務(wù)輔導(dǎo)網(wǎng)：://教材其余課件及動(dòng)畫(huà)素材請(qǐng)查閱在線(xiàn)教務(wù)輔導(dǎo)網(wǎng)QQ:349134187或者直接輸入下面地址：課堂學(xué)習(xí)目標(biāo)●了解Flash的動(dòng)畫(huà)類(lèi)型和特點(diǎn)●了解補(bǔ)間的概念●掌握逐幀動(dòng)畫(huà)的制作方法●掌握補(bǔ)間動(dòng)畫(huà)與補(bǔ)間形狀的制作方法●掌握沿路徑運(yùn)動(dòng)動(dòng)畫(huà)的制作方法●靈活運(yùn)用傳統(tǒng)動(dòng)畫(huà)技法制作Flash動(dòng)畫(huà)7.1Flash的動(dòng)畫(huà)類(lèi)型7.1.1逐幀動(dòng)畫(huà)7.1.2補(bǔ)間動(dòng)畫(huà)7.1.3補(bǔ)間形狀7.1.1逐幀動(dòng)畫(huà)

Flash的逐幀動(dòng)畫(huà)借鑒了傳統(tǒng)動(dòng)畫(huà)的創(chuàng)作技法，采用了給原畫(huà)加中間畫(huà)的畫(huà)法進(jìn)行制作。不過(guò)在Flash中，原畫(huà)與中間畫(huà)經(jīng)常由一個(gè)人來(lái)?yè)?dān)任。圖7-1所示的小兔子轉(zhuǎn)面就是采用逐幀動(dòng)畫(huà)的方式制作的，每一個(gè)關(guān)鍵幀對(duì)應(yīng)于一張不同的圖形元素。圖7-1小兔子轉(zhuǎn)面的逐幀動(dòng)畫(huà)7.1.2補(bǔ)間動(dòng)畫(huà)在創(chuàng)建補(bǔ)間動(dòng)畫(huà)之前，首先要弄明白“補(bǔ)間”是什么？術(shù)語(yǔ)“補(bǔ)間”來(lái)自于傳統(tǒng)動(dòng)畫(huà)領(lǐng)域。高級(jí)動(dòng)畫(huà)師（原畫(huà)人員）負(fù)責(zé)繪制人物的開(kāi)始和結(jié)束姿勢(shì)，即動(dòng)畫(huà)的關(guān)鍵幀。然后初級(jí)動(dòng)畫(huà)師（動(dòng)畫(huà)人員）將加入進(jìn)來(lái)，繪制中間的幀或做中間工作。因此，“補(bǔ)間”是指關(guān)鍵幀之間的平滑過(guò)渡。簡(jiǎn)而言之，所謂補(bǔ)間，就是只需要繪制出開(kāi)始和結(jié)束兩個(gè)幀的內(nèi)容，中間過(guò)渡部分（中間畫(huà)）由電腦自己計(jì)算出來(lái)。補(bǔ)間的開(kāi)始和結(jié)束幀被稱(chēng)為“關(guān)鍵幀”，中間由電腦計(jì)算出的部分稱(chēng)為補(bǔ)間幀，用補(bǔ)間的方式制作的動(dòng)畫(huà)稱(chēng)為補(bǔ)間動(dòng)畫(huà)，如圖7-3所示。開(kāi)始關(guān)鍵幀補(bǔ)間幀結(jié)束關(guān)鍵幀圖7-3小女孩淡入的補(bǔ)間動(dòng)畫(huà)7.1.3補(bǔ)間形狀補(bǔ)間形狀是“形狀”之間的切換動(dòng)畫(huà)，即從一個(gè)“形狀”逐漸過(guò)渡到別一個(gè)“形狀”。

在形狀補(bǔ)間中，可在時(shí)間軸中的特定幀繪制一個(gè)形狀，然后更改該形狀或在另一個(gè)特定幀繪制另一個(gè)形狀。然后，F(xiàn)lash將內(nèi)插中間幀的中間形狀，創(chuàng)建一個(gè)形狀變形為另一個(gè)形狀的動(dòng)畫(huà)，如圖7-6所示。

補(bǔ)間幀中的內(nèi)容是依靠?jī)蓚€(gè)關(guān)鍵幀上的形狀進(jìn)行計(jì)算得到的。圖7-6橢圓變花的補(bǔ)間形狀動(dòng)畫(huà)7.2創(chuàng)建逐幀動(dòng)畫(huà)7.2.1桃花朵朵開(kāi)7.3創(chuàng)建補(bǔ)間動(dòng)畫(huà)7.3.1愛(ài)心樹(shù)7.3.2小鳥(niǎo)飛動(dòng)畫(huà)補(bǔ)間動(dòng)畫(huà)是元件實(shí)例所參與的一種動(dòng)畫(huà)形式，是實(shí)例屬性變化過(guò)渡的一種動(dòng)畫(huà)。動(dòng)畫(huà)補(bǔ)間將補(bǔ)間前、后兩個(gè)關(guān)鍵幀的屬性作為變化參數(shù)，在動(dòng)畫(huà)播放的時(shí)候?qū)崟r(shí)計(jì)算出中間補(bǔ)間幀的實(shí)例屬性并且顯示它。在Flash中，可以對(duì)影片剪輯、圖形和按鈕元件創(chuàng)建補(bǔ)間動(dòng)畫(huà)。可補(bǔ)間的對(duì)象屬性包括位置、大小、旋轉(zhuǎn)、縮放、傾斜、顏色與濾鏡等屬性，如圖7-26、圖7-27所示。圖7-27旋轉(zhuǎn)補(bǔ)間圖7-26位置與大小補(bǔ)間補(bǔ)間動(dòng)畫(huà)除了簡(jiǎn)單的屬性變化外，根據(jù)過(guò)渡要求的不同還存在下列一些特殊的參數(shù)，如圖7-28所示。圖7-28補(bǔ)間動(dòng)畫(huà)的“屬性”面板7.3.1愛(ài)心樹(shù)

7.3.2小鳥(niǎo)飛動(dòng)畫(huà)1．制作小鳥(niǎo)飛的補(bǔ)間動(dòng)畫(huà)2．制作循環(huán)移動(dòng)的背景7.4創(chuàng)建補(bǔ)間形狀簡(jiǎn)單變形控制變形7.4.3橢圓變花圖7-67補(bǔ)間形狀的“屬性”面板補(bǔ)間形狀是“形狀”之間的切換動(dòng)畫(huà)，即從一個(gè)“形狀”逐漸過(guò)渡到別一個(gè)“形狀”。補(bǔ)間形狀和補(bǔ)間動(dòng)畫(huà)有所不同，它涉及到的一些設(shè)定如圖7-67所示。簡(jiǎn)單變形補(bǔ)間形狀用到的元素必須是非成組、非元件的矢量圖形，如果希望有一個(gè)元件的實(shí)例或者成組元素進(jìn)行形狀變形的話(huà)，可以使用分離功能將其轉(zhuǎn)換到非成組的狀態(tài)，即矢量圖形的狀態(tài)，如圖7-68所示。實(shí)例分離前狀態(tài)分離后狀態(tài)文本分離前后狀態(tài)圖7-68使用分離功能將元素轉(zhuǎn)換成矢量圖形控制變形7.4.3橢圓變花7.5創(chuàng)建沿路徑運(yùn)動(dòng)的動(dòng)畫(huà)沿路徑運(yùn)動(dòng)動(dòng)畫(huà)的特點(diǎn)7.5.2飛舞的蝴蝶前面制作的動(dòng)畫(huà)，運(yùn)動(dòng)軌跡比較簡(jiǎn)單，采用設(shè)置關(guān)鍵幀的方法就能完成，如上升的愛(ài)心。但在運(yùn)動(dòng)軌跡比較復(fù)雜的情況下，例如在制作漫天飛花、漂浮的氣泡、飛舞的蝴蝶，或沿圓環(huán)運(yùn)動(dòng)的對(duì)象等，即有一定運(yùn)動(dòng)軌跡的動(dòng)畫(huà)時(shí)，單純依靠設(shè)置關(guān)鍵幀來(lái)實(shí)現(xiàn)，顯然不太現(xiàn)實(shí)的。

在Flash中還有一個(gè)廣泛使用的功能就是引導(dǎo)線(xiàn)。

這個(gè)功能可以設(shè)定實(shí)例按一定的路徑運(yùn)動(dòng)。

那么在制作有一定運(yùn)動(dòng)軌跡的動(dòng)畫(huà)時(shí)，就要采用這個(gè)功能——引導(dǎo)線(xiàn)。沿路徑運(yùn)動(dòng)動(dòng)畫(huà)的特點(diǎn)制作沿路徑運(yùn)動(dòng)的動(dòng)畫(huà)至少要兩層：引導(dǎo)層和被引導(dǎo)層。且引導(dǎo)層必須位于被引導(dǎo)層之上。引導(dǎo)層用來(lái)放置引導(dǎo)線(xiàn)，被引導(dǎo)層用于放置沿路徑運(yùn)動(dòng)的元件實(shí)例，如圖7-76所示，沿路徑飛舞的花瓣。圖7-76引導(dǎo)層和被引導(dǎo)層繪制的引導(dǎo)線(xiàn)必須是開(kāi)放的路徑，即有兩個(gè)端點(diǎn)：開(kāi)始點(diǎn)和結(jié)束點(diǎn)。如果要制作沿環(huán)形運(yùn)動(dòng)的動(dòng)畫(huà)，可以先繪制環(huán)形路徑，再用“橡皮擦工具”在環(huán)形路徑上擦出一個(gè)缺口，如圖7-77所示。圖7-77繪制環(huán)形路徑7.6英雄救美——傳統(tǒng)動(dòng)畫(huà)技法的運(yùn)用7.6.1案例預(yù)覽7.6.2技術(shù)分析7.6.3男主角從天而降7.6.4制作殘影效果傳統(tǒng)動(dòng)畫(huà)技法和運(yùn)動(dòng)規(guī)律在Flash動(dòng)畫(huà)中的應(yīng)用是非常廣泛的。本節(jié)將以FlashMV《桃花朵朵開(kāi)》中一個(gè)經(jīng)典片斷——英雄救美為例，為讀者介紹如何結(jié)合傳統(tǒng)動(dòng)畫(huà)技法制作Flash動(dòng)畫(huà)。7.6.1案例預(yù)覽本案例描述的是這樣一個(gè)情節(jié)：女主角在回家的路上被四只蒙面兔子攔住了去路，危難之時(shí)男主角從天而降，赤手空拳打跑了兔子，救了女主角。7.6.2技術(shù)分析本例重點(diǎn)在于彈性變形和殘影效果的應(yīng)用。其中“男主角從天而降”，這個(gè)動(dòng)作使用了彈性變形進(jìn)行處理；“男主角跳起踢飛一只兔子”，使用了殘影效果，如圖7-89（d）所示。而影片中男主角打跑小兔子的動(dòng)作則是采用逐幀動(dòng)畫(huà)來(lái)實(shí)現(xiàn)的，也就是一個(gè)動(dòng)作一張畫(huà)，中間沒(méi)有補(bǔ)間幀，如圖7-90