《Flash 8動(dòng)畫制作案例教程》課件第5章

第5章動(dòng)畫制作初步5.1使用幀5.2逐幀動(dòng)畫5.3補(bǔ)間動(dòng)畫5.4時(shí)間軸特效動(dòng)畫疑難解析課堂實(shí)踐疑難解析課外拓展

5.1使用幀

5.1.1幀的類型

在Flash中，根據(jù)幀的內(nèi)容、使用特點(diǎn)，可將幀分為四種類型，即關(guān)鍵幀、空白關(guān)鍵幀、過渡幀和普通幀，各種類型的幀在時(shí)間軸上的顯示如圖5-1所示。(幀的分類詳見1.2節(jié)。)空白關(guān)鍵幀關(guān)鍵幀普通幀過渡幀圖5-1幀的類型 5.1.2幀的操作

1．選擇幀

選擇幀是操作幀的基礎(chǔ)，例如創(chuàng)建幀、復(fù)制幀、移動(dòng)幀時(shí)，都需要先選擇幀。此外，如果要在舞臺(tái)上對(duì)幀上的對(duì)象進(jìn)行編輯修改時(shí)，也需要選擇幀。選擇幀最快捷的操作方法是使用鼠標(biāo)配合鍵盤操作來選擇，選中的幀會(huì)以反黑顯示。

1)選擇單個(gè)幀

在要選擇的幀上單擊，即可選中該幀。

2)選擇不連續(xù)的多個(gè)幀

按住Ctrl鍵，逐個(gè)單擊要選擇的幀，即可選擇多個(gè)幀。

3)選擇連續(xù)的多個(gè)幀

如果要選擇同一個(gè)圖層上的多個(gè)幀，則首先把鼠標(biāo)放在第一個(gè)幀上，然后拖動(dòng)鼠標(biāo)至最后一幀，鼠標(biāo)拖動(dòng)時(shí)所經(jīng)過區(qū)域的幀全部被選中；如果要選擇不同圖層上連續(xù)的多個(gè)幀，則可按住Ctrl鍵，在不同圖層上拖動(dòng)鼠標(biāo)，即可選中不同圖層上的多個(gè)幀。

2．創(chuàng)建幀

1)創(chuàng)建關(guān)鍵幀

關(guān)鍵幀是定義動(dòng)畫劇情有較大變化的幀。要制作動(dòng)畫，必須創(chuàng)建關(guān)鍵幀。創(chuàng)建關(guān)鍵幀的方法是：首先在時(shí)間軸上單擊選擇一個(gè)空幀或是普通幀，然后單擊鼠標(biāo)右鍵，在下拉菜單中選擇“插入關(guān)鍵幀”命令或者按F6功能鍵，即可在該幀處插入一個(gè)關(guān)鍵幀。

如果要?jiǎng)?chuàng)建多個(gè)關(guān)鍵幀，則首先選擇多個(gè)幀，然后按F6功能鍵，選中的幀全部轉(zhuǎn)換為關(guān)鍵幀。

注意：創(chuàng)建關(guān)鍵幀后，上一個(gè)關(guān)鍵幀上的內(nèi)容會(huì)自動(dòng)延續(xù)到新創(chuàng)建的關(guān)鍵幀；如果上一個(gè)關(guān)鍵幀上沒有內(nèi)容，則插入關(guān)鍵幀得到的是空白關(guān)鍵幀。

2)創(chuàng)建空白關(guān)鍵幀

創(chuàng)建關(guān)鍵幀時(shí)，如果要避免上一個(gè)關(guān)鍵幀的內(nèi)容延續(xù)到新創(chuàng)建的關(guān)鍵幀上，可以在上一個(gè)關(guān)鍵幀后創(chuàng)建一個(gè)空白關(guān)鍵幀。創(chuàng)建空白關(guān)鍵幀的方法是：選擇一個(gè)空幀或普通幀，單擊鼠標(biāo)右鍵，執(zhí)行“插入空白關(guān)鍵幀”命令或者按F7功能鍵。

3)創(chuàng)建普通幀

如果要延續(xù)某個(gè)關(guān)鍵幀上的內(nèi)容，例如動(dòng)畫的背景，則可通過在關(guān)鍵幀后創(chuàng)建普通幀來實(shí)現(xiàn)。創(chuàng)建普通幀的方法是：在要?jiǎng)?chuàng)建普通幀的幀上單擊鼠標(biāo)右鍵，執(zhí)行“插入幀”命令或按F5功能鍵。

說明：過渡幀是在動(dòng)畫制作過程中通過設(shè)置補(bǔ)間動(dòng)畫類型自動(dòng)生成的。

3．復(fù)制幀和移動(dòng)幀

1)復(fù)制幀

復(fù)制幀時(shí)，源幀上的所有對(duì)象都會(huì)被復(fù)制到目標(biāo)幀上，且在舞臺(tái)中的位置也相同。復(fù)制幀的操作方法是：選擇要復(fù)制的幀，按住Alt鍵，用鼠標(biāo)把選擇的幀拖到目標(biāo)位置。

2)移動(dòng)幀

移動(dòng)幀后，源幀上的對(duì)象會(huì)被移動(dòng)到目標(biāo)幀上。移動(dòng)幀的操作方法是：選擇要移動(dòng)的幀，用鼠標(biāo)把選擇的幀拖到目標(biāo)位置。

4．刪除幀和清除幀

1)刪除幀

制作動(dòng)畫時(shí)，對(duì)于不需要的幀可以將其刪除。刪除幀的操作方法是：選中要?jiǎng)h除的幀，單擊鼠標(biāo)右鍵，執(zhí)行“刪除幀”命令。

2)清除幀

清除幀是指清除幀中的內(nèi)容，也就是清除幀在舞臺(tái)上的對(duì)象。清除幀的操作方法是：選中要清除的幀，單擊鼠標(biāo)右鍵，執(zhí)行“清除幀”命令。幀的內(nèi)容被清除后，該幀會(huì)自動(dòng)轉(zhuǎn)換為空白關(guān)鍵幀。

5．轉(zhuǎn)換幀的類型

在動(dòng)畫制作中，可以根據(jù)需要轉(zhuǎn)換幀的類型。

1)轉(zhuǎn)換為關(guān)鍵幀

