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

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

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

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

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

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

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

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

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

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

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

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

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

（1）添加形狀提示

單擊補間形狀動畫的開始幀，執(zhí)行“修改>形狀>添加形狀提示”命令或按Ctrl+Alt+H組合鍵。這樣在形狀上就會增加一個帶字母的紅色圓圈，相應(yīng)地在結(jié)束幀的形狀上也會增加形狀提示符，如圖所示?！纠碚撝R】——形狀提示點原理

（2）形狀提示原理

繼續(xù)添加形狀提示點，并調(diào)節(jié)提示點位置，此時圖形的變化過程如圖所示?！咎崾尽啃螤钐崾军c一定要按順時針的方形添加，順序不能錯，否則無法實現(xiàn)效果。【理論知識】——形狀提示點原理任務(wù)：制作“旋轉(zhuǎn)三棱錐”【

舉一反三】傳統(tǒng)補間動畫傳統(tǒng)補間動畫傳統(tǒng)補間動畫傳統(tǒng)補間動畫1、掌握傳統(tǒng)補間動畫的制作原理；2、掌握傳統(tǒng)補間動畫的創(chuàng)建方法；【課堂學習目標】【案例學習目標】

使用變形工具調(diào)整圖形大小，使用創(chuàng)建傳統(tǒng)補間動畫命令制作動畫?！景咐R要點】

使用任意變形工具將蝙蝠翅膀進行變形，然后利用補間動畫制作手段制作蝙蝠在夜空中飛行的動畫效果，使大家更好的掌握傳統(tǒng)動作補間動畫的制作方法。效果如圖所示?！菊n堂案例】—制作“蝙蝠與月亮”1、

傳統(tǒng)補間動畫原理

傳統(tǒng)補間動畫是指在兩個或兩個以上的關(guān)鍵幀之間對元件進行補間的動畫，使一個元件隨著時間變化其顏色、位置、旋轉(zhuǎn)等屬性，如圖所示?！纠碚撝R】——制作傳統(tǒng)補間動畫【理論知識】——制作傳統(tǒng)補間動畫

【提示】

傳統(tǒng)補間動畫只能對元件進行補間，如果對非元件的對象進行傳統(tǒng)補間動畫時，軟件將自動將其轉(zhuǎn)化為元件?！纠碚撝R】——創(chuàng)建傳統(tǒng)補間動畫2．創(chuàng)建傳統(tǒng)補間動畫

在存儲著同一元件兩種不同屬性的兩關(guān)鍵幀之間任選1幀，直接在該幀上單擊鼠標右鍵，在彈出的快捷菜單中選擇“創(chuàng)建傳統(tǒng)補間”命令，如圖所示操作就可創(chuàng)建傳統(tǒng)補間動畫?！纠碚撝R】——認識傳統(tǒng)補間動畫屬性面板3．認識傳統(tǒng)補間動畫的屬性面板

當選中傳統(tǒng)補間動畫的任意一幀時，其“屬性”面板的狀態(tài)如圖所示?！纠碚撝R】——認識傳統(tǒng)補間動畫屬性面板3．認識傳統(tǒng)補間動畫的屬性面板

其中常用的選項為“旋轉(zhuǎn)”和“緩動”選項，在“旋轉(zhuǎn)”下拉列表中選擇不同的方式，將使元件按安不同的方式旋轉(zhuǎn)。（1）“順時針”是指元件播放時以順時針方向進行旋轉(zhuǎn)，并可在“x”參數(shù)中設(shè)置旋轉(zhuǎn)次數(shù)。（2）“逆時針”是指元件播放時以逆時針方向進行旋轉(zhuǎn)，并可在“x”參數(shù)中設(shè)置旋轉(zhuǎn)次數(shù)。（3）“自動”是指元件的旋轉(zhuǎn)由用戶自己進行設(shè)置。（4）“無”是指元件不產(chǎn)生旋轉(zhuǎn)。1．繪制夜空（1）新建一個Flash文檔，設(shè)置“幀頻”為“12”fps，文檔所有屬性使用默認參數(shù)。（2）新建并重命名圖層，如圖所示?！菊n堂案例】—制作“蝙蝠與月亮”1．繪制夜空（3）選擇”矩形”工具圖，在“顏色”面板中設(shè)置“筆觸顏色”為“無”，“填充顏色”為“線形漸變”，從左至右第1個色塊顏色為“#000099”，第2個色塊顏色為“黑色”，“顏色”面板效果如圖左所示，在“背景”圖層上繪制一個寬、高分別為“750”像素、“400”像素的矩形，并相對舞臺居中對齊，效果如圖右所示?！菊n堂案例】—制作“蝙蝠與月亮”2．繪制圓月（1）選擇“橢圓”工具，在“顏色”面板中設(shè)置“筆觸顏色”為“無”，設(shè)置“填充顏色”的“類型”為“徑向漸變”，從左至右第1個色塊顏色為“#FFFF00”，第2個色塊為顏色“白色”且其“Alpha”值為“0％”，效果如圖所示。在“月亮”圖層上繪制一個寬、高均為“138”像素的圓形，其位置對齊到舞臺中央。【課堂案例】—制作“蝙蝠與月亮”2．繪制圓月（1）選擇“橢圓”工具，在“顏色”面板中設(shè)置“筆觸顏色”為“無”，設(shè)置“填充顏色”的“類型”為“徑向漸變”，從左至右第1個色塊顏色為“#FFFF00”，第2個色塊為顏色“白色”且其“Alpha”值為“0％”，效果如圖所示。在“月亮”圖層上繪制一個寬、高均為“138”像素的圓形，其位置對齊到舞臺中央。（2）在舞臺上選中剛剛繪制的月亮，按F8鍵將其轉(zhuǎn)

