WEB動(dòng)畫(huà)制作與設(shè)計(jì)課件：動(dòng)畫(huà)基礎(chǔ)與逐幀動(dòng)畫(huà)

動(dòng)畫(huà)基礎(chǔ)與逐幀動(dòng)畫(huà)動(dòng)畫(huà)基礎(chǔ)與逐幀動(dòng)畫(huà)動(dòng)畫(huà)基礎(chǔ)與逐幀動(dòng)畫(huà)幀的類型幀的常用操作時(shí)間軸的使用逐幀動(dòng)畫(huà)的制作【課堂學(xué)習(xí)目標(biāo)】【案例學(xué)習(xí)目標(biāo)】使用不同的繪圖工具繪制圖形，使用時(shí)間軸制作動(dòng)畫(huà)?！菊n堂案例】-制作打字效果【案例知識(shí)要點(diǎn)】使用刷子工具繪制光標(biāo)圖形，使用文本工具添加文字，使用翻轉(zhuǎn)幀命令將幀進(jìn)行翻轉(zhuǎn)?！菊n堂案例】-制作打字效果

醫(yī)學(xué)證明，人類具有視覺(jué)暫留的特點(diǎn)，即人眼看到物體或畫(huà)面后，在1／24秒內(nèi)不會(huì)消失。利用這一原理，在一幅畫(huà)沒(méi)有消失之前播放下一幅畫(huà)，就會(huì)給人造成流暢的視覺(jué)變化效果。所以，動(dòng)畫(huà)就是通過(guò)連續(xù)播放一系列靜止畫(huà)面，給視覺(jué)造成連續(xù)變化的效果。

在F1ash中，這一系列單幅的畫(huà)面就叫幀，它是Flash動(dòng)畫(huà)中最小時(shí)間單位里出現(xiàn)的畫(huà)面。每秒鐘顯示的幀數(shù)叫幀率，如果幀率太慢就會(huì)給人造成視覺(jué)上不流暢的感覺(jué)。所以，按照人的視覺(jué)原理，一般將動(dòng)畫(huà)的幀率設(shè)為24幀／秒。一、動(dòng)畫(huà)中幀的概念

在F1ash中，動(dòng)畫(huà)制作的過(guò)程就是決定動(dòng)畫(huà)每一幀顯示什么內(nèi)容的過(guò)程。用戶可以像傳統(tǒng)動(dòng)畫(huà)一樣自己繪制動(dòng)畫(huà)的每一幀，即逐幀動(dòng)畫(huà)。但逐幀動(dòng)畫(huà)所需的工作量非常大，為此，F(xiàn)lash還提供了一種簡(jiǎn)單的動(dòng)畫(huà)制作方法，即采用關(guān)鍵幀處理技術(shù)的插值動(dòng)畫(huà)。插值動(dòng)畫(huà)又分為運(yùn)動(dòng)動(dòng)畫(huà)和變形動(dòng)畫(huà)兩種。一、動(dòng)畫(huà)中幀的概念

制作插值動(dòng)畫(huà)的關(guān)鍵是繪制動(dòng)畫(huà)的起始幀和結(jié)束幀，中間幀的效果由Flash自動(dòng)計(jì)算得出。為此，在Flash中提供了關(guān)鍵幀、過(guò)渡幀、空白關(guān)鍵幀的概念。關(guān)鍵幀描繪動(dòng)畫(huà)的起始幀和結(jié)束幀。當(dāng)動(dòng)畫(huà)內(nèi)容發(fā)生變化時(shí)必須插入關(guān)鍵幀，即使是逐幀動(dòng)畫(huà)也要為每個(gè)畫(huà)面創(chuàng)建關(guān)鍵幀。關(guān)鍵幀有延續(xù)性，開(kāi)始關(guān)鍵幀中的對(duì)象會(huì)延續(xù)到結(jié)束關(guān)鍵幀。過(guò)渡幀是動(dòng)畫(huà)起始、結(jié)束關(guān)鍵幀中間系統(tǒng)自動(dòng)生成的幀。空白關(guān)鍵幀是不包含任何對(duì)象的關(guān)鍵幀。因?yàn)镕lash只支持在關(guān)鍵幀中繪畫(huà)或插入對(duì)象。所以，當(dāng)動(dòng)畫(huà)內(nèi)容發(fā)生變化而又不希望延續(xù)前面關(guān)鍵幀的內(nèi)容時(shí)需要插入空白關(guān)鍵幀。一、動(dòng)畫(huà)中幀的概念【操作步驟及要點(diǎn)提示】一、導(dǎo)入圖形并繪制光標(biāo)圖形1、新建文檔。選擇“文件>導(dǎo)入>導(dǎo)入到庫(kù)”命令，將“素材>制作打字效果>背景”文件導(dǎo)入到“庫(kù)”面板中。2、在“庫(kù)”面板下方單擊“新建元件”按鈕