選擇要轉(zhuǎn)換的普通幀或過渡幀，單擊鼠標(biāo)右鍵，執(zhí)行“轉(zhuǎn)換為關(guān)鍵幀”或“轉(zhuǎn)換為空白關(guān)鍵幀”命令，即可將該幀轉(zhuǎn)換為關(guān)鍵幀。

2)關(guān)鍵幀轉(zhuǎn)換為普通幀

選擇要轉(zhuǎn)換的關(guān)鍵幀，單擊鼠標(biāo)右鍵，執(zhí)行“清除關(guān)鍵幀”命令，可以把關(guān)鍵幀或空白關(guān)鍵幀轉(zhuǎn)換為普通幀。

6．翻轉(zhuǎn)幀

翻轉(zhuǎn)幀的作用是調(diào)整幀在時(shí)間軸上的左右順序，從而改變播放順序。在動(dòng)畫制作中，使用“翻轉(zhuǎn)幀”功能可以達(dá)到事半功倍的效果。

案例5-1：跳跳球

案例展示與任務(wù)

打開隨書光盤中“第5章/案例1/5-1.fla”案例文件，完成皮球上下彈跳的動(dòng)畫，如圖5-2所示，實(shí)例最終效果參見隨書光盤中“第5章/案例1/跳跳球.fla”。圖5-2跳跳球制作分析

案例文件已經(jīng)做好皮球落下的效果，只要復(fù)制下落過程這一段動(dòng)畫幀，把它粘貼到下落結(jié)束的幀之后，再把它翻轉(zhuǎn)，即可變?yōu)閺南孪蛏蠌椘鸬膭?dòng)畫。

操作步驟

(1)打開隨書光盤中“第5章/案例5/5-1.fla”案例文件。

(2)在“球”圖層上把鼠標(biāo)從第1幀開始拖到第25幀，選中“球”圖層的第1～25幀，然后按住Alt鍵，把選中的幀拖到第26幀釋放，復(fù)制皮球下落的動(dòng)畫幀。

(3)選中剛才復(fù)制的幀，即第26～50幀，單擊鼠標(biāo)右鍵，執(zhí)行“翻轉(zhuǎn)幀”命令。

(4)在“桌子”圖層的第50幀處單擊，按F5功能鍵插入普通幀，把桌子圖形延伸至第50幀。

(5)按Ctrl+Enter鍵測(cè)試動(dòng)畫效果，可看到皮球不停地上下彈跳。 5.2逐幀動(dòng)畫

5.2.1逐幀動(dòng)畫原理

逐幀動(dòng)畫的每個(gè)幀都是關(guān)鍵幀，必須創(chuàng)建每一個(gè)關(guān)鍵幀上的圖像，然后按一定的時(shí)間順序播放這些關(guān)鍵幀，就產(chǎn)生了動(dòng)畫效果。5.2.2逐幀動(dòng)畫制作

逐幀動(dòng)畫制作時(shí)需要將每個(gè)幀都定義為關(guān)鍵幀，然后給每個(gè)幀創(chuàng)建不同的圖像。一般的做法是，在某一幀前、后插入一個(gè)內(nèi)容完全相同的關(guān)鍵幀，再對(duì)舞臺(tái)中的內(nèi)容按照動(dòng)畫發(fā)展的要求進(jìn)行編輯、修改，使之與相鄰幀中的內(nèi)容有一點(diǎn)變化，如此重復(fù)，直至完成全部動(dòng)畫的幀系列。案例5-2：小和尚敲木魚

案例展示與任務(wù)

使用隨書光盤中“第5章/案例2”文件夾下的圖片素材，制作小和尚敲木魚的動(dòng)畫，如圖5-3所示，實(shí)例最終效果參見隨書光盤中“第5章/案例2/小和尚敲木魚.fla”。

制作分析

利用逐幀動(dòng)畫制作小和尚敲木魚的動(dòng)畫效果，需要4個(gè)關(guān)鍵幀，通過在連續(xù)的幀上繪制小和尚敲木魚的不同形態(tài)來實(shí)現(xiàn)。本例中，已繪制好小和尚敲木魚的3個(gè)狀態(tài)，可以直接導(dǎo)入使用。圖5-3小和尚敲木魚操作步驟

(1)新建文件，命名為“小和尚敲木魚.fla”。

(2)打開“庫”面板，執(zhí)行【文件】→【導(dǎo)入】→【導(dǎo)入到庫】命令，彈出“導(dǎo)入到庫”對(duì)話框，選擇3張素材圖片，然后單擊“打開”按鈕。

(3)把導(dǎo)入的3張素材圖片轉(zhuǎn)換為元件，分別命名為“圖1”、“圖2”、“圖3”。

(4)單擊“圖層1”的第1幀，把“圖1”元件拖到舞臺(tái)上。

(5)單擊第2幀，按F7插入一個(gè)空白關(guān)鍵幀，把“圖2”元件拖到舞臺(tái)上。按同樣的方法在第3幀和第4幀上分別拖入“圖3”和“圖2”元件。

(6)顯示標(biāo)尺，拖出輔助線定位每張圖片的位置，對(duì)齊素材圖片。

(7)按Ctrl+Enter鍵測(cè)試動(dòng)畫效果。

(8)制作完成，保存文件。

5.3補(bǔ)間動(dòng)畫

Flash的特色在于制作補(bǔ)間動(dòng)畫，相對(duì)于逐幀動(dòng)畫來說，補(bǔ)間動(dòng)畫的制作真可謂簡(jiǎn)便快捷，文件的體積也比較小。

5.3.1補(bǔ)間動(dòng)畫原理

補(bǔ)間動(dòng)畫采用一種獨(dú)特的過渡變形技術(shù)，這種過渡變形技術(shù)在動(dòng)畫制作上表現(xiàn)為對(duì)某一段動(dòng)畫只需制作開始和結(jié)束兩個(gè)關(guān)鍵幀的狀態(tài)，中間過渡幀由計(jì)算機(jī)自動(dòng)生成。5.3.2動(dòng)作補(bǔ)間動(dòng)畫與形狀補(bǔ)間動(dòng)畫的區(qū)別

補(bǔ)間動(dòng)畫又分為動(dòng)作補(bǔ)間動(dòng)畫和形狀補(bǔ)間動(dòng)畫，兩種動(dòng)畫在組成元素、功能效果等方面都有很大的區(qū)別。

1．動(dòng)作補(bǔ)間動(dòng)畫

1)功能效果

