WEB動畫制作與設計課件：創(chuàng)建補間動畫（一）

創(chuàng)建補間動畫創(chuàng)建補間動畫創(chuàng)建補間動畫1、掌握補間形狀動畫的制作原理；2、掌握補間形狀動畫的創(chuàng)建方法；3、掌握傳統(tǒng)補間動畫的制作原理；4、掌握傳統(tǒng)補間動畫的創(chuàng)建方法；【課堂學習目標】【案例學習目標】本案例將使用補間形狀動畫來制作一個文字演變過程的模擬動畫。【案例知識要點】掌握補間形狀動畫的制作原理和創(chuàng)建方法。【課堂案例】—制作“漢字的演變”1、補間形狀動畫的制作原理

補間形狀動畫是指在兩個或兩個以上的關鍵幀之間對形狀進行補間，從而創(chuàng)建出一個形狀隨著時間的改變而變成另一個形狀的動畫效果。

補間形狀動畫可以實現(xiàn)兩個矢量圖形之間顏色、形狀、位置的變化，其原理如圖所示?！纠碚撝R】——制作補間形狀動畫【理論知識】——制作補間形狀動畫

【提示】形狀補間動畫只能對矢量圖形進行補間，要對組、實例、文本或位圖圖像應用補間形狀，首先必須打散這些元素。2．補間形狀動畫的創(chuàng)建方法

同一圖層上，在繪制著不同矢量圖形的兩關鍵幀之間任選1幀，在該幀上單擊鼠標右鍵，在彈出的快捷菜單中選擇“創(chuàng)建補間形狀”命令，如圖所示，即可在兩關鍵幀之間創(chuàng)建補間形狀動畫。【理論知識】——制作補間形狀動畫2．補間形狀動畫的創(chuàng)建方法

如果兩關鍵幀之中的任何一個關鍵幀中的內(nèi)容不符合創(chuàng)建補間形狀的要求或內(nèi)容為空，將使創(chuàng)建補間形狀動畫失敗，如圖所示?！纠碚撝R】——制作補間形狀動畫2．補間形狀動畫的創(chuàng)建方法

如果兩關鍵幀之中的任何一個關鍵幀中的內(nèi)容不符合創(chuàng)建補間形狀的要求或內(nèi)容為空，將使創(chuàng)建補間形狀動畫失敗，如圖所示?！纠碚撝R】——補間形狀動畫的制作原理3．認識補間形狀動畫的屬性面板Flash的“屬性”面板隨選定的對象不同而發(fā)生相應的變化。當建立了一個補間形狀動畫后，單擊時間軸，其“屬性”面板如圖所示?！纠碚撝R】——補間形狀動畫的制作原理3．認識補間形狀動畫的屬性面板

在“補間”選項欄中經(jīng)常使用的選項如下：（1）“緩動”參數(shù)在“緩動”參數(shù)中輸入相應的數(shù)值，形狀補間動畫則會隨之發(fā)生相應的變化。

其值在-100～0之間時，動畫變化的速度從慢到快。②其值在0～100之間時，動畫變化的速度從快到慢。③緩動為0時，補間幀之間的變化速率是不變的?！纠碚撝R】——補間形狀動畫的制作原理3．認識補間形狀動畫的屬性面板