，在“名稱”選項(xiàng)的文本框中輸入“光標(biāo)”，勾選“圖形”選項(xiàng)，新建圖形元件“光標(biāo)”，如圖所示?！菊n堂案例】-制作打字效果【操作步驟及要點(diǎn)提示】一、導(dǎo)入圖形并繪制光標(biāo)圖形【課堂案例】-制作打字效果【操作步驟及要點(diǎn)提示】一、導(dǎo)入圖形并繪制光標(biāo)圖形3、選擇“刷子”工具，在“屬性”面板中將“平滑度”選項(xiàng)設(shè)為0，舞臺(tái)窗口中繪制一道深紅色（#980000）“光標(biāo)”?！菊n堂案例】-制作打字效果【操作步驟及要點(diǎn)提示】一、導(dǎo)入圖形并繪制光標(biāo)圖形4、

創(chuàng)建“文字動(dòng)”新元件，選擇“影片剪輯”選項(xiàng)?！菊n堂案例】-制作打字效果二、時(shí)間軸面板

“時(shí)間軸”面板由圖層面板和時(shí)間軸組成，如圖所示。眼睛圖標(biāo)

：?jiǎn)螕舸藞D標(biāo)，可以隱藏或顯示圖層中的內(nèi)容。鎖狀圖標(biāo)

：?jiǎn)螕舸藞D標(biāo)，可以鎖定或解鎖圖層。線框圖標(biāo)

：?jiǎn)螕舸藞D標(biāo)，可以將圖層中的內(nèi)容以線框的方式顯示。二、時(shí)間軸面板“插入圖層”按鈕

：用于創(chuàng)建圖層。“插入圖層文件夾”按鈕

：用于創(chuàng)建圖層文件夾?！皠h除圖層”按鈕

：用于刪除無(wú)用的圖層。二、添加文字并制作打字效果1、將“圖層1”重新命名為“文字”，選擇“文本”工具?！皩傩浴保涸O(shè)置文字顏色為深紅色（#9B0000），祝福語(yǔ)文字如圖所示。在“時(shí)間軸”面板中選中第5幀，按F6鍵，在該幀上插入關(guān)鍵幀?！菊n堂案例】-制作打字效果二、添加文字并制作打字效果2、創(chuàng)建新圖層并將其命名為“光標(biāo)”。選中“光標(biāo)”圖層的第5幀，按F6鍵，在該幀上插入關(guān)鍵幀，如左圖所示。圖形元件“光標(biāo)”拖曳到舞臺(tái)窗口中，并調(diào)整其元件大小，如右圖所示。【課堂案例】-制作打字效果二、添加文字并制作打字效果3、選中第5幀，按Ctrl+B鍵，將文字打散，然后光標(biāo)移動(dòng)到祝福語(yǔ)中“兒”字的下方，效果如左圖所示。選中“文字”圖層的第5幀，將光標(biāo)上方的“兒”字刪除，效果如中圖所示。分別選中“文字”圖層和“光標(biāo)”圖層的第9幀，在選中的幀上插入關(guān)鍵幀，如右圖所示?！菊n堂案例】-制作打字效果二、添加文字并制作打字效果4、選中“光標(biāo)”圖層的第9幀，將光標(biāo)平移到祝福語(yǔ)中“女”字的下方，效果如左圖所示。選中“文字”圖層的第9幀，將光標(biāo)上方的“女”字刪除，效果如右圖所示?！菊n堂案例】-制作打字效果二、添加文字并制作打字效果5、