動(dòng)作補(bǔ)間動(dòng)畫可以完成同一個(gè)對(duì)象位置、大小、旋轉(zhuǎn)、顏色、透明度、亮度等屬性的動(dòng)態(tài)變化，適用性較廣。

2)組成元素

制作動(dòng)作補(bǔ)間動(dòng)畫時(shí)，兩個(gè)關(guān)鍵幀上可以是實(shí)例、文本、群組、圖形對(duì)象、位圖等具有整體屬性的對(duì)象，也就是選中時(shí)周圍會(huì)出現(xiàn)矩形框的對(duì)象，但不能是散的形狀圖形。特別要注意的是，兩個(gè)關(guān)鍵幀上必須是同一個(gè)對(duì)象才能創(chuàng)建動(dòng)作補(bǔ)間動(dòng)畫，且同一圖層上每個(gè)關(guān)鍵幀中只能有一個(gè)對(duì)象。

3)制作方法

在起始關(guān)鍵幀定義一個(gè)對(duì)象的位置、大小、旋轉(zhuǎn)等屬性(如果是實(shí)例，還可以定義顏色、透明度和亮度等屬性)，然后在結(jié)束關(guān)鍵幀中改變這個(gè)對(duì)象的這些屬性，在“屬性”面板中設(shè)置“補(bǔ)間”動(dòng)畫類型為“動(dòng)畫”即可。

4)表現(xiàn)形式

在兩個(gè)關(guān)鍵幀之間創(chuàng)建動(dòng)作補(bǔ)間動(dòng)畫后，兩個(gè)關(guān)鍵幀之間的背景變?yōu)榈仙?，且有一條帶箭頭的直線貫穿兩個(gè)關(guān)鍵幀之間，如圖5-4所示。如果補(bǔ)間動(dòng)畫創(chuàng)建失敗，則直線會(huì)變成虛線，如果5-5所示。圖5-4動(dòng)作補(bǔ)間動(dòng)畫圖5-5創(chuàng)建補(bǔ)間動(dòng)畫失敗

2．形狀補(bǔ)間動(dòng)畫

1)功能效果

形狀補(bǔ)間動(dòng)畫可以完成兩個(gè)形狀圖形位置、形狀、大小、顏色等屬性的相互變化，其強(qiáng)調(diào)的是“形狀”的變化。

2)組成元素

形狀補(bǔ)間動(dòng)畫的組成元素只能是形狀圖形或圖形對(duì)象。如果是實(shí)例、文本、群組等整體屬性的對(duì)象，需要將它們“分離”成散的形狀圖形，也就是選中時(shí)圖形上有虛點(diǎn)覆蓋的對(duì)象。在形狀補(bǔ)間動(dòng)畫中，同一個(gè)圖層上每個(gè)關(guān)鍵幀中可以有若干個(gè)對(duì)象。

3)制作方法

在起始關(guān)鍵幀繪制形狀圖形，然后在結(jié)束關(guān)鍵幀修改這個(gè)圖形或繪制另外的圖形，在“屬性”面板中設(shè)置“補(bǔ)間”動(dòng)畫類型為“形狀”即可。

4)表現(xiàn)形式

在兩個(gè)關(guān)鍵幀之間創(chuàng)建形狀補(bǔ)間動(dòng)畫后，兩個(gè)關(guān)鍵幀之間的背景變?yōu)榈G色，且有一條帶箭頭的直線貫穿兩個(gè)關(guān)鍵幀之間，如圖5-6所示。如果形狀動(dòng)畫創(chuàng)建失敗，則直線會(huì)變成虛線，如圖5-7所示。圖5-6形狀補(bǔ)間動(dòng)畫圖5-7創(chuàng)建形狀動(dòng)畫失敗

5.3.3直線運(yùn)動(dòng)動(dòng)畫

動(dòng)作補(bǔ)間動(dòng)畫根據(jù)其運(yùn)動(dòng)路徑的不同，可以分為直線運(yùn)動(dòng)動(dòng)畫和沿軌跡運(yùn)動(dòng)動(dòng)畫，即引導(dǎo)動(dòng)畫。直線運(yùn)動(dòng)動(dòng)畫是最基本的動(dòng)作補(bǔ)間動(dòng)畫，引導(dǎo)動(dòng)畫的制作方法稍微復(fù)雜一些。

案例5-3：星星兒童玩具城動(dòng)畫系列1

案例展示與任務(wù)

使用隨書光盤中“第5章/案例3”文件夾下的圖片素材，制作星星兒童玩具城廣告動(dòng)畫，如圖5-8所示，實(shí)例最終效果參見隨書光盤中“第5章/案例3/星星兒童玩具城動(dòng)畫系列1.fla”。圖5-8星星兒童玩具城動(dòng)畫系列1制作分析

本例中共需要3個(gè)圖層，一個(gè)用來放廣告背景，一個(gè)用來放玩具車，一個(gè)用來放文字。廣告背景和玩具車素材可以直接導(dǎo)入，并將它們轉(zhuǎn)換為元件使用。另需創(chuàng)建1個(gè)文字影片剪輯元件。本例的重點(diǎn)是制作行駛的玩具車，分兩個(gè)動(dòng)畫片段來完成；文字效果需要使用“濾鏡”面板設(shè)置“模糊”和“投影”效果。操作步驟

(1)新建文件，設(shè)置舞臺(tái)尺寸為1024×768像素，24幀/每秒，命名為“星星兒童玩具城動(dòng)畫系列1.fla”。

(2)打開“庫”面板，執(zhí)行【文件】→【導(dǎo)入】→【導(dǎo)入到庫】命令，把2張素材圖片導(dǎo)入到庫中并轉(zhuǎn)換為元件，分別命名為“廣告背景”和“小車”圖形元件。

(3)創(chuàng)建“文字”影片剪輯元件，輸入文字“星星兒童玩具城”，字號(hào)大小為80。

(4)把“圖層1”重命名為“背景”，再新建2個(gè)圖層，分別命名為“文字”和“車”。

(5)單擊“背景”層的第1幀，把“廣告背景”元件拖到舞臺(tái)上，適當(dāng)調(diào)整其大小，使其與舞臺(tái)匹配。

(6)單擊“車”圖層的第1幀，把“小車”元件拖到工作區(qū)的右邊，打開“變形”面板，把“小車”實(shí)例縮小為20%。