在“補間”選項欄中經(jīng)常使用的選項如下：（2）“混合”下拉列表框在“混合”下拉列表框中包含“角形”和“分布式”兩個參數(shù)。①“角形”是指創(chuàng)建的動畫中間形狀會保留有明顯的角和直線，這種模式適合于具有銳化轉角和直線的混合形狀。②“分布式”選項是指創(chuàng)建的動畫中間形狀比較平滑和不規(guī)則?！纠碚撝R】——補間形狀動畫的制作原理1．繪制太陽（1）新建一個Flash文檔，設置文檔尺寸“470像素×600像素”，幀頻為“12”，文檔其他屬性使用默認參數(shù)。（2）將默認的“圖層1”重命名為“背景”，然后在圖層的第100幀處插入幀。（3）執(zhí)行“文件>導入>導入到舞臺”命令，在彈出的“導入”對話框中選擇“素材>制作“漢字的演變”>卷軸.jpg”文件,將其導入到舞臺中。【課堂案例】—制作“漢字的演變”1．繪制太陽（4）設置圖片的寬、高分別為“468”像素和“600”像素，并相對舞臺居中對齊，使其剛好覆蓋整個舞臺，效果如圖所示?！菊n堂案例】—制作“漢字的演變”1．繪制太陽（5）將“背景”圖層鎖定，在“背景”圖層上新建圖層并重命名為“日”。（6）利用【橢圓】工具在“日”圖層上繪制一個圓形，設置圓的寬高都為“80”像素，并設置圓的位置，如圖所示?！菊n堂案例】—制作“漢字的演變”1．繪制太陽（7）選中繪制的“圓”，在“顏色”面板中設置“筆觸顏色”為“無”，“填充顏色”為“徑向漸變”，其中第l、2個色塊顏色為“#FFFF00”，其Alpha值為100%。第3個色塊為“#C0C0C0”,其Alpha值為0%，使圓具有一定的太陽放光效果，如圖所示?！菊n堂案例】—制作“漢字的演變”2．制作補間形狀動畫（1）選中“日”圖層的第25幀，按F7鍵插入空白關鍵幀，利用“文字”工具在該幀輸入一個“日”字，在“屬性”面板的“字符”欄中設置“顏色”為“黑色”，“大小”為“60”，“系列”為“甲骨文”（大家可以設置為自己喜歡的字體），效果如圖所示?！菊n堂案例】—制作“漢字的演變”2．制作補間形狀動畫（2）選中輸入的“日”字，按Ctrl+B鍵將其打散。（3）鼠標右鍵單擊“日”圖層的第1幀，在彈出的快捷菜單中選擇“創(chuàng)建補間形狀”命令，如圖所示，從而創(chuàng)建補間形狀動畫?！菊n堂案例】—制作“漢字的演變”2．制作補間形狀動畫（4）選中“日”圖層的第50幀，按F6鍵插入關鍵幀。（5）選中“日”圖層的第75幀，按F7鍵插入空白關鍵幀，利用“文字”工具在該幀輸入一個“日”字，在“屬性”面板的“字符”欄中設置“顏色”為“黑色”，“大小”為“60”，“系列”為“華文楷體”，效果如圖所示?！菊n堂案例】—制作“漢字的演變”2．制作補間形狀動畫（6）選中輸入的“日”字將其打散，然后在第50幀～第75幀之間創(chuàng)建補間形狀動畫，此時圖層效果如圖所示?！菊n堂案例】—制作“漢字的演變”3．使用相同的方法，制作“月”字的演變過程。4．保存測試影片，一個文字演變過程動畫制作完成?！菊n堂案例】—制作“漢字的演變”六、對齊對象任務:制作“Loading下載條”操作提示：使用矩形工具、任意變形工具、形狀補間動畫命令制作下載條的動畫效果，使用文本工具添加文字效果。【

舉一反三】【案例學習目標】使用不同的繪圖工具繪制圖形，使用添加形狀提示命令添加提示，使用屬性面板制作動畫?！景咐R要點】使用鉛筆工具和平滑工具繪制流淌的奶油圖形，使用添加形狀提示命令制作奶油流淌的效果?！菊n堂案例】—制作“流淌的奶油”【案例學習目標】使用不同的繪圖工具繪制圖形，使用添加形狀提示命令添加提示，使用屬性面板制作動畫。【案例知識要點】使用鉛筆工具和平滑工具繪制流淌的奶油圖形，使用添加形狀提示命令制作奶油流淌的效果?！菊n堂案例】—制作“流淌的奶油”一、導入圖形1、新建一個Flash文檔，將舞臺窗口的“寬度”設為600像素，“高度”設為300像素。2、建立新元件，類型為“圖形”，名稱為“水果”，將“水果”素材文件導入到新元件的窗口中。3、同樣，創(chuàng)建一個“蛋糕”圖形元件，并將蛋糕素材導入到新元件的舞臺中?！菊n堂案例】—制作“流淌的奶油”一、導入圖形4、

