多媒體技術(shù)與網(wǎng)頁設(shè)計(jì)第13章Flash基本動(dòng)畫13.2逐幀動(dòng)畫

13.2.1基本概念

將動(dòng)畫中的每一幀都設(shè)置為關(guān)鍵幀，在每一個(gè)關(guān)鍵幀中創(chuàng)建不同的內(nèi)容，就形成了逐幀動(dòng)畫。13.2.2應(yīng)用實(shí)例

例1逐幀文字——打字機(jī)效果。具體操作步驟如下：

(1)新建Flash文檔，修改文檔屬性，背景色為“#00FFFF”，如圖13.2所示。

(2)分別在圖層1的第5、10、15、20、25、30、35、40、45、50、55、60幀處按F6鍵插入關(guān)鍵幀。

(3)使用文本工具，字體為“宋體”，字號(hào)為“52”，顏色為“#FF00FF”，分別在第5、10、15、20、25、30、35、

40、45、50、55、60關(guān)鍵幀處輸入“我”、“們”、“一”、

“起”、“學(xué)”、“習(xí)”、“F”、“l(fā)”、“a”、“s”、“h”、“！”，并排列整齊，如圖13.3所示。圖13.2修改文檔屬性圖13.3輸入文字

(4)在第70幀處按F5鍵將動(dòng)畫延續(xù)10幀，如圖13.4

所示。圖13.4幀設(shè)置

(5)保存并測試影片。

例2逐幀圖像——山水動(dòng)畫。具體操作步驟如下：

(1)新建Flash文檔，設(shè)置文檔屬性，尺寸為460px

×165px。

(2)分別在圖層1的第1幀、第2幀、第3幀和第4幀處插入空白關(guān)鍵幀。

(3)導(dǎo)入數(shù)碼相機(jī)拍攝并處理過的素材圖像“山水01”、“山水02”、“山水03”和“山水04”到庫，如圖13.5所示。圖13.5導(dǎo)入素材

(4)從庫面板中拖入“山水01”到第1幀，拖入“山水02”到第2幀，拖入“山水03”到第3幀，拖入“山水04”到第4幀，分別在屬性面板上圖形的位置設(shè)置為X(0.0)、Y(0.0)，如圖13.6所示。圖13.6在屬性面板中設(shè)置X、Y位置(5)保存并測試影片，如圖13.7所示。圖13.7影片測試13.3形狀補(bǔ)間動(dòng)畫

13.3.1基本概念

動(dòng)畫制作者只需考慮動(dòng)畫的初始狀態(tài)和結(jié)束狀態(tài)，中間變化過程由計(jì)算機(jī)補(bǔ)充的動(dòng)畫稱為補(bǔ)間動(dòng)畫。

當(dāng)動(dòng)畫中需要改變圖形的形狀時(shí)，可以使用形狀補(bǔ)間動(dòng)畫。形狀補(bǔ)間動(dòng)畫可以產(chǎn)生形狀、位置、尺寸、色彩

變化等多種動(dòng)畫，它只可進(jìn)行直線運(yùn)動(dòng)，只針對打散的

圖形。制作形狀補(bǔ)間動(dòng)畫時(shí)，在動(dòng)畫初始位置的關(guān)鍵幀處設(shè)置對象的初始狀態(tài)，在動(dòng)畫結(jié)尾位置的關(guān)鍵幀處設(shè)置對象的結(jié)束狀態(tài)，選擇兩個(gè)關(guān)鍵幀中間的任何一幀，在屬性面板的“補(bǔ)間”選項(xiàng)中選取“形狀”選項(xiàng)，時(shí)間軸上的兩個(gè)關(guān)鍵幀之間的區(qū)域變成綠色的同時(shí)會(huì)出現(xiàn)一個(gè)由初始關(guān)鍵幀指向結(jié)尾關(guān)鍵幀的箭頭，形狀補(bǔ)間動(dòng)畫即設(shè)置成功。13.3.2應(yīng)用實(shí)例

例1圖形形狀顏色漸變。具體操作步驟如下：

(1)新建Flash文檔。

(2)分別在第1、20、40、60幀處插入關(guān)鍵幀。

(3)使用“多角星形工具”、“矩形工具”和“橢圓工具”

分別在第1、20、40和60幀處繪制綠色三角形、藍(lán)色正方形、粉紅色六邊形、紅色圓形。(4)在屬性面板中為第1～20幀、20～40幀、40～60幀設(shè)置形狀補(bǔ)間動(dòng)畫，如圖13.8所示。圖13.8設(shè)置形狀補(bǔ)間動(dòng)畫(5)在第70幀處插入幀做延續(xù)。