(7)單擊“車”圖層的第42幀，按F6插入關(guān)鍵幀，把“小車”實(shí)例拖到舞臺(tái)的左下角，并放大為40%。

(8)單擊“車”圖層的第68幀，按F6插入關(guān)鍵幀，把“小車”元件拖到舞臺(tái)的右下角。

(9)單擊“車”圖層第1～41幀中的任意一幀，打開“屬性”面板，從“補(bǔ)間”下拉列表中選擇“動(dòng)畫”選項(xiàng)，設(shè)置“緩動(dòng)”參數(shù)為“-70”，即可在第1～42幀之間創(chuàng)建先慢后快的動(dòng)作補(bǔ)間動(dòng)畫，如圖5-9所示。圖5-9創(chuàng)建動(dòng)作補(bǔ)間動(dòng)畫的屬性面板動(dòng)作補(bǔ)間動(dòng)畫“屬性”面板各參數(shù)設(shè)置如下。

①補(bǔ)間：選擇補(bǔ)間動(dòng)畫類型。

②縮放：當(dāng)關(guān)鍵幀上的對(duì)象大小不同時(shí)，勾選此選項(xiàng)，可使對(duì)象在動(dòng)畫中產(chǎn)生縮放效果。

③緩動(dòng)：調(diào)整動(dòng)作補(bǔ)間動(dòng)畫的變化速度。默認(rèn)值為0，表示動(dòng)畫勻速變化；值為負(fù)，表示加速，即先慢后快；值為正，表示減速，即先快后慢；絕對(duì)值越大，變化的強(qiáng)度越大。

④編輯：在制作自定義緩入/緩出動(dòng)畫時(shí)使用。(5.3.5節(jié)中將詳細(xì)介紹自定義緩入/緩出動(dòng)畫。)

⑤旋轉(zhuǎn)：選擇在動(dòng)畫中是否旋轉(zhuǎn)對(duì)象。其中，“無”表示禁止旋轉(zhuǎn)；“自動(dòng)”表示由手工設(shè)置旋轉(zhuǎn)；“順時(shí)針”和“逆時(shí)針”表示按順時(shí)針或逆時(shí)針方向旋轉(zhuǎn)，此時(shí)可輸入旋轉(zhuǎn)次數(shù)。⑥調(diào)整到路徑和對(duì)齊：在制作引導(dǎo)動(dòng)畫時(shí)使用。(5.3.4節(jié)中將詳細(xì)介紹引導(dǎo)動(dòng)畫。)

⑦同步：使圖形元件實(shí)例中的動(dòng)畫和主時(shí)間軸同步。

(10)單擊“車”圖層第43～67幀中的任意一幀，打開“屬性”面板，從“補(bǔ)間”下拉列表中選擇“動(dòng)畫”選項(xiàng)，設(shè)置“緩動(dòng)”參數(shù)為“70”，即可在第43～68幀之間創(chuàng)建先快后慢的動(dòng)作補(bǔ)間動(dòng)畫。

(11)單擊“文字”圖層第1幀，拖入“文字”影片剪輯元件。

(12)選中文字實(shí)例，使用“變形”面板把實(shí)例的寬度放大4倍(400.0%)，高度保持不變(100.0%)，如圖5-10所示。圖5-10放大文字的寬度

(13)選中文字實(shí)例，打開“屬性”面板，設(shè)置實(shí)例的Alpha=0%，如圖5-11所示；打開“濾鏡”面板，為實(shí)例添加30個(gè)像素的“模糊”距離和白色的“投影”效果。圖5-11設(shè)置文字Alpha屬性

(14)單擊“文字”圖層第65幀，按F6插入關(guān)鍵幀，按步驟(12)～(13)的方法恢復(fù)實(shí)例的原始大小，設(shè)置實(shí)例的Alpha=100%，并添加0個(gè)像素的“模糊”距離和白色的“投影”效果。

(15)單擊“文字”圖層第1～64幀中的任意一幀，在“屬性”面板中選擇“動(dòng)畫”補(bǔ)間。

(16)單擊“背景”圖層第120幀，按F5插入普通幀。

(17)按步驟(16)的方法在“車”和“文字”圖層的第120幀插入普通幀。

(18)測(cè)試動(dòng)畫效果，玩具車從右邊進(jìn)場(chǎng)，由小變大，先慢后快到達(dá)舞臺(tái)左邊，然后又先快后慢退回舞臺(tái)右邊；同時(shí)，文字由寬變窄，以淡入方式從模糊到清晰逐漸顯示。

(19)動(dòng)畫制作完成，保存文件。5.3.4引導(dǎo)動(dòng)畫

如果想讓運(yùn)動(dòng)的對(duì)象沿著指定的軌跡運(yùn)動(dòng)，則可以利用引導(dǎo)動(dòng)畫來實(shí)現(xiàn)。制作引導(dǎo)動(dòng)畫至少需要2個(gè)圖層，一個(gè)引導(dǎo)層和一個(gè)被引導(dǎo)層，引導(dǎo)層的圖層圖標(biāo)是，被引導(dǎo)層與普通圖層圖標(biāo)相同，是。引導(dǎo)層上繪制運(yùn)動(dòng)的軌跡，被引導(dǎo)層上創(chuàng)建動(dòng)作補(bǔ)間動(dòng)畫。播放動(dòng)畫時(shí)，引導(dǎo)層上的內(nèi)容不會(huì)被顯示。

制作引導(dǎo)動(dòng)畫要特別注意兩個(gè)問題，一是運(yùn)動(dòng)軌跡必須是一條開啟的路徑，且路徑中間不能有斷點(diǎn)；二是被引導(dǎo)層的起始關(guān)鍵幀和結(jié)束關(guān)鍵幀上的運(yùn)動(dòng)對(duì)象必須吸附在運(yùn)動(dòng)路徑上。

案例5-4：飄飛的蒲公英

案例展示與任務(wù)

使用隨書光盤中“第5章/案例4”文件夾下的圖片素材，制作飄飛的蒲公英，如圖5-12所示，實(shí)例最終效果參見隨書光盤中“第5章/案例4/飄飛的蒲公英.fla”。圖5-12飄飛的蒲公英制作分析

本例中蒲公英的運(yùn)動(dòng)軌跡是一條曲線，可以使用動(dòng)作補(bǔ)間動(dòng)畫中的引導(dǎo)動(dòng)畫來完成。引導(dǎo)層上繪制蒲公英運(yùn)動(dòng)的軌跡線，動(dòng)畫層上創(chuàng)建運(yùn)動(dòng)對(duì)象的動(dòng)作，即蒲公英的動(dòng)作補(bǔ)間動(dòng)畫。