新建元件，名稱為“流淌的奶油”，類型中選擇“影片剪輯”選項，將“庫”面板中的元件“蛋糕”拖曳到舞臺窗口的中間。將“圖層1”重新命名為“蛋糕”。在時間軸上用鼠標單擊第45幀，按F5鍵，在該幀上插入普通幀，如圖所示?！菊n堂案例】—制作“流淌的奶油”二、制作流淌的奶油1、單擊“時間軸”面板下方的“插入圖層”按鈕，創(chuàng)建新圖層并將其命名為“奶油動”。選擇“鉛筆”工具，將“筆觸顏色”設為黑色，模式：“平滑”選項，在蛋糕上繪制一條封閉的曲線作為奶油的輪廓，如圖所示。【課堂案例】—制作“流淌的奶油”二、制作流淌的奶油2、在“奶油動”圖層的第45幀，按F6鍵，插入一個關鍵幀。在第45幀對應的舞臺窗口中，繪制奶油流淌下來的效果，如左圖所示。并利用選擇工具將多余線條刪除，效果如右圖所示?！菊n堂案例】—制作“流淌的奶油”二、制作流淌的奶油3、選擇“顏料桶”工具，將“填充顏色”設為紫色（#9933FF），選中“奶油動”圖層的第l幀，用鼠標在封閉的曲線中單擊，為奶油填充顏色，如左圖所示。選中“奶油動”圖層的第45幀，在舞臺窗口中為流淌的奶油填充顏色，如右圖所示?！菊n堂案例】—制作“流淌的奶油”二、制作流淌的奶油4、選中“奶油動”圖層的第1幀，在時間軸上單擊右鍵，選擇“創(chuàng)建補間形狀”命令,在第l幀～第45幀創(chuàng)建變形動畫。5、選中“奶油動”圖層的第1幀，選擇“修改>形狀>添加形狀提示”（其快捷鍵為Ctrl+Shift+H）命令，在奶油的中間出現(xiàn)紅色的提示點“a”，將提示點移動到奶油的左上方，如左圖所示。選中“奶油動”圖層的第45幀，第45幀的奶油上也出現(xiàn)相應的提示點“a”，如圖右所示。【課堂案例】—制作“流淌的奶油”二、制作流淌的奶油6、將奶油上的提示點移動到其左上方，提示點從紅色變?yōu)榫G色，如左圖所示。選中第1幀，可以觀察到剛才紅色的提示點變?yōu)辄S色，如右圖所示，這表示在第1幀中的提示點和第45幀的提示點已經(jīng)相互對應?！菊n堂案例】—制作“流淌的奶油”二、制作流淌的奶油7、用相同的方法在第l幀的奶油圖形中再添加4個提示點，分別為“b”、“c”、“d”、“e”，并按順時針方向?qū)⑵浞胖迷谀逃蛨D形的邊線上，如左圖所示。在第45幀中，將“b”、“c”、“d”、“e”提示點按順時針的方向分別設置在奶油圖形的邊線上，如右圖所示，完成提示點的設置?！菊n堂案例】—制作“流淌的奶油”二、制作流淌的奶油8、單擊“時間軸”面板下方的“插入圖層”按鈕，創(chuàng)建新圖層并將其命名為“水果”。將“庫”面板中的圖形元件“水果”拖曳到舞臺窗口中，如左圖所示。再重復拖曳4次圖形元件“水果”，并應用“任意變形”工具毯改變水果的大小及傾斜度,如右圖所示?！菊n堂案例】—制作“流淌的奶油”二、制作流淌的奶油9、單擊“時間軸”面板下方的“插入圖層”按鈕，創(chuàng)建新圖層并將其命名為“水果動”。將圖形元件“水果”拖曳到舞臺窗口中并將其縮小，如圖所示。【課堂案例】—制作“流淌的奶油”二、制作流淌的奶油10、選中“水果動”圖層的第45幀，按F6鍵，插入一個關鍵幀，將第45幀中的“水果”實例向下移動，如圖所示。【課堂案例】—制作“流淌的奶油”二、制作流淌的奶油11、用鼠標右鍵單擊“水果動”圖層的第l幀，在彈出的菜單中選擇“創(chuàng)建補間形狀”動畫命令，在第1幀～第45幀生成動作補間動畫，如圖所示?！菊n堂案例】—制作“流淌的奶油”二、制作流淌的奶油12、單擊進入“場景l(fā)”的舞臺窗口。將“背景圖”導入到舞臺窗口中，在組“屬性”面板中將“X”、“Y”選項的數(shù)值設為0，如圖所示?！菊n堂案例】—制作“流淌的奶油”二、制作流淌的奶油13、將“庫”中的影片剪輯元件“流淌的奶油”拖曳到舞臺窗口中，應用“任意變形”工具改變其大小并放置在背景圖中白色矩形的中間，效果如圖所示。流淌的奶油制作完成，按Ctrl+Enter組合鍵即可查看效果?！菊n堂案例】—制作“流淌的奶油”

（1）添加形狀提示

單擊補間形狀動畫的開