(6)保存并測試影片，如圖13.9所示。圖13.9影片測試?yán)?文字形狀顏色漸變。具體操作步驟如下：

(1)新建Flash文檔，設(shè)置文檔屬性，尺寸為400px

×400px。

(2)在第1、20、40、60幀處插入空白關(guān)鍵幀。

(3)使用“文本工具”，字體為“楷體”，字號(hào)為“200”，分別在第1、20、40、60幀舞臺(tái)中心位置輸入綠色“萬”、藍(lán)色“事”、黃色“如”、紅色“意”字。

(4)分別選中輸入的文字，在鍵盤上按Ctrl+B鍵打散文字。

(5)在屬性面板中為第1～20幀、20～40幀、40～60幀設(shè)置形狀補(bǔ)間動(dòng)畫。

(6)在第70幀處插入幀做延續(xù)。

(7)保存并測試影片，如圖13.10所示。圖13.10影片測試13.4動(dòng)作補(bǔ)間動(dòng)畫

13.4.1基本概念

當(dāng)動(dòng)畫中需要改變圖形的運(yùn)動(dòng)路徑時(shí)，可以選擇使用動(dòng)作補(bǔ)間動(dòng)畫。動(dòng)作補(bǔ)間動(dòng)畫還可以改變矢量圖形的顏

色、大小、透明度、旋轉(zhuǎn)角度和運(yùn)動(dòng)速率，它只對單一整體的組件起作用。制作動(dòng)作補(bǔ)間動(dòng)畫時(shí)，在起始關(guān)鍵幀上創(chuàng)建或選擇一個(gè)對象(或元件)，在結(jié)尾關(guān)鍵幀上將舞臺(tái)上的對象(或元件)移動(dòng)到一個(gè)新位置，還可以對其進(jìn)行旋轉(zhuǎn)、縮放等操作；接下來在兩個(gè)關(guān)鍵幀中間的任意幀上單擊鼠標(biāo)右鍵并選擇“創(chuàng)建補(bǔ)間動(dòng)畫”命令或者在屬性面板的“補(bǔ)間”選項(xiàng)中選擇“動(dòng)畫”選項(xiàng)，這時(shí)時(shí)間軸上兩個(gè)關(guān)鍵幀之間的區(qū)域變成紫色，同時(shí)出現(xiàn)一個(gè)由初始幀指向結(jié)尾幀的箭頭，補(bǔ)間動(dòng)畫即設(shè)置成功。13.4.2應(yīng)用實(shí)例

例1運(yùn)動(dòng)的足球。具體操作步驟如下：

(1)新建Flash文檔。

(2)從網(wǎng)上下載一副足球圖片，使用Photoshop軟件將其背景色處理成透明的，保存成png格式，在Flash軟件中導(dǎo)入到庫。

(3)從庫面板中拖入足球圖片放置在圖層1第1幀的舞臺(tái)左側(cè)外，調(diào)整好大小，如圖13.11所示。圖13.11第1幀足球位置(4)在第60幀處插入關(guān)鍵幀，將足球圖片拖動(dòng)到舞臺(tái)右側(cè)，如圖13.12所示。圖13.12第60幀足球位置

(5)在第1～60幀間的任一靜止幀上單擊鼠標(biāo)，在屬性面板中設(shè)置補(bǔ)間動(dòng)畫，順時(shí)針旋轉(zhuǎn)3圈，緩動(dòng)值設(shè)為100

(緩動(dòng)值設(shè)置為正值表示由快到慢，設(shè)置為負(fù)值表示由慢到快)，如圖13.13所示。圖13.13屬性面板設(shè)置圖13.13屬性面板設(shè)置

(6)保存并測試影片。

例2游泳的魚。具體操作步驟如下：

(1)新建Flash文檔，設(shè)置文檔屬性，尺寸為600px

×425px。

(2)導(dǎo)入繪制好的動(dòng)畫背景和魚類素材到庫，如圖13.14所示。圖13.14導(dǎo)入繪制的背景及魚類素材

(3)新建“海豚”影片剪輯元件，分別在第1、2、3幀處插入關(guān)鍵幀，從庫面板中拖入“魚01”放置在第1幀、“魚02”放置在第2幀、“魚03”放置在第3幀，大小均設(shè)為200px

×100px，位置均設(shè)為X(-80.0)、Y(-50.0)，如圖13.15和圖13.16所示。圖13.15創(chuàng)建“海豚”影片剪輯元件圖13.16尺寸及位置設(shè)置