操作步驟

(1)新建文件，命名為“飄飛的蒲公英.fla”。

(2)把“圖層1”的名稱重命名為“背景”，執(zhí)行【文件】→【導(dǎo)入】→【導(dǎo)入到舞臺(tái)】命令，把背景圖片導(dǎo)入到“背景”層第1幀中的舞臺(tái)上。

(3)執(zhí)行【修改】→【文檔】命令，彈出“文檔屬性”對(duì)話框，如圖5-13所示。選擇匹配“內(nèi)容”，使舞臺(tái)大小與背景圖片的尺寸相同，設(shè)置幀頻為24fps。圖5-13“文檔屬性”對(duì)話框

(4)新建“蒲公英”圖層，把蒲公英圖片導(dǎo)入到該層第1幀的舞臺(tái)上，在蒲公英圖片上單擊鼠標(biāo)右鍵，執(zhí)行“轉(zhuǎn)換為元件”命令，創(chuàng)建名為“蒲公英1”圖形元件。

(5)利用“變形”面板將蒲公英實(shí)例縮小為30%，在第150幀處插入關(guān)鍵幀，單擊第

1～149幀中的任意一幀，打開“屬性”面板，創(chuàng)建動(dòng)作補(bǔ)間動(dòng)畫，勾選“對(duì)齊”復(fù)選框，如圖5-14所示。圖5-14“屬性”面板

(6)選中“蒲公英”層為當(dāng)前圖層，單擊時(shí)間軸左邊的“添加運(yùn)動(dòng)引導(dǎo)層”按鈕，新建名為“軌跡”的引導(dǎo)層，并在引導(dǎo)層的第1幀中繪制蒲公英飄飛的軌跡線，如圖5-15所示。

(7)單擊“蒲公英”層第1幀，打開“貼緊至對(duì)象”吸附功能，拖動(dòng)“蒲公英”實(shí)例的中心點(diǎn)(小圓圈)，使其吸附在軌跡線的起始端點(diǎn)，如圖5-16所示。圖5-15時(shí)間軸與運(yùn)動(dòng)軌跡線圖5-16實(shí)例吸附在起始點(diǎn)

(8)單擊“蒲公英”層第150幀，按步驟(7)的方法把“蒲公英”實(shí)例的中心點(diǎn)吸附在軌跡線的結(jié)束端點(diǎn)。

(9)單擊“背景”層的第150幀，按F5功能鍵插入普通幀。

(10)測(cè)試動(dòng)畫效果。

(11)制作完成，保存文件。

默認(rèn)情況下，動(dòng)作補(bǔ)間動(dòng)畫對(duì)象沿著軌跡線運(yùn)動(dòng)時(shí)，對(duì)象本身不會(huì)隨軌跡線的彎曲而發(fā)生方向的改變。如果希望運(yùn)動(dòng)對(duì)象隨著軌跡線的彎曲而改變運(yùn)動(dòng)方向，可以在“屬性”面板中勾選“調(diào)整到路徑”復(fù)選框，如圖5-17所示，實(shí)例效果參見隨書光盤中“第5章/案例4/改變方向效果.fla”。圖5-17引導(dǎo)時(shí)改變運(yùn)動(dòng)方向創(chuàng)建引導(dǎo)層的方法除了使用時(shí)間軸上的“添加運(yùn)動(dòng)引導(dǎo)層”按鈕，還可以在普通圖層上單擊鼠標(biāo)右鍵，執(zhí)行“添加引導(dǎo)層”命令，在該圖層的上方即可創(chuàng)建一個(gè)與其鏈接的引導(dǎo)層。此外，還可以將現(xiàn)有普通圖層轉(zhuǎn)換為引導(dǎo)層，其操作步驟如下：

(1)在需要轉(zhuǎn)換為引導(dǎo)層的普通圖層上單擊鼠標(biāo)右鍵，執(zhí)行“引導(dǎo)層”命令，將該圖層轉(zhuǎn)換為引導(dǎo)層。此時(shí)引導(dǎo)層的圖標(biāo)為，表示引導(dǎo)層與被引導(dǎo)層還沒有建立鏈接關(guān)系。

(2)用鼠標(biāo)把被引導(dǎo)層直接拖到引導(dǎo)層的下方，不要釋放鼠標(biāo)，繼續(xù)向右拖動(dòng)被引導(dǎo)層，釋放鼠標(biāo)后即可建立引導(dǎo)層與被引導(dǎo)層的鏈接關(guān)系。圖5-18“圖層屬性”對(duì)話框5.3.5自定義緩入/緩出動(dòng)畫

在動(dòng)作補(bǔ)間動(dòng)畫制作中，利用Flash8新增的“自定義緩入/緩出”功能，可以實(shí)現(xiàn)一個(gè)動(dòng)畫片段中動(dòng)畫變化的加速或減速，快速制作具有彈性、緩入、緩出的動(dòng)畫效果，其視覺效果非常逼真。案例5-5：彈跳球

案例展示與任務(wù)

使用隨書光盤中“第5章/案例5”文件夾下的圖片素材，制作彈跳球動(dòng)畫，如圖5-19所示，實(shí)例最終效果參見隨書光盤中“第5章/案例5/彈跳球.fla”。圖5-19彈跳球制作分析

本例中需要三個(gè)圖層，一個(gè)臺(tái)面層，一個(gè)陰影層和一個(gè)彈跳球圖層。彈跳球的上下彈跳、陰影的淡入淡出可以通過“自定義緩入/緩出”對(duì)話框中的曲線控制來實(shí)現(xiàn)。

操作步驟

(1)新建文件，命名為“彈跳球.fla”。

(2)把“桌球”圖片素材導(dǎo)入到庫中，并轉(zhuǎn)換為“球”圖形元件。

(3)按效果圖所示創(chuàng)建“臺(tái)面”和“陰影”圖形元件。

(4)從上到下新建名為“球”、“陰影”和“背景”的三個(gè)圖層。

(5)在“臺(tái)面”圖層中引用“臺(tái)面”元件，把臺(tái)面移到舞臺(tái)的下方，調(diào)整其位置和大小。