用相同的方法，每間隔4幀插入一個(gè)關(guān)鍵幀，在插入的幀上將光標(biāo)移動(dòng)到前一個(gè)字的下方，并刪除該字，直到刪除完所有的字?！菊n堂案例】-制作打字效果二、添加文字并制作打字效果6、按住Shift鍵的同時(shí)，單擊“文字”圖層和“光標(biāo)”圖層的圖層名稱，并選中所有幀，選擇“修改>時(shí)間軸>翻轉(zhuǎn)幀”命令，對(duì)所有幀進(jìn)行翻轉(zhuǎn)。點(diǎn)擊進(jìn)入“場(chǎng)景1”的舞臺(tái)窗口，將“圖層1”重新命名為“背景圖”。將“庫(kù)”面板中的圖形元件“背景”拖曳到舞臺(tái)窗口中，效果如圖所示?！菊n堂案例】-制作打字效果二、添加文字并制作打字效果7、創(chuàng)建新圖層并將其命名為“打字”，將“庫(kù)”面板中的影片剪輯元件“文字動(dòng)”拖曳到舞臺(tái)窗口中，效果如圖所示。打字效果制作完成，按Ctrl+Enter組合鍵觀看效果?！菊n堂案例】-制作打字效果三、幀的顯示形式

在Flash動(dòng)畫(huà)制作過(guò)程中，幀包括下述多種顯示形式。1、空白關(guān)鍵幀(F5)

在時(shí)間軸中，白色背景帶有黑圈的幀為空白關(guān)鍵幀。表示在當(dāng)前舞臺(tái)中沒(méi)有任何內(nèi)容，如圖所示。三、幀的顯示形式2、關(guān)鍵幀(F6)

在時(shí)間軸中，灰色背景帶有黑點(diǎn)的幀為關(guān)鍵幀。表示在當(dāng)前場(chǎng)景中存在一個(gè)關(guān)鍵幀，在關(guān)鍵幀相對(duì)應(yīng)的舞臺(tái)中存在一些內(nèi)容，如圖所示。三、幀的顯示形式2、關(guān)鍵幀(F6)

在時(shí)間軸中，存在多個(gè)幀。帶有黑色圓點(diǎn)的第1幀為關(guān)鍵幀，最后1幀上面帶有黑的矩形框，為普通幀。除了第1幀以外，其他幀均為普通幀，如圖所示。三、幀的顯示形式3、動(dòng)作補(bǔ)間幀

在時(shí)間軸中，帶有黑色圓點(diǎn)的第1幀和最后1幀為關(guān)鍵幀，中間藍(lán)色背景帶有黑色箭頭的幀為補(bǔ)間幀，如圖所示。三、幀的顯示形式4、形狀補(bǔ)間幀

在時(shí)間軸中，帶有黑色圓點(diǎn)的第1幀和最后1幀為關(guān)鍵幀，中間綠色背景帶有黑色箭頭的幀為形狀補(bǔ)間幀，如圖所示。三、幀的顯示形式4、形狀補(bǔ)間幀

在時(shí)間軸中，帶有黑色圓點(diǎn)的第1幀和最后1幀為關(guān)鍵幀，中間綠色背景帶有黑色箭頭的幀為形狀補(bǔ)間幀，如圖所示?！咎崾尽吭跁r(shí)間軸中，幀上出現(xiàn)虛線，表示是未完成或中斷了的補(bǔ)間動(dòng)畫(huà)，虛線表示不能夠生成補(bǔ)間幀，如圖所示。三、幀的顯示形式5、包含動(dòng)作語(yǔ)句的幀

在時(shí)間軸中，第1幀上出現(xiàn)一個(gè)字母“a”，表示這1幀中包含了使用“動(dòng)作”面板設(shè)置的動(dòng)作語(yǔ)句，如圖所示。三、幀的顯示形式6、幀標(biāo)簽

在時(shí)間軸中，第1幀上出現(xiàn)一只紅旗，表示這一幀的標(biāo)簽類型是幀標(biāo)簽。紅旗右側(cè)的“wo”是幀標(biāo)簽的名稱，如圖所示。四、繪圖紙（洋蔥皮）功能【功能】一般情況下，F(xiàn)lash的舞臺(tái)只能顯示當(dāng)前幀中的對(duì)象。如果希望在舞臺(tái)上出現(xiàn)多幀對(duì)象以幫助當(dāng)前幀對(duì)象的定位和編輯，F(xiàn)lash提供的繪圖紙（洋蔥皮）功能可以將其實(shí)現(xiàn)。四、繪圖紙（洋蔥皮）功能在時(shí)間軸面板下方的按鈕功能如下：“幀居中”按鈕

：?jiǎn)螕舸税粹o，播放頭所在幀會(huì)顯示在時(shí)間軸的中間位置?！袄L圖紙外觀”按鈕

：?jiǎn)螕舸税粹o，時(shí)間軸標(biāo)尺上出現(xiàn)繪圖紙的標(biāo)記顯示，在標(biāo)記范圍內(nèi)的幀上的對(duì)象將同時(shí)顯示在舞臺(tái)中?！袄L圖紙外觀輪廓”按鈕