(4)單擊工具欄中的“場景1”按鈕，返回主場景。

(5)從庫面板中拖入“小魚動(dòng)畫背景”圖，位置設(shè)為X(0.0)、Y(0.0)，在第96幀處插入幀做延續(xù)，鎖定圖層1作為動(dòng)畫背景。

(6)新建圖層2，在第1幀舞臺(tái)的右側(cè)外放入“海豚”元

件，并調(diào)整方向及位置(如圖13.17所示)，在第20幀處插入關(guān)鍵幀，將“海豚”元件拖動(dòng)到舞臺(tái)中央位置(如圖13.18所示)，在第40幀處插入關(guān)鍵幀，將“海豚”元件拖動(dòng)到舞臺(tái)外左上角的位置(如圖13.19所示)，分別設(shè)置補(bǔ)間動(dòng)畫。圖13.17圖層2第1幀“海豚”元件位置圖13.18圖層2第20幀“海豚”元件位置圖13.19圖層2第40幀“海豚”元件位置

(7)新建圖層3，從庫面板中拖入“魚04”放在第1幀舞

臺(tái)右上角舞臺(tái)外(如圖13.20所示)，在第96幀處插入關(guān)鍵

幀，將“魚04”拖放到舞臺(tái)右下角(如圖13.21所示)，設(shè)置補(bǔ)間動(dòng)畫。圖13.20圖層3第1幀“魚04”位置圖13.21圖層3第96幀“魚04”位置

(8)新建圖層4，在第40幀處插入關(guān)鍵幀，從庫面板中拖入“魚05”，放置在舞臺(tái)右下角外的區(qū)域(如圖13.22所

示)，在第96幀處插入關(guān)鍵幀，拖動(dòng)“魚05”到舞臺(tái)外左上角的位置(如圖13.23所示)，設(shè)置補(bǔ)間動(dòng)畫。圖13.22圖層4第40幀“魚05”元件位置

(9)新建圖層5，在第20幀處插入關(guān)鍵幀，從庫面板中拖入“魚06”放置在舞臺(tái)外左下角處(如圖13.24所示)，在第96幀處插入關(guān)鍵幀，將“魚06”拖動(dòng)到舞臺(tái)右上角外(如圖13.25所示)，設(shè)置補(bǔ)間動(dòng)畫。圖13.23圖層4第96幀“魚05”元件位置圖13.24圖層5第20幀“魚06”元件位置圖13.25圖層5第96幀“魚06”元件位置(10)保存并測試影片，如圖13.26所示。圖13.26影片測試13.5引?導(dǎo)?層?動(dòng)?畫

13.5.1基本概念

引導(dǎo)層動(dòng)畫可以在運(yùn)動(dòng)引導(dǎo)層中繪制對象的運(yùn)動(dòng)路

徑，使對象沿著指定的路徑進(jìn)行運(yùn)動(dòng)。13.5.2操作實(shí)例

例1：跑步的松鼠。具體操作步驟如下：

(1)新建Flash文檔，設(shè)置文檔屬性，尺寸為636px

×400px。

(2)導(dǎo)入繪制好的松鼠動(dòng)畫背景和松鼠素材到庫，如圖13.27所示。圖13.27導(dǎo)入素材

(3)從庫面板中拖入“松鼠動(dòng)畫背景”元件到圖層1的第1幀，?位置設(shè)為X(0.0)、Y(0.0)，并在第50幀處插入幀做延續(xù)，鎖定圖層1。

(4)單擊“插入”菜單下的“新建元件”命令，新建一個(gè)影片剪輯元件，命名為“松鼠”，在第2、3、4幀處插入關(guān)鍵幀，從庫面板中拖入“松鼠01”放在第1幀，“松鼠02”放在第2幀，“松鼠03”放在第3幀，“松鼠02”放在第4幀，位置均為X(0.0)、Y(0.0)。

(5)單擊工具欄中的“場景1”按鈕，返回主場景，新建圖層2，從庫面板中拖入“松鼠”影片剪輯元件并放在舞臺(tái)左側(cè)外，在第50幀處插入關(guān)鍵幀，將“松鼠”元件移動(dòng)到舞臺(tái)右側(cè)外。