(6)在“球”圖層的第1幀中創(chuàng)建“球”元件的實(shí)例，把實(shí)例放在舞臺(tái)的正上方，調(diào)整其大小，如圖5-20所示。圖5-20球的起始位置

(7)在“球”圖層的第35幀插入關(guān)鍵幀，并把“球”實(shí)例移到臺(tái)面的中心位置，如圖5-21所示。圖5-21球的結(jié)束位置

(8)創(chuàng)建“球”圖層第1～35幀的動(dòng)作補(bǔ)間動(dòng)畫。在“屬性”面板中單擊“編輯”按鈕，彈出“自定義緩入/緩出”對(duì)話框，如圖5-22所示。a

圖5-22“自定義緩入/緩出”對(duì)話框在該對(duì)話框中，網(wǎng)格內(nèi)的圖形用來控制隨時(shí)間推移動(dòng)畫運(yùn)動(dòng)速度和方向的變化。曲線斜率控制動(dòng)畫的變化速率，曲線斜率的絕對(duì)值越大，動(dòng)畫的變化速率也越大。當(dāng)曲線水平時(shí)，斜率為零，變化速率為零；當(dāng)曲線垂直時(shí)，斜率為1，變化速率最大，一瞬間完成變化。

水平軸表示幀，垂直軸表示變化的百分比。第一個(gè)關(guān)鍵幀表示為0%，最后一個(gè)關(guān)鍵幀表示為100%。例如用圖5-22中的曲線控制對(duì)象運(yùn)動(dòng)的變化速率，控制點(diǎn)a的橫坐標(biāo)為20，縱坐標(biāo)為100%，曲線斜率為1(豎直)，表示對(duì)象運(yùn)動(dòng)到第20幀時(shí)以最快速度到達(dá)運(yùn)動(dòng)的終點(diǎn)。

(9)單擊曲線上水平坐標(biāo)為第13幀處的點(diǎn)，添加第一個(gè)控制點(diǎn)，把添加的控制點(diǎn)向上拖到垂直坐標(biāo)為100%的位置。向右拖動(dòng)控制點(diǎn)的左頂點(diǎn)手柄，直至它觸到控制點(diǎn)；向左拖動(dòng)右頂點(diǎn)手柄，直至它觸到控制點(diǎn)。這時(shí)曲線在控制點(diǎn)處成銳角，如圖5-23所示。

(10)單擊曲線上水平坐標(biāo)為第18幀處的點(diǎn)，添加第二個(gè)控制點(diǎn)，把添加的控制點(diǎn)向下拖到垂直坐標(biāo)為?76%的位置。調(diào)節(jié)頂點(diǎn)手柄，使控制點(diǎn)處的切線與曲線相切，并且每個(gè)手柄與控制點(diǎn)的距離都相等，如圖5-24所示。圖5-23調(diào)整控制點(diǎn)形成銳角圖5-24調(diào)整控制點(diǎn)與曲線相切

(11)單擊曲線上水平坐標(biāo)為第27幀處的點(diǎn)，添加第三個(gè)控制點(diǎn)，把添加的控制點(diǎn)向上拖到垂直坐標(biāo)為100%的位置。按步驟(9)的方法調(diào)節(jié)頂點(diǎn)手柄，使曲線在控制點(diǎn)處形成銳角。

(12)單擊曲線上水平坐標(biāo)為第30幀處的點(diǎn)，添加第四個(gè)控制點(diǎn)，把添加的控制點(diǎn)向下拖到垂直坐標(biāo)為95%的位置。按步驟(10)的方法調(diào)節(jié)頂點(diǎn)手柄，使控制點(diǎn)處的切線與曲線相切。

(13)緩動(dòng)曲線創(chuàng)建完成，曲線圖最終效果如圖5-25所示。圖5-25創(chuàng)建緩動(dòng)曲線

(13)單擊對(duì)話框左下角的“播放”按鈕，在舞臺(tái)上實(shí)時(shí)預(yù)覽動(dòng)畫效果。按Ctrl+C鍵復(fù)制緩動(dòng)曲線，最后單擊“確定”按鈕。

說明：復(fù)制緩動(dòng)曲線，是為了使用它來控制陰影動(dòng)畫的變化效果。

(14)在“陰影”層的第1幀中創(chuàng)建“陰影”元件的實(shí)例，按效果圖所示適當(dāng)調(diào)整其大小和位置。選中“陰影”實(shí)例，在“屬性”面板中設(shè)置實(shí)例的屬性Alpha=0。

(15)在“陰影”層的第35幀中插入關(guān)鍵幀，設(shè)置實(shí)例屬性Alpha=100。創(chuàng)建“陰影”圖層第1～35幀的動(dòng)作補(bǔ)間動(dòng)畫。在“屬性”面板中單擊“編輯”按鈕，彈出“自定義緩入/緩出”對(duì)話框，按Ctrl+V鍵粘貼球運(yùn)動(dòng)的緩動(dòng)曲線。

(16)在三個(gè)圖層的第45幀處分別插入普通幀。

(17)測(cè)試動(dòng)畫效果。

(18)制作完成，保存文件。

提示：在“自定義緩入/緩出”對(duì)話框中，若清除“為所有屬性使用一種設(shè)置”復(fù)選框中的√，則可以在“屬性”下拉列表中選擇為“位置”、“旋轉(zhuǎn)”、“縮放”、“顏色”或“濾鏡”等屬性單獨(dú)自定義緩動(dòng)曲線。5.3.6簡(jiǎn)單形變動(dòng)畫

形狀補(bǔ)間動(dòng)畫強(qiáng)調(diào)的是形變效果，即一個(gè)形狀變成另外一個(gè)形狀，在變化的過程中可以伴隨位置、大小和顏色的變化。一般簡(jiǎn)單的形變很容易實(shí)現(xiàn)，復(fù)雜的形變需要使用形狀提示點(diǎn)來控制形變效果。

案例5-6：圓變五星

案例展示與任務(wù)

制作一個(gè)藍(lán)色的圓變成紅五星的動(dòng)畫，如圖5-26所示，實(shí)例最終效果參見隨書光盤中“第5章/案例6/圓變五星.fla”。圖5-26圓變五星制作分析