：?jiǎn)螕舸税粹o，時(shí)間軸標(biāo)尺上出現(xiàn)繪圖紙的標(biāo)記顯示，在標(biāo)記范圍內(nèi)的幀上的對(duì)象將以輪廓線的形式同時(shí)顯示在舞臺(tái)中?！熬庉嫸鄠€(gè)幀”按鈕

：?jiǎn)螕舸税粹o，繪圖紙標(biāo)記范圍內(nèi)的幀上的對(duì)象將同時(shí)顯示在舞臺(tái)中，可以同時(shí)編輯所有的對(duì)象。四、繪圖紙（洋蔥皮）功能在時(shí)間軸面板下方的按鈕功能如下：“修改繪圖紙標(biāo)記”按鈕

：?jiǎn)螕舸税粹o，彈出下拉菜單，如圖所示?！笆冀K顯示標(biāo)記”命令：在時(shí)間軸標(biāo)尺上總是顯示出繪圖紙標(biāo)記?！板^定標(biāo)記”命令：將鎖定繪圖紙標(biāo)記的顯示范圍，移動(dòng)播放頭將不會(huì)改變顯示范圍?！皹?biāo)記范圍2”命令：繪圖紙標(biāo)記顯示范圍為當(dāng)前幀的前2幀開(kāi)始，到當(dāng)前幀的后2幀結(jié)束?！皹?biāo)記范圍5”命令：繪圖紙標(biāo)記顯示范圍為當(dāng)前幀的前5幀開(kāi)始，到當(dāng)前幀的后5幀結(jié)束?！皹?biāo)記整個(gè)范圍”命令：繪圖紙標(biāo)記顯示范圍為時(shí)間軸中的所有幀。五、在時(shí)間軸面板中設(shè)置幀在時(shí)間軸面板中，可以對(duì)幀進(jìn)行一系列的操作。1、插入幀選擇“插入>時(shí)間軸>幀”命令，或按F5鍵，可以在時(shí)間軸上插入一個(gè)普通幀。選擇“插入>時(shí)間軸>關(guān)鍵幀”命令，或按F6鍵，可以在時(shí)間軸上插入一個(gè)關(guān)鍵幀。選擇“插入>時(shí)間軸>空白關(guān)鍵幀”命令，或按F7鍵，可以在時(shí)間軸上插入一個(gè)空白關(guān)鍵幀。五、在時(shí)間軸面板中設(shè)置幀在時(shí)間軸面板中，可以對(duì)幀進(jìn)行一系列的操作。2、選擇幀選擇“編輯>時(shí)間軸>選擇所有幀”命令，選中時(shí)間軸中的所有幀。單擊要選的幀，幀變?yōu)樯钌?。用鼠?biāo)選中要選擇的幀，再向前或向后進(jìn)行拖曳，其間鼠標(biāo)經(jīng)過(guò)的幀全部被選中。按住Ctrl鍵的同時(shí)，用鼠標(biāo)單擊要選擇的幀，可以選擇多個(gè)不連續(xù)的幀。按住Shift鍵的同時(shí)，用鼠標(biāo)單擊要選擇的兩個(gè)幀，這兩個(gè)幀中間的所有幀都被選中。五、在時(shí)間軸面板中設(shè)置幀在時(shí)間軸面板中，可以對(duì)幀進(jìn)行一系列的操作。3、移動(dòng)幀選中一個(gè)或多個(gè)幀，按住鼠標(biāo)，移動(dòng)所選幀到目標(biāo)位置。在移動(dòng)過(guò)程中，如果按住Alt鍵，會(huì)在目標(biāo)位置上復(fù)制出所選的幀。選中一個(gè)或多個(gè)幀，選擇“編輯>時(shí)間軸>剪切幀”命令，或按Ctrl+Alt+X組合鍵，剪切所選的幀；選中目標(biāo)位置，選擇“編輯>時(shí)間軸>粘貼幀”命令，或按Ctrl+Alt+V組合鍵在目標(biāo)位置上粘貼所選的幀。五、在時(shí)間軸面板中設(shè)置幀在時(shí)間軸面板中，可以對(duì)幀進(jìn)行一系列的操作。3、刪除幀

用鼠標(biāo)右鍵單擊要?jiǎng)h除的幀，在彈出的菜單中選擇“清除幀”命令。