(6)添加運(yùn)動(dòng)引導(dǎo)層(如圖13.28所示)，在第1幀使用平滑鉛筆工具繪制松鼠運(yùn)動(dòng)路線，將“松鼠”元件中心調(diào)整到繪制的運(yùn)動(dòng)路線上，在第50幀處插入關(guān)鍵幀，將“松鼠”元件中心調(diào)整到運(yùn)動(dòng)路線上，如圖13.29所示。圖13.28添加運(yùn)動(dòng)引導(dǎo)層圖13.29調(diào)整“松鼠”元件中心到引導(dǎo)線

(7)對圖層2的第1～50幀設(shè)置補(bǔ)間動(dòng)畫。

(8)保存并測試影片，如圖13.30所示。

例2：飛翔的小鳥。具體操作步驟如下：

(1)新建Flash文檔，設(shè)置文檔屬性，尺寸為600px

×400px。

(2)導(dǎo)入繪制好的小鳥動(dòng)畫背景和小鳥素材到庫，如圖13.31所示。圖13.30影片測試圖13.31導(dǎo)入素材

(4)單擊“插入”菜單下的“新建元件”命令，新建一個(gè)影片剪輯元件，命名為“小鳥”，在第2幀處插入關(guān)鍵幀，從庫面板中拖入“小鳥1”放在第1幀，“小鳥2”放在第2幀，位置均為X(0.0)、Y(0.0)。

(5)單擊工具欄中的“場景1”按鈕，返回主場景，新建圖層2，從庫面板中拖入“小鳥”影片剪輯元件并放在舞臺(tái)右側(cè)外，在第60幀處插入關(guān)鍵幀，將“小鳥”元件移動(dòng)到舞臺(tái)右側(cè)。

(6)添加運(yùn)動(dòng)引導(dǎo)層，在第1幀使用平滑鉛筆工具繪制松鼠運(yùn)動(dòng)路線，將“小鳥”元件中心調(diào)整到繪制的運(yùn)動(dòng)路線上，在第60幀處插入關(guān)鍵幀，將“小鳥”元件中心調(diào)整到運(yùn)動(dòng)路線上，對圖層2的第1～60幀設(shè)置補(bǔ)間動(dòng)畫。

(7)在運(yùn)動(dòng)引導(dǎo)層上面新建圖層3，從庫面板中拖入“小鳥”影片剪輯元件并放在舞臺(tái)右側(cè)外，在第60幀處插入關(guān)鍵幀，將“小鳥”元件移動(dòng)到舞臺(tái)右側(cè)。

(8)添加運(yùn)動(dòng)引導(dǎo)層，在第1幀使用平滑鉛筆工具繪制小鳥的飛翔路線，將“小鳥”元件中心調(diào)整到繪制的運(yùn)動(dòng)路線上，在第60幀處插入關(guān)鍵幀，將“小鳥”元件中心調(diào)整到運(yùn)動(dòng)路線上，對圖層3的第1～60幀設(shè)置補(bǔ)間動(dòng)畫，如圖13.32所示。圖13.32添加運(yùn)動(dòng)引導(dǎo)層并設(shè)置小鳥飛翔路徑(9)保存并測試影片，如圖13.33所示。圖13.33影片測試

13.6遮?罩?層?動(dòng)?畫

13.6.1基本概念

遮罩層類似一張鏤空紙，透過鏤空區(qū)域可以看見被遮罩層中的東西。

遮罩層動(dòng)畫包括遮罩層和被遮罩層兩部分，一個(gè)遮罩層可以有多個(gè)被遮罩層。13.6.2應(yīng)用實(shí)例

例1：探照燈效果。具體操作步驟如下：

(1)新建Flash文檔，設(shè)置文檔屬性，背景顏色為黑

色。

(2)用文字工具在舞臺(tái)中輸入豎排文字，楷體、90

號(hào)、黃色(如圖13.34所示)，在第150幀處單擊，插入幀做延續(xù)。圖13.34輸入文字

(3)新建圖層2，在第1幀用橢圓工具填充一個(gè)比文字稍大的紅色圓形，按F8鍵將其轉(zhuǎn)換為影片剪輯，并拖至

第1列文字上端(如圖13.35所示)，再在第30幀處插入關(guān)鍵幀，將圓形拖至第1列文字底端。圖13.35繪制“圓”元件

(4)分別在圖層2的第31、61、91、121幀處插入關(guān)鍵幀，將紅色圓形元件拖動(dòng)到第2、3、4、5列文字頂端，再在第60、90、120、150幀處插入關(guān)鍵幀，將其拖到第2、

3、4、5列文字底端。

(5)分別在圖層2的第1～30、31～60、61～90、91～120、121～150幀處創(chuàng)建補(bǔ)間動(dòng)畫。

(6