第四課 逐幀動(dòng)畫

從本單元起，我們將逐漸給大家介紹Flash8.0中的五種常見的動(dòng)畫形式：逐幀動(dòng)畫、形狀補(bǔ)間動(dòng)畫、動(dòng)作補(bǔ)間動(dòng)畫、遮罩動(dòng)畫、引導(dǎo)線動(dòng)畫。

本節(jié)著重介紹逐幀動(dòng)畫（FrameBy Frame），這是一種常見的動(dòng)畫手法，它的原理是在“連續(xù)的關(guān)鍵幀”中分解動(dòng)畫動(dòng)作，也就是每一幀中的內(nèi)容不同，連續(xù)播放而成動(dòng)畫。

由于逐幀動(dòng)畫的幀序列內(nèi)容不一樣，不僅增加制作負(fù)擔(dān)而且最終輸出的文件量也很大，但它的優(yōu)勢也很明顯：因?yàn)樗嗨婆c電影播放模式，很適合于表演很細(xì)膩的動(dòng)畫，如3D效果、人物或動(dòng)物急劇轉(zhuǎn)身等等效果。

1．逐幀動(dòng)畫的概念和在時(shí)間幀上的表現(xiàn)形式

在時(shí)間幀上逐幀繪制幀內(nèi)容稱為逐幀動(dòng)畫，由于是一幀一幀的畫，所以逐幀動(dòng)畫具有非常大的靈活性，幾乎可以表現(xiàn)任何想表現(xiàn)的內(nèi)容。

逐幀動(dòng)畫在時(shí)間幀上表現(xiàn)為連續(xù)出現(xiàn)的關(guān)鍵幀，如圖3-2-1所示。

圖 3-2-1 逐幀動(dòng)畫

2．創(chuàng)建逐幀動(dòng)畫的幾種方法

（1）用導(dǎo)入的靜態(tài)圖片建立逐幀動(dòng)畫

用jpg、png等格式的靜態(tài)圖片連續(xù)導(dǎo)入Flash中，就會(huì)建立一段逐幀動(dòng)畫。

（2）繪制矢量逐幀動(dòng)畫

    用鼠標(biāo)或壓感筆在場景中一幀幀的畫出幀內(nèi)容。

（3）文字逐幀動(dòng)畫

    用文字作幀中的元件，實(shí)現(xiàn)文字跳躍、旋轉(zhuǎn)等特效。

（4）導(dǎo)入序列圖像

可以導(dǎo)入gif序列圖像、swf動(dòng)畫文件或者利用第3方軟件（如swish、swift 3D等）產(chǎn)生的動(dòng)畫序列。

3．繪圖紙功能

（1）繪畫紙的功能

    繪畫紙是一個(gè)幫助定位和編輯動(dòng)畫的輔助功能，這個(gè)功能對(duì)制作逐幀動(dòng)畫特別有用。通常情況下，Flash 在舞臺(tái)中一次只能顯示動(dòng)畫序列的單個(gè)幀。使用繪畫紙功能后，你就可以在舞臺(tái)中一次查看兩個(gè)或多個(gè)幀了。

如圖3-2-2所示，這是使用繪畫紙功能后的場景，可以看出，當(dāng)前幀中內(nèi)容用全彩色顯示，其它幀內(nèi)容以半透明顯示，它使我們看起來好像所有幀內(nèi)容是畫在一張半透明的繪圖紙上，這些內(nèi)容相互層疊在一起。當(dāng)然，這時(shí)你只能編輯當(dāng)前幀的內(nèi)容。

圖3-2-2 同時(shí)顯示多幀內(nèi)容的變化

（2）繪圖紙各個(gè)按鈕的介紹

1. 
    繪圖紙外觀按鈕 按下此按鈕后，在時(shí)間幀的上方，出現(xiàn)
   
    繪圖紙外觀標(biāo)記。拉動(dòng)外觀標(biāo)記的兩端，可以擴(kuò)大或縮小顯示范圍。
2. 
    繪圖紙外觀輪廓 按下此按鈕后，場景中顯示各幀內(nèi)容的輪廓線，填充色消失，特別適合觀察對(duì)象輪廓，另外可以節(jié)省系統(tǒng)資源，加快顯示過程。3.
3. 
    繪圖紙顯示多幀按鈕，按下后可以顯示全部幀內(nèi)容，并且可以進(jìn)行“多幀同時(shí)編輯”。
4. 
    修改繪圖紙標(biāo)記 按下后，彈出菜單，菜單中有以下選項(xiàng)：

  “總是顯示標(biāo)記”選項(xiàng)會(huì)在時(shí)間軸標(biāo)題中顯示繪圖紙外觀標(biāo)記，無論繪圖紙外觀是否打開。

“錨定繪圖紙外觀標(biāo)記”選項(xiàng)會(huì)將繪圖紙外觀標(biāo)記鎖定在它們?cè)跁r(shí)間軸標(biāo)題中的當(dāng)前位置。通常情況下，繪圖紙外觀范圍是和當(dāng)前幀的指針以及繪圖紙外觀標(biāo)記相關(guān)的。通過錨定繪圖紙外觀標(biāo)記，可以防止它們隨當(dāng)前幀的指針移動(dòng)。

