FlashCS6中文版基礎(chǔ)教程：第11章 創(chuàng)建逐幀動(dòng)畫(huà)

1我們已經(jīng)知道，幀在Flash動(dòng)畫(huà)中的意義，而Flash中所謂的逐幀動(dòng)畫(huà)跟傳統(tǒng)動(dòng)畫(huà)相似，同樣需要繪制動(dòng)畫(huà)的每一幀。逐幀動(dòng)畫(huà)的每一幀都需要我們單獨(dú)手動(dòng)的創(chuàng)建、操控和處理，可以想象，逐幀動(dòng)畫(huà)的工作量是非常大的，也是最花費(fèi)時(shí)間的動(dòng)畫(huà)類型。但是逐幀動(dòng)畫(huà)給予了對(duì)SWF的所有外觀和感覺(jué)的完全控制，并且在花費(fèi)一些時(shí)間來(lái)學(xué)習(xí)動(dòng)畫(huà)技巧后，大家就可以用它創(chuàng)建一些不錯(cuò)的效果。所以，學(xué)習(xí)逐幀動(dòng)畫(huà)知識(shí)是值得的。第11章創(chuàng)建逐幀動(dòng)畫(huà)211.1認(rèn)識(shí)逐幀動(dòng)畫(huà)插入關(guān)鍵幀的方法如下。(1)單擊一個(gè)圖層名稱使之成為活動(dòng)圖層，然后在該圖層中選擇一個(gè)幀作為開(kāi)始播放動(dòng)畫(huà)的幀，如圖11-1所示。311.1認(rèn)識(shí)逐幀動(dòng)畫(huà)(2)如果該幀還不是關(guān)鍵幀，可以選擇【插入】|【時(shí)間軸】|【關(guān)鍵幀】菜單命令，如圖11-2所示；或直接右擊，在彈出的快捷菜單中選擇【插入關(guān)鍵幀】命令，如圖11-3所示。(4)制作完成后，若要測(cè)試動(dòng)畫(huà)序列，可選擇【控制】|【播放】菜單命令或直接按Enter鍵。411.2人物動(dòng)畫(huà)人物在動(dòng)畫(huà)片中的出鏡率是最高的。一定程度上，人物動(dòng)作的好壞與否，將直接影響整個(gè)動(dòng)畫(huà)的效果。因此，掌握人物動(dòng)作的基本制作規(guī)律是非常必要的。511.2.1Flash人物動(dòng)畫(huà)的制作技巧1.人物走路動(dòng)作的基本規(guī)律(1)人在走路中的基本規(guī)律是：左右兩腳交替向前，為了求得平衡，當(dāng)左腳向前邁步時(shí)左手向后擺動(dòng)；右腳向前邁步時(shí)右手向后擺動(dòng)。(2)人的腳在走路時(shí)應(yīng)遵循以下規(guī)律：腳跟著地——踏平——腳跟抬起——腳尖離開(kāi)懸空運(yùn)動(dòng)——腳跟著地。(3)同樣，人在走路時(shí)，手部也有規(guī)律可循：首先手掌的指頭要放松，做前后擺動(dòng)運(yùn)動(dòng)，當(dāng)手運(yùn)動(dòng)到前方時(shí)腕部會(huì)相應(yīng)地提高，并稍向內(nèi)彎曲。一般情況下走得越慢，步子越小，離地懸空過(guò)程不高，手的前后擺動(dòng)幅度也不會(huì)太大；相反，當(dāng)走得快時(shí)手腳的運(yùn)動(dòng)幅度要相應(yīng)加大，抬的高度也都要略微提高。2.人走路的速度節(jié)奏變化611.2.2人物走路動(dòng)畫(huà)制作了解了人物走路的一般規(guī)律以后，接下來(lái)，我們將通過(guò)逐幀動(dòng)畫(huà)來(lái)完成人物跑步的動(dòng)畫(huà)。其制作方法如下。(1)啟動(dòng)FlashCS6，選擇【文件】|【新建】菜單命令，建立一個(gè)Flash文檔。(2)選擇【文件】|【保存】菜單命令，將文件保存為“人跑步.fla”，如圖11-4所示。(3)選擇【文件】|【導(dǎo)入】|【導(dǎo)入到庫(kù)】菜單命令，打開(kāi)【導(dǎo)入到庫(kù)】對(duì)話框，選擇“背景.jpg”，如圖11-5所示。711.2.2人物走路動(dòng)畫(huà)制作(4)單擊【打開(kāi)】按鈕，圖形被導(dǎo)入到【庫(kù)】面板中，選擇【窗口】|【庫(kù)】命令，打開(kāi)【庫(kù)】面板，通過(guò)鼠標(biāo)拖曳的方式將圖像拖曳到舞臺(tái)中。(5)在圖像外任意一處單擊，打開(kāi)【屬性】檢查器面板(如果【屬性】檢查器面板還沒(méi)有打開(kāi)，可以通過(guò)選擇【窗口】|【屬性】菜單命令，打開(kāi)【屬性】檢查器面板)，如圖11-6所示。(6)單擊【大小】選項(xiàng)后的【編輯文檔屬性】按鈕，出現(xiàn)【文檔設(shè)置】對(duì)話框，設(shè)置圖像的【尺寸】為“1440(寬)×900(高)”像素，如圖11-7所示。單擊【確定】按鈕，可以看到此時(shí)圖像和舞臺(tái)完全整合。811.2.2人物走路動(dòng)畫(huà)制作(7)在【時(shí)間軸】面板的【圖層1】上雙擊，修改圖層名稱為“背景”，如圖11-8所示。(8)單擊【時(shí)間軸】面板左下側(cè)的【新建圖層】按鈕，新建圖層【人物】。(9)選擇【文件】|【導(dǎo)入】|【導(dǎo)入到庫(kù)】菜單命令，打開(kāi)【導(dǎo)入到庫(kù)】對(duì)話框，選擇序列圖片1.png～12.png，如圖11-9所示。(10)將圖片導(dǎo)入到【庫(kù)】中，【庫(kù)】顯示如圖11-10。911.2.2人物走路動(dòng)畫(huà)制作(11)將【背景】圖層延長(zhǎng)至20幀。然后選擇【人物】圖層，選擇第1幀作為逐幀動(dòng)畫(huà)的開(kāi)始幀，右擊，在彈出的快捷菜單中選擇【插入關(guān)鍵幀】命令，或按F6鍵添加關(guān)鍵幀，如圖11-11所示。(12)然后將位圖1拖曳到舞臺(tái)中，并調(diào)整相應(yīng)位置，如圖11-12所示。1011.2.2人物走路動(dòng)畫(huà)制作(13)在當(dāng)前關(guān)鍵幀的下一幀上按以上方法再新建一個(gè)關(guān)鍵幀，可以發(fā)現(xiàn)新建幀的內(nèi)容跟上一幀的內(nèi)容相同，可以在將位圖2拖入舞臺(tái)并調(diào)整好位置后，再將第2幀中的位圖１刪除；或按F7鍵插入空白關(guān)鍵幀，直接將位圖2拖曳到舞臺(tái)中，再調(diào)整其位置。(14)重復(fù)以上兩個(gè)步驟，以完成整個(gè)逐幀動(dòng)畫(huà)的所有變化。如圖11-13所示的圖片是對(duì)應(yīng)的【人物】圖層上的第2幀至第12幀。(15)完成后，按Ctrl+Enter組合鍵，預(yù)覽動(dòng)畫(huà)。1111.3掌握繪圖紙功能下面我們將向大家詳細(xì)講解繪圖紙功能的具體操作方法。(1)在舞臺(tái)上同時(shí)查看動(dòng)畫(huà)的多個(gè)幀。(2)控制繪圖紙外觀的顯示。(3)若要編輯繪圖紙外觀標(biāo)記之間的所有幀。(4)更改繪圖紙外觀標(biāo)記的顯示。1211.4上機(jī)實(shí)踐操作本范例完成文件：\11\逐幀動(dòng)畫(huà).fla、逐幀動(dòng)畫(huà).swf。多媒體教學(xué)路徑：光盤(pán)→多媒體教學(xué)→第11章。1311.4.1實(shí)例介紹和展示本例通過(guò)運(yùn)用【矩形工具】、【橢圓工具】、【鉛筆工具】、【鋼筆工具】、【選擇工具】、【文字工具】、【屬性】面板、【顏色】面板、【聯(lián)合】命令、【轉(zhuǎn)換為元件】命令、【分離】命令以及編輯關(guān)鍵幀等方法制作逐幀動(dòng)畫(huà)效果。動(dòng)畫(huà)效果如圖11-18所示。1411.4.2創(chuàng)建新文檔啟動(dòng)FlashCS6，選擇【文件】|【新建】菜單命令，創(chuàng)建一個(gè)新空白文檔，文檔大小為550300像素。1511.4.3繪制背景(1)繪制漸變背景。(2)繪制背景中的月亮。(3)在【顏色】面板中取消筆觸顏色，設(shè)置填充顏色類型為【徑向漸變】，如圖11-22所示。(4)在【工具】面板中選擇【鉛筆工具】并按住鼠標(biāo)，單擊【工具】面板中的【鉛筆模式】按鈕，在彈出的下拉菜單中，選擇【平滑】命令。在舞臺(tái)上繪制一條曲線作為樹(shù)枝，如圖11-23所示。1611.4.3繪制背景(5)有了樹(shù)枝，接下來(lái)我們繪制樹(shù)葉。在【工具】面板中選擇【矩形工具】，在舞臺(tái)上繪制一個(gè)矩形，取消筆觸顏色，填充顏色類型設(shè)置為【線性漸變】，如圖11-24所示。(6)在【工具】面板中單擊【鋼筆工具】并按住鼠標(biāo)，然后從彈出的快捷菜單中選擇【轉(zhuǎn)換錨點(diǎn)工具】，如圖11-25所示。(7)在舞臺(tái)上將矩形調(diào)整成樹(shù)葉形狀，如圖11-26所示。1711.4.3繪制背景(8)多復(fù)制幾個(gè)并調(diào)整其位置形狀，最終效果如圖11-27所示。(9)下面將這條樹(shù)枝結(jié)成組。分別將【背景】、【月亮】圖層鎖定，全選【樹(shù)枝】、【樹(shù)葉】，選擇【修改】|【合并對(duì)象】|【聯(lián)合】菜單命令，將對(duì)象結(jié)組，并將其復(fù)制三個(gè)，調(diào)整其位置、形狀，最終效果如圖11-28所示。(10)接著繪制草叢。選擇【矩形工具】，然后在打開(kāi)的矩形工具【屬性】檢查器面板中進(jìn)行設(shè)置，如圖11-29所示。1811.4.3繪制背景(11)在【顏色】面板中取消筆觸顏色，填充顏色類型為【線性漸變】，設(shè)置如圖11-30所示。(12)直接在矩形上右擊，彈出如圖11-31所示的快捷菜單，選擇【轉(zhuǎn)換為元件】命令。彈出如圖11-32所示的【轉(zhuǎn)換為元件】對(duì)話框，將其轉(zhuǎn)換為圖形元件，并將其命名為“草1”，單擊【確定】按鈕即可。1911.4.3繪制背景(13)在舞臺(tái)上將矩形調(diào)整為草的形狀，如圖11-33所示。(14)用同樣的制作方法，分別創(chuàng)建圖形元件【草2】、【草3】，分別如圖11-34和圖11-35所示。(15)編輯主場(chǎng)景?？稍谖枧_(tái)上單擊【編輯場(chǎng)景】按鈕，在彈出的下拉菜單中選擇主場(chǎng)景；或者直接在舞臺(tái)上方單擊【場(chǎng)景1】按鈕回到主場(chǎng)景。2011.4.3繪制背景(16)在舞臺(tái)中調(diào)整草叢形狀，如圖11-36所示。至此，整個(gè)背景就繪制完成了。2111.4.4輸入文字(1)單擊時(shí)間軸上的【新建圖層】按鈕，建立一個(gè)新圖層，圖層命名為“文字”。同時(shí)把我們剛才制作裝飾的圖層分別重命名為“背景”、“月亮”、“樹(shù)葉”、“草叢”，以便于我們區(qū)分和編輯。建立好新圖層并修改圖層名稱后，時(shí)間軸如圖11-37所示。(2)單擊【文字】圖層上的第1幀，然后在【工具】面板中選擇【文字工具】，在舞臺(tái)上輸入詩(shī)句：“思鄉(xiāng)夢(mèng)斷夜雨稀，寄情無(wú)月歸無(wú)期?！比∠P觸顏色，填充色為“#ECEC02”，字體“黑體”，字號(hào)為“30”。效果如圖11-38所示。當(dāng)然，大家可以自行決定想要輸入的文字、字體顏色和字體。2211.4.4輸入文字(3)再?gòu)?fù)制一行這個(gè)文字，顏色填充為“#169ED8”。放置在黃色字的下面，露出一點(diǎn)，制造出陰影的效果，選中舞臺(tái)上所有文字，按3次Ctrl+B組合鍵進(jìn)行分離，這時(shí)文字已經(jīng)變成矢量圖了，如圖11-39所示。(4)最后我們將文字進(jìn)行組合。選擇【修改】|【合并對(duì)象】|【聯(lián)合】命令，將文字組合，如圖11-40所示。2311.4.4輸入文字(5)為了方便制作文字部分，我們把除背景圖層以外的其他圖層隱藏，用鼠標(biāo)選中其他圖層，單擊圖層上的【顯示/隱藏所有圖層】按鈕，圖層就隱藏了，舞臺(tái)上就看不到這個(gè)圖層里的內(nèi)容了，如圖11-41所示。(6)按3次Ctrl+B組合鍵進(jìn)行分離，這時(shí)文字已經(jīng)變成矢量圖了，然后將文字進(jìn)行部分組合，如圖11-42所示。2411.4.5設(shè)置多個(gè)圖層(1)選中舞臺(tái)上所有的字塊(它們已是矢量圖，而不是文字)，復(fù)制。隱藏文字圖層。(2)新建圖層，圖層名叫作“思”。選擇【思】圖層，使其處于編輯狀態(tài)，按Ctrl+Shift+V組合鍵，在舞臺(tái)上粘貼剛才復(fù)制的一行字塊，除了“思”字塊保留，其他字塊都刪除，如圖11-43所示。隨即把【思】圖層隱藏。2511.4.5設(shè)置多個(gè)圖層(3)新建圖層，圖層名叫作“鄉(xiāng)”，按Ctrl+Shift+V組合鍵，在舞臺(tái)上再粘貼剛才復(fù)制的一行字塊，保留“鄉(xiāng)”字塊，其他字塊都刪除，如圖11-44所示。隨即隱藏該圖層。(4)用同樣的方法，把詩(shī)句中16個(gè)字分別建立16個(gè)圖層，刪除文字圖層，現(xiàn)在圖層如圖11-45所示。2611.4.6編輯圖層(1)編輯【鄉(xiāng)】圖層。單擊關(guān)鍵幀，此時(shí)關(guān)鍵幀黑色塊顯示，表示此關(guān)鍵幀被選中。單擊鼠標(biāo)按住該關(guān)鍵幀不放，向后拖曳一幀，也就是把這一關(guān)鍵幀放在【思】圖層的關(guān)鍵幀之后(第2幀的位置上)，如圖11-46所示。(2)編輯【夢(mèng)】圖層。單擊關(guān)鍵幀，將此關(guān)鍵幀向后拖曳一幀，把這一關(guān)鍵幀放在【鄉(xiāng)】圖層的關(guān)鍵幀之后(第3幀的位置上)，如圖11-47所示。2711.4.6編輯圖層(3)用同樣的方法，把每一圖層的關(guān)鍵幀都放置在上個(gè)圖層關(guān)鍵幀之后，效果如圖11-48所示。(4)選擇【控制】|【測(cè)試影片】命令，測(cè)試播放