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

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

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

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

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

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

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

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

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

：單擊此圖標(biāo)，可以隱藏或顯示圖層中的內(nèi)容。鎖狀圖標(biāo)

：單擊此圖標(biāo)，可以鎖定或解鎖圖層。線框圖標(biāo)

：單擊此圖標(biāo)，可以將圖層中的內(nèi)容以線框的方式顯示。二、時間軸面板“插入圖層”按鈕

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

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

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

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

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

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

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

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

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

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

在時間軸中，帶有黑色圓點的第1幀和最后1幀為關(guān)鍵幀，中間綠色背景帶有黑色箭頭的幀為形狀補(bǔ)間幀，如圖所示。【提示】在時間軸中，幀上出現(xiàn)虛線，表示是未完成或中斷了的補(bǔ)間動畫，虛線表示不能夠生成補(bǔ)間幀，如圖所示。三、幀的顯示形式5、包含動作語句的幀

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

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

：單擊此按鈕，播放頭所在幀會顯示在時間軸的中間位置?！袄L圖紙外觀”按鈕

：單擊此按鈕，時間軸標(biāo)尺上出現(xiàn)繪圖紙的標(biāo)記顯示，在標(biāo)記范圍內(nèi)的幀上的對象將同時顯示在舞臺中。“繪圖紙外觀輪廓”按鈕

：單擊此按鈕，時間軸標(biāo)尺上出現(xiàn)繪圖紙的標(biāo)記顯示，在標(biāo)記范圍內(nèi)的幀上的對象將以輪廓線的形式同時顯示在舞臺中?！熬庉嫸鄠€幀”按鈕

：單擊此按鈕，繪圖紙標(biāo)記范圍內(nèi)的幀上的對象將同時顯示在舞臺中，可以同時編輯所有的對象。四、繪圖紙（洋蔥皮）功能在時間軸面板下方的按鈕功能如下：“修改繪圖紙標(biāo)記”按鈕

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