換影片剪輯元件并命名為“月亮”?！菊n堂案例】—制作“蝙蝠與月亮”3．制作蝙蝠飛翔效果（1）按Ctrl+F8新建一個影片剪輯元件并命名為“蝙蝠”，單擊“確定”按鈕進入元件編輯界面。（2）新建并重命名圖層，圖層效果如圖所示?！菊n堂案例】—制作“蝙蝠與月亮”3．制作蝙蝠飛翔效果（3）選擇“橢圓”工具，設(shè)置“筆觸顏色”為“無”，設(shè)置“填充顏色”為“黑色”，在“頭部”圖層上繪制一個“寬、高”均為“34.5”像素的圓形，位置居中對齊到舞臺，效果如圖左所示。（4）選擇“線條”工具，設(shè)置“筆觸顏色”為“黑色”，設(shè)置“筆觸大小”為“1”，在“左耳朵”圖層上繪制一個三角形，效果如圖右所示?！菊n堂案例】—制作“蝙蝠與月亮”3．制作蝙蝠飛翔效果（5）選擇“顏料桶”工具，設(shè)置“填充顏色”為“黑色”，填充完成后刪除邊界線，并利用“選擇”工具圈調(diào)整耳朵的形狀，效果如左圖所示。（6）將“左耳朵”圖層上的圖形復制到“右耳朵”圖層上，執(zhí)行“修改>變形>水平翻轉(zhuǎn)”命令，其水平翻轉(zhuǎn)，并向右移動一段距離，使左右耳朵產(chǎn)生相對頭部對稱的效果，如右圖所示?！菊n堂案例】—制作“蝙蝠與月亮”3．制作蝙蝠飛翔效果（7）將兩只耳朵向舞臺下方移動，直至蝙蝠的頭部，效果如左圖所示。（8）選擇“線條”工具圖，在“屬性”面板中設(shè)置“筆觸顏色”為“黑色”，“筆觸大小”為“1”，在“翅膀”圖層上繪制一個翅膀的圖形，效果如右圖所示?！菊n堂案例】—制作“蝙蝠與月亮”3．制作蝙蝠飛翔效果（9）利用“顏料桶”工具將翅膀填充為“黑色”，填充完成后刪除邊界線，并利用“選擇”工具調(diào)整翅膀的形狀，效果如左圖所示。（10）選中舞臺上的翅膀圖形，按F8鍵將其轉(zhuǎn)換為影片剪輯元件，并命名為“翅膀”，進入元件編輯界面，在前4幀都按F6鍵插入關(guān)鍵幀。效果如右圖所示?！菊n堂案例】—制作“蝙蝠與月亮”3．制作蝙蝠飛翔效果（11）在第2幀處，利用“任意變形”工具將翅膀調(diào)整到如左圖所示的形狀。（12）在第3幀處，利用“任意變形”工具將翅膀調(diào)整到如右圖所示的形狀?！菊n堂案例】—制作“蝙蝠與月亮”3．制作蝙蝠飛翔效果（13）在第4幀處，利用“任意變形”工具將翅膀調(diào)整到如左圖所示的形狀。這樣就完成了翅膀飛翔狀態(tài)制作。（14）雙擊”庫”面板中的“蝙蝠”元件，進入“蝙蝠”元件的編輯界面。將翅膀調(diào)整到合適的大小和位置，效果如右圖所示?！菊n堂案例】—制作“蝙蝠與月亮”3．制作蝙蝠飛翔效果（15）選中舞臺上的“翅膀”文件，按Ctrl+C鍵復制，按Ctrl+Shift+V組合鍵粘貼到當前位置，并執(zhí)行“修改>變形>水平翻轉(zhuǎn)”命令將其水平翻轉(zhuǎn)，最后調(diào)整其水平位置，效果如圖所示。蝙蝠飛翔效果制作完成。【課堂案例】—制作“蝙蝠與月亮”4．制作蝙蝠飛向月亮的動畫（1）返回到主場景中，在3個圖層的第120幀處插入幀，效果如圖所示?！菊n堂案例】—制作“蝙蝠與月亮”（2）在“背景”圖層的第20幀處按F6插入關(guān)鍵幀，并在第1幀～第20幀之間創(chuàng)建形狀補間動畫。4．制作蝙蝠飛向月亮的動畫（3）選中“背景”圖層上第1幀的圖形，利用“填充變形”工具調(diào)整填充的顏色，將顏色中心向上移動一段距離，效果如圖所示?！菊n堂案例】—制作“蝙蝠與月亮”（4）選擇“月亮“圖層，在第20幀處按F6插入關(guān)鍵幀，并在第l幀～第20幀之間創(chuàng)建傳統(tǒng)補間動畫。4．制作蝙蝠飛向月亮的動畫（5）選中“月亮”圖層上第1幀的月亮，將其拖放到畫布之外，效果如圖所示?！菊n堂案例】—制作“蝙蝠與月亮”4．制作蝙蝠飛向月亮的動畫（6）選擇“蝙蝠”圖層，在第21幀處按F6插入關(guān)鍵幀，將“庫”面板的“蝙蝠”元件拖入舞臺，調(diào)整它的“寬”為“108”像素，“高”分為“18.4”像素，并相對舞臺居中對齊，效果如圖所示。然后在第35幀、第45幀和第60幀處插入關(guān)鍵幀，并在第21幀～第35幀，第45幀～第60幀之間創(chuàng)建傳統(tǒng)補間動畫。【課堂案例】—制作“蝙蝠與月亮”4