“繪圖紙 2”選項(xiàng)會(huì)在當(dāng)前幀的兩邊顯示兩個(gè)幀。

“繪圖紙 5”選項(xiàng)會(huì)在當(dāng)前幀的兩邊顯示五個(gè)幀。

“繪制全部”選項(xiàng)會(huì)在當(dāng)前幀的兩邊顯示全部幀。

上面，我們?nèi)娼榻B了逐幀動(dòng)畫的特點(diǎn)和創(chuàng)建方法，現(xiàn)在，我們來動(dòng)手制作二個(gè)逐幀動(dòng)畫實(shí)例，以加深對(duì)逐幀動(dòng)畫的認(rèn)識(shí)。

4．奔跑的豹子

   茫茫雪原上，有一只矯健的豹子在奔跑跳躍，這是一個(gè)利用導(dǎo)入連續(xù)位圖而創(chuàng)建的逐幀動(dòng)畫，如圖 3-2-3所示。

圖 3-2-3 奔跑的豹子

1、 創(chuàng)建影片文檔

執(zhí)行【文件】|【新建】命令，在彈出的面板中選擇【常規(guī)】|【Flash文檔】選項(xiàng)后，點(diǎn)擊【確定】按鈕，新建一個(gè)影片文檔，在【屬性】面板上設(shè)置文件大小為400*260象素，【背景色】為白色，如圖 3-2-4所示。

圖 3-2-4 創(chuàng)建新文檔

2、 創(chuàng)建背景圖層

選擇第一幀，執(zhí)行【文件】|【導(dǎo)入到場景】命令，將本實(shí)例中的名為“雪景.bmp”圖片導(dǎo)入到場景中。在第8幀按F5，加過渡幀使幀內(nèi)容延續(xù)。

3、 導(dǎo)入gif動(dòng)畫

新建一層，選擇第一幀，執(zhí)行【文件】|【導(dǎo)入到場景】命令，將本教程中的“奔跑的豹子”系列圖片導(dǎo)入。此時(shí)，會(huì)彈出一個(gè)對(duì)話框，如圖3-2-5所示。

3-2-5 系列圖片導(dǎo)入

選擇【是】按鈕，Flash 會(huì)自動(dòng)把gif中的圖片序列按序以逐幀形式導(dǎo)入場景的左上角，如圖3-2-7所示。

3-2-7  導(dǎo)入的gif動(dòng)畫在場景的上方形成幀幀動(dòng)畫

如圖3-2-8所示是導(dǎo)入后的動(dòng)畫序列，它們被Flash自動(dòng)分配在8個(gè)關(guān)鍵幀中。

圖 3-2-8 導(dǎo)入的8張圖片

4 、調(diào)整對(duì)象位置

此時(shí)，時(shí)間幀區(qū)出現(xiàn)連續(xù)的關(guān)鍵幀，從左向右拉動(dòng)播放頭，就會(huì)看到一頭勇猛的豹子在向前奔跑，但是，被導(dǎo)入的動(dòng)畫序列位置尚未處于我們需要的地方，缺省狀況下，導(dǎo)入的對(duì)象被放在場景坐標(biāo)“0，0”處，我們必須移動(dòng)它們。

你當(dāng)然可以一幀幀調(diào)整位置，完成一幅圖片后記下其坐標(biāo)值，再把其它圖片設(shè)置成相同坐標(biāo)值，如果你有足夠耐性和時(shí)間，也無妨，那么，我們何不試試“多幀編輯”功能呢？

先把“雪景”圖層加鎖，然后按下時(shí)間軸面板下方的【繪圖紙顯示多幀】按鈕

，在彈出的菜單中選擇【顯示全部】選項(xiàng)，如圖3-2-9所示。

圖3-2-9 選擇顯示全部選項(xiàng)

最后執(zhí)行【編輯】|【全選】命令，此時(shí)時(shí)間軸和場景效果如圖3-2-10所示。

圖3-2-10 選取多幀編輯

用鼠標(biāo)左鍵按住場景左上方的豹子拖動(dòng)，就可以一次把8幀中的圖片一次全移動(dòng)到場景中了。

5、 設(shè)置標(biāo)題文字

在場景中新建一個(gè)圖層，單擊工具欄上的文字工具按鈕

圖 3-2-11 字體【屬性】面板參數(shù)設(shè)置

在文本框輸入“奔跑的豹子”五個(gè)字，居中放置。

6、 測試存盤

執(zhí)行【控制】|【測試影片】命令，觀察本例swf文件生成的動(dòng)畫有無問題，如果滿意，執(zhí)行【文件】|【保存】命令，將文件保存成“奔跑的豹子.fla”文件存盤，如果要導(dǎo)出Flash的播放文件，執(zhí)行【導(dǎo)出】|【導(dǎo)出影片】命令保存成“奔跑的豹子.swf”文件