本例中有兩個(gè)動(dòng)畫元素，一個(gè)是藍(lán)色的圓，一個(gè)是紅五星。形狀補(bǔ)間動(dòng)畫要求動(dòng)畫元素必須是散的形狀圖形。本例動(dòng)畫較為簡(jiǎn)單，所以直接在舞臺(tái)上使用合并繪制模式繪制圖形。對(duì)于復(fù)雜的動(dòng)畫制作，動(dòng)畫元素最好還是使用元件。將元件用于形狀補(bǔ)間動(dòng)畫時(shí)，只要把它打散分離即可。操作步驟

(1)新建文件，命名為“圓變五星.fla”。

(2)在圖層1的第1幀上繪制一個(gè)無邊框的藍(lán)色正圓，并把它放在舞臺(tái)的左邊。

(3)在圖層1的第60幀處單擊，按F7功能鍵插入一個(gè)空白關(guān)鍵幀，繪制一個(gè)無邊框的紅五星，并把它放在舞臺(tái)的右邊。

(4)在圖層1的第1～59幀之間的任意一幀上單擊，打開“屬性”面板，在“補(bǔ)間”下拉列表中選擇“形狀”，選擇“混合”類型為“分布式”，如圖5-27所示。圖5-27創(chuàng)建形狀補(bǔ)間動(dòng)畫的屬性面板形狀補(bǔ)間動(dòng)畫“屬性”面板參數(shù)比較簡(jiǎn)單，其中“混合”選項(xiàng)有“分布式”和“角形”兩種變形方式。當(dāng)形變的對(duì)象既有直線又有曲線時(shí)，這兩種變形方式才會(huì)產(chǎn)生不同的效果。“分布式”形變過程比較柔和，符合人的預(yù)想；角形更多的體現(xiàn)出堅(jiān)硬和僵直的形變過程，給人的感覺是雜亂無章的。

(5)測(cè)試動(dòng)畫效果。

(6)制作完成，保存文件。5.3.7復(fù)雜形變動(dòng)畫

在復(fù)雜的形狀補(bǔ)間動(dòng)畫中，盡管形變的結(jié)果就是最后指定的形狀，但形變的過程卻往往毫無章法，不盡人意。使用“形狀提示”可以較好地解決這一問題?！靶螤钐崾尽蓖ㄟ^給在形變開始的圖形和形變結(jié)束的圖形上標(biāo)記一些相互對(duì)應(yīng)的、其位置已被固定的點(diǎn)來控制形變。

案例5-7：熊變豹

案例展示與任務(wù)

制作熊變豹?jiǎng)赢?，如圖5-28所示，實(shí)例最終效果參見隨書光盤中“第5章/案例7/熊變豹.fla”。圖5-28熊變豹制作分析

本例中需要兩個(gè)圖層，一個(gè)用來放背景，一個(gè)用來制作變形動(dòng)畫。首先創(chuàng)建熊和豹的圖形元件，然后把熊放在變形動(dòng)畫的起始關(guān)鍵幀，把豹放在結(jié)束關(guān)鍵幀。把實(shí)例打散分離，創(chuàng)建形狀補(bǔ)間動(dòng)畫。為了得到舒展有序的形變效果，需要添加形狀提示點(diǎn)來控制形變。操作步驟

(1)新建文件，命名為“熊變豹.fla”，設(shè)置舞臺(tái)背景為灰色。

(2)把圖層1重命名為“背景”，再新建一個(gè)圖層，命名為“變形”。

(3)創(chuàng)建“熊”、“豹”和“圓”的圖形元件。

(4)在“背景”圖層的第1幀中引用“圓”元件，把圓實(shí)例放在舞臺(tái)的中心位置，適當(dāng)調(diào)整其大小，在第60幀插入普通幀。

(5)在“變形”圖層的第1幀中引用“熊”元件，把熊實(shí)例放在圓的中心，適當(dāng)調(diào)整其大小，在第10幀插入關(guān)鍵幀；在第50幀插入空白關(guān)鍵幀，引用“豹”元件，調(diào)整其大小和位置，在第60幀插入普通幀。

(6)把“熊”和“豹”實(shí)例打散分離，在“變形”圖層的第10～50幀之間創(chuàng)建形狀補(bǔ)間動(dòng)畫。

(7)測(cè)試動(dòng)畫效果，發(fā)現(xiàn)形變過程并不是預(yù)期的效果。

(8)打開“貼緊至對(duì)象”吸附功能。單擊“變形”圖層的第10幀，執(zhí)行【修改】→【形狀】→【添加形狀提示】命令或按Ctrl+Shift+H鍵，添加形狀提示點(diǎn)a，把提示點(diǎn)a拖到熊的鼻尖上；單擊第50幀，把提示點(diǎn)a也拖到豹的鼻尖上，此時(shí)提示點(diǎn)a會(huì)變成綠色，這表示鉚定了熊上面的a點(diǎn)位置與豹上面的a點(diǎn)位置的對(duì)應(yīng)關(guān)系。

(9)按步驟(8)的方法繼續(xù)添加提示點(diǎn)b和c，形狀提示點(diǎn)的鉚定位置如圖5-29所示。圖5-29添加形狀提示點(diǎn)

(10)測(cè)試動(dòng)畫效果，形變?nèi)〉昧钊藵M意的效果。

(11)制作完成，保存文件。

如果要移除形狀提示點(diǎn)，只要把它拖離圖形，或者執(zhí)行【修改】→【形狀】→【刪除所有提示】命令即可。

注意：Flash允許使用26個(gè)形狀提示點(diǎn)，以字母a～z順序標(biāo)識(shí)，用于識(shí)別起始形狀和結(jié)束形狀中相對(duì)應(yīng)的點(diǎn)。在添加形狀提示點(diǎn)的過程中，提示點(diǎn)的顏色會(huì)發(fā)生變化。起始關(guān)鍵幀上的提示點(diǎn)剛添加時(shí)是紅色，如果提示點(diǎn)正確貼緊在起始關(guān)鍵幀和結(jié)束關(guān)鍵幀上，起始關(guān)鍵幀上的提示點(diǎn)會(huì)變成黃色，結(jié)束關(guān)鍵幀上的提示點(diǎn)會(huì)變成綠色。 5.4時(shí)間軸特效動(dòng)畫

利用Flash提供的時(shí)間軸特效，可以快速創(chuàng)建某些特殊動(dòng)畫效果。時(shí)間軸特效的應(yīng)用對(duì)象可以是形狀圖形、實(shí)例、群組、文本、位圖等。

案例5-8：躍現(xiàn)文字

案例展示與任務(wù)