選中要?jiǎng)h除的普通幀，按Shift+F5組合鍵刪除幀。選中要?jiǎng)h除的關(guān)鍵幀，按Shift+F6組合鍵，刪除關(guān)鍵幀?！咎崾尽吭贔lash系統(tǒng)默認(rèn)狀態(tài)下，時(shí)間軸面板中每一個(gè)圖層的第1幀都被設(shè)置為關(guān)鍵幀，后面插入的幀將擁有第1幀中的所有內(nèi)容。動(dòng)畫(huà)基礎(chǔ)與逐幀動(dòng)畫(huà)動(dòng)畫(huà)基礎(chǔ)與逐幀動(dòng)畫(huà)動(dòng)畫(huà)基礎(chǔ)與逐幀動(dòng)畫(huà)動(dòng)畫(huà)基礎(chǔ)與逐幀動(dòng)畫(huà)幀的類型幀的常用操作時(shí)間軸的使用逐幀動(dòng)畫(huà)的制作【課堂學(xué)習(xí)目標(biāo)】【案例學(xué)習(xí)目標(biāo)】通過(guò)制作模擬“川劇變臉”動(dòng)畫(huà)掌握逐幀動(dòng)畫(huà)的制作方法?！菊n堂案例】-制作“川劇變臉”效果【案例知識(shí)要點(diǎn)】本例利用從外部導(dǎo)入靜態(tài)圖片和文字工具來(lái)完成“川劇變臉的”逐幀動(dòng)畫(huà)制作?！菊n堂案例】-制作打字效果一、逐幀動(dòng)畫(huà)1、逐幀動(dòng)畫(huà)的特點(diǎn)：

制作類似傳統(tǒng)動(dòng)畫(huà)，每一個(gè)幀都是關(guān)鍵幀，整個(gè)動(dòng)畫(huà)是通過(guò)關(guān)鍵幀的不斷變化產(chǎn)生的，不依靠Flash的運(yùn)算。需要繪制每一個(gè)關(guān)鍵幀中的對(duì)象，每個(gè)幀都是獨(dú)立的，在畫(huà)面之間可以是互不相關(guān)的。一、逐幀動(dòng)畫(huà)2．創(chuàng)建逐幀動(dòng)畫(huà)的方法創(chuàng)建逐幀動(dòng)畫(huà)的典型方法主要有以下3種：（1）從外部導(dǎo)入素材生成逐幀動(dòng)畫(huà)，如導(dǎo)入靜態(tài)的圖片、序列圖像和GIF動(dòng)態(tài)圖片等。（2）使用數(shù)字或者文字制作逐幀動(dòng)畫(huà)，如實(shí)現(xiàn)文字跳躍或旋轉(zhuǎn)等特效動(dòng)畫(huà)。（3）繪制矢量逐幀動(dòng)畫(huà)，利用各種制作工具在場(chǎng)景中繪制連續(xù)變化的矢量圖形，從而形成逐幀動(dòng)畫(huà)。【操作步驟及要點(diǎn)提示】一、制作背景1、新建文檔。設(shè)置文檔“幀頻”為“1”fps，其他文檔屬性使用默認(rèn)參數(shù)。2、將默認(rèn)的“圖層1”重命名為“背景”層，將“素材>背景圖片.png”圖像文件導(dǎo)入到舞臺(tái)，如圖所示?！菊n堂案例】-制作“川劇變臉”效果二、制作變臉動(dòng)畫(huà)1、在“背景”圖層之上新建一個(gè)圖層并重命名為“變臉效果”，然后選中“背景”圖層的第5幀，按F5鍵插入幀，將背景圖像延時(shí)到第5幀。2、選中“變臉效果”圖層的第1幀，將“素材>鮑自安.png”圖像文件導(dǎo)入到舞臺(tái)，并調(diào)整使其相對(duì)舞臺(tái)居中對(duì)齊?！菊n堂案例】-制作“川劇變臉”效果二、制作變臉動(dòng)畫(huà)3、選中“變臉效果”圖層的第2幀，按F7鍵插入一個(gè)空白關(guān)鍵幀，然后將“素材>鼓越．png”圖像文件導(dǎo)入到舞臺(tái)，并調(diào)整使其相對(duì)舞臺(tái)居中對(duì)齊，效果如圖所示。【課堂案例】-制作“川劇變臉”效果二、制作變臉動(dòng)畫(huà)4、同樣的方法分別給“變臉效果”圖層的第3幀、第4幀、第5幀導(dǎo)入圖像“夏侯