WEB動(dòng)畫(huà)制作與設(shè)計(jì)課件：創(chuàng)建補(bǔ)間動(dòng)畫(huà)（一）

創(chuàng)建補(bǔ)間動(dòng)畫(huà)創(chuàng)建補(bǔ)間動(dòng)畫(huà)創(chuàng)建補(bǔ)間動(dòng)畫(huà)1、掌握補(bǔ)間形狀動(dòng)畫(huà)的制作原理；2、掌握補(bǔ)間形狀動(dòng)畫(huà)的創(chuàng)建方法；3、掌握傳統(tǒng)補(bǔ)間動(dòng)畫(huà)的制作原理；4、掌握傳統(tǒng)補(bǔ)間動(dòng)畫(huà)的創(chuàng)建方法；【課堂學(xué)習(xí)目標(biāo)】【案例學(xué)習(xí)目標(biāo)】本案例將使用補(bǔ)間形狀動(dòng)畫(huà)來(lái)制作一個(gè)文字演變過(guò)程的模擬動(dòng)畫(huà)?！景咐R(shí)要點(diǎn)】掌握補(bǔ)間形狀動(dòng)畫(huà)的制作原理和創(chuàng)建方法?！菊n堂案例】—制作“漢字的演變”1、補(bǔ)間形狀動(dòng)畫(huà)的制作原理

補(bǔ)間形狀動(dòng)畫(huà)是指在兩個(gè)或兩個(gè)以上的關(guān)鍵幀之間對(duì)形狀進(jìn)行補(bǔ)間，從而創(chuàng)建出一個(gè)形狀隨著時(shí)間的改變而變成另一個(gè)形狀的動(dòng)畫(huà)效果。

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

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

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

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

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

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

其值在-100～0之間時(shí)，動(dòng)畫(huà)變化的速度從慢到快。②其值在0～100之間時(shí)，動(dòng)畫(huà)變化的速度從快到慢。③緩動(dòng)為0時(shí)，補(bǔ)間幀之間的變化速率是不變的。【理論知識(shí)】——補(bǔ)間形狀動(dòng)畫(huà)的制作原理3．認(rèn)識(shí)補(bǔ)間形狀動(dòng)畫(huà)的屬性面板

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

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

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

（1）添加形狀提示

單擊補(bǔ)間形狀動(dòng)畫(huà)的開(kāi)