利用Flash時(shí)間軸特效提供的“變形”特效，制作躍現(xiàn)文字效果，如圖5-30所示，實(shí)例最終效果參見隨書光盤中“第5章/案例8/躍現(xiàn)文字.fla”。圖5-30躍現(xiàn)文字制作分析

本例中需要?jiǎng)?chuàng)建6個(gè)圖層，其中5個(gè)圖層分別放置5個(gè)字母躍現(xiàn)效果的影片剪輯，1個(gè)圖層放置最后的打字效果。字母躍現(xiàn)效果的影片剪輯利用時(shí)間軸“變形”特效制作，打字效果使用逐幀動(dòng)畫完成。為了使字母逐個(gè)躍現(xiàn)，在主場(chǎng)景的時(shí)間軸上需要間隔一定數(shù)量的幀來創(chuàng)建每個(gè)字母影片剪輯的實(shí)例。操作步驟

(1)新建文件，命名為“躍現(xiàn)文字.fla”，設(shè)置舞臺(tái)背景為淡黃色，幀頻為24fps。

(2)創(chuàng)建“F”、“L”、“A”、“S”、“H”五個(gè)字母的圖形元件，并把每個(gè)字母的中心點(diǎn)與元件的注冊(cè)點(diǎn)對(duì)齊重合。

(3)創(chuàng)建名為“F1”的影片剪輯元件。打開“F1”元件編輯窗口，在第1幀中引用“F”元件，把實(shí)例的中心點(diǎn)與元件的注冊(cè)點(diǎn)對(duì)齊重合，并把“F”元件實(shí)例放大400%。

(4)選中“F”元件實(shí)例，執(zhí)行【插入】→【時(shí)間軸特效】→【變形/轉(zhuǎn)換】→【變形】命令，彈出“變形”對(duì)話框，如圖5-31所示。

在對(duì)話框中把“效果持續(xù)時(shí)間”設(shè)為“50”幀，更改X位置為“50”像素?cái)?shù)，“縮放比例”為“20%”，“最終的Alpha”為“0%”。

單擊“更新預(yù)覽”按鈕，預(yù)覽動(dòng)畫效果，滿意后單擊“確定”按鈕，完成時(shí)間軸特效動(dòng)畫的制作。圖5-31“變形”對(duì)話框

(5)按步驟(3)～(4)的方法創(chuàng)建其他字母躍現(xiàn)的影片剪輯，分別命名為“L1”、“A1”、“S1”和“H1”。

(6)創(chuàng)建名為“FLASH”的影片剪輯元件。打開“FLASH”元件編輯窗口，在第1幀中輸入文本“FLASH”，把文本的中心點(diǎn)與元件的注冊(cè)點(diǎn)對(duì)齊重合。在第4幀插入關(guān)鍵幀，把該幀舞臺(tái)上“FLASH”中的最后一個(gè)字母“H”清除。按同樣的方法，在第7幀、第10幀、第13幀插入關(guān)鍵幀，并把這些幀中的最后一個(gè)字母清除，在第15幀中插入普通幀。

(7)選中第1～15幀，單擊鼠標(biāo)右鍵，執(zhí)行“翻轉(zhuǎn)幀”命令，在第40幀上插入普通幀。按Enter鍵預(yù)覽打字效果。

(8)單擊時(shí)間軸上的“場(chǎng)景”按鈕，返回主時(shí)間軸。創(chuàng)建6個(gè)圖層，從上到下依次命名為“FLASH”、“H”、“S”、“A”、“L”和“F”。

(9)打開“標(biāo)尺”，在X坐標(biāo)為120、200、280、360、440的位置分別拉出5根垂直輔助線，在Y坐標(biāo)為200的位置拉出1根水平輔助線。

(10)在“F”層的第1幀引用“F1”影片剪輯元件，并把元件實(shí)例的注冊(cè)點(diǎn)與輔助線左邊的第一個(gè)交叉點(diǎn)對(duì)齊重合，如圖5-32所示。圖5-32使用輔助線

(11)按步驟(10)的方法在“L”層的第15幀、“A”層的第30幀、“S”層的第45幀、“H”層的第60幀上分別引用“L1”“A1”“S1”和“H1”影片剪輯元件，并把元件實(shí)例的注冊(cè)點(diǎn)與輔助線左邊的第2、3、4、5個(gè)交叉點(diǎn)對(duì)齊重合。

(12)在“F”層的第49幀，“L”層的第64幀、“A”層的第79幀、“S”層的第94幀、“H”層的第109幀上插入普通幀。

(13)在“FLASH”層的第115幀上引用“FLASH”影片剪輯元件，并把元件的注冊(cè)點(diǎn)與輔助線的第3個(gè)交叉點(diǎn)重合。在第154幀上插入普通幀。動(dòng)畫最終的時(shí)間軸布局如圖5-33所示。圖5?33動(dòng)畫的時(shí)間軸布局

(14)測(cè)試動(dòng)畫效果。

(15)制作完成，保存文件。

如果要編輯時(shí)間軸特效，則可以在舞臺(tái)上選擇應(yīng)用時(shí)間軸特效的動(dòng)畫對(duì)象，執(zhí)行【修改】→【時(shí)間軸特效】→【編輯特效】命令，此時(shí)會(huì)打開特效對(duì)話框，重新設(shè)置相關(guān)參數(shù)即可。如果要?jiǎng)h除特效，則執(zhí)行【修改】→【時(shí)間軸特效】→【刪除特效】命令即可。

課堂實(shí)踐

(1)使用逐幀動(dòng)畫制作跳動(dòng)的愛心，如圖5-34所示，實(shí)例最終效果參見隨書光盤中“第5章/案例9/愛心.fla”。圖5-34愛心

(2)使用隨書光盤中“第5章/案例10”文件夾下提供的素材，使用動(dòng)作補(bǔ)間動(dòng)畫制作星星兒童玩具城動(dòng)畫，如圖5-35所示，實(shí)例最終效果參見隨書光盤中“第5章/案例10/星星兒童玩具城廣告動(dòng)畫系列2.fla”。圖5-35星星兒童玩具城動(dòng)畫系列2

(3)使用形狀補(bǔ)間動(dòng)畫制作兔變?nèi)藙?dòng)畫，如圖5-36所示。制作過程中注意使用形狀提示點(diǎn)使動(dòng)畫形變更舒展，實(shí)例最終效果參見隨書光盤中“第