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

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

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

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

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

制作插值動(dòng)畫的關(guān)鍵是繪制動(dòng)畫的起始幀和結(jié)束幀，中間幀的效果由Flash自動(dòng)計(jì)算得出。為此，在Flash中提供了關(guān)鍵幀、過(guò)渡幀、空白關(guān)鍵幀的概念。關(guān)鍵幀描繪動(dòng)畫的起始幀和結(jié)束幀。當(dāng)動(dòng)畫內(nèi)容發(fā)生變化時(shí)必須插入關(guān)鍵幀，即使是逐幀動(dòng)畫也要為每個(gè)畫面創(chuàng)建關(guān)鍵幀。關(guān)鍵幀有延續(xù)性，開始關(guān)鍵幀中的對(duì)象會(huì)延續(xù)到結(jié)束關(guān)鍵幀。過(guò)渡幀是動(dòng)畫起始、結(jié)束關(guān)鍵幀中間系統(tǒng)自動(dòng)生成的幀?？瞻钻P(guān)鍵幀是不包含任何對(duì)象的關(guān)鍵幀。因?yàn)镕lash只支持在關(guān)鍵幀中繪畫或插入對(duì)象。所以，當(dāng)動(dòng)畫內(nèi)容發(fā)生變化而又不希望延續(xù)前面關(guān)鍵幀的內(nèi)容時(shí)需要插入空白關(guān)鍵幀。一、動(dòng)畫中幀的概念【操作步驟及要點(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)建圖層?！安迦雸D層文件夾”按鈕

：用于創(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)鍵幀，如右圖所示。【課堂案例】-制作打字效果二、添加文字并制作打字效果4、選中“光標(biāo)”圖層的第9幀，將光標(biāo)平移到祝福語(yǔ)中“女”字的下方，效果如左圖所示。選中“文字”圖層的第9幀，將光標(biāo)上方的“女”字刪除，效果如右圖所示。【課堂案例】-制作打字效果二、添加文字并制作打字效果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組合鍵觀看效果。【課堂案例】-制作打字效果三、幀的顯示形式

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

在時(shí)間軸中，白色背景帶有黑圈的幀為空白關(guān)鍵幀。表示在當(dāng)前舞臺(tá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)畫，虛線表示不能夠生成補(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幀開始，到當(dāng)前幀的后2幀結(jié)束?！皹?biāo)記范圍5”命令：繪圖紙標(biāo)記顯示范圍為當(dāng)前幀的前5幀開始，到當(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組合鍵在目