Animate實(shí)例教程（Animate2020）電子活頁(yè)微課版 課件 第13、14 作品的測(cè)試、優(yōu)化、輸出和發(fā)布；綜合設(shè)計(jì)實(shí)訓(xùn)

本章簡(jiǎn)介：在制作Animate動(dòng)畫(huà)時(shí)可以測(cè)試作品是否達(dá)到預(yù)期的效果，還可將作品進(jìn)行優(yōu)化，以保證最好的網(wǎng)絡(luò)播放效果。制作完成Animate作品，可以對(duì)其進(jìn)行輸出或發(fā)布，制作成脫離AnimateCC環(huán)境的其他文件格式。本章將介紹對(duì)動(dòng)畫(huà)作品進(jìn)行測(cè)試和優(yōu)化的益處及技巧，還有輸出和發(fā)布作品的方法和格式。讀者通過(guò)學(xué)習(xí)要了解并掌握測(cè)試、優(yōu)化、輸出、發(fā)布作品、轉(zhuǎn)換為HTML5Canvas的方法和技巧，以便制作出高質(zhì)量的動(dòng)畫(huà)作品。第13章作品的測(cè)試、優(yōu)化、輸出和發(fā)布課堂學(xué)習(xí)目標(biāo)了解影片的測(cè)試與優(yōu)化掌握影片的輸出與發(fā)布13.1影片的測(cè)試與優(yōu)化影片測(cè)試窗口作品優(yōu)化選擇“控制>測(cè)試”命令，或按Ctrl+Enter組合鍵，進(jìn)入影片測(cè)試窗口。“測(cè)試影片”窗口13.1.1影片測(cè)試窗口動(dòng)畫(huà)文件越大，在網(wǎng)絡(luò)上播放瀏覽時(shí)等待播放的時(shí)間就越長(zhǎng)。雖然在動(dòng)畫(huà)作品發(fā)布時(shí)會(huì)自動(dòng)進(jìn)行一些優(yōu)化，但是在制作動(dòng)畫(huà)時(shí)還要從整體上對(duì)動(dòng)畫(huà)進(jìn)行優(yōu)化，以減少文件量。動(dòng)畫(huà)的優(yōu)化包括以下幾個(gè)方面。（1）將動(dòng)畫(huà)中所有相同的對(duì)象用同一個(gè)符號(hào)引用，這樣，相同內(nèi)容的對(duì)象在作品中只能保存一次。（2）在動(dòng)畫(huà)中盡量避免使用逐幀動(dòng)畫(huà)，多使用補(bǔ)間動(dòng)畫(huà)。因?yàn)檠a(bǔ)間動(dòng)畫(huà)中的過(guò)渡幀是計(jì)算所得，所以其文件量大大少于逐幀動(dòng)畫(huà)。13.1.2作品優(yōu)化（3）如果使用導(dǎo)入的位圖，最好將位圖作為背景或靜止元素，盡量避免使用位圖動(dòng)畫(huà)元素。（4）對(duì)舞臺(tái)中多個(gè)相對(duì)位置固定的對(duì)象建組。（5）盡量用矢量線條代替矢量色塊。減少矢量圖形的復(fù)雜程度，如減少圖形的邊數(shù)或曲線上折線的數(shù)量。（6）盡量不要將文字打散成輪廓，盡量少用嵌入字體。13.1.2作品優(yōu)化（7）盡量少用漸變色，使用單色，因?yàn)闈u變色比單色多占用50個(gè)字節(jié)的存儲(chǔ)空間。少使用不透明度，因?yàn)闀?huì)減慢回放速度。（8）盡量限制使用特殊線條的類(lèi)型數(shù)，如虛線、點(diǎn)線等。實(shí)線比特殊線條占用的空間要小。使用“鉛筆”工具繪制的線條比使用“畫(huà)筆”工具繪制的線條占用的空間要小。（9）使用“屬性”面板中“顏色”選項(xiàng)下拉列表中的各個(gè)命令設(shè)置實(shí)例，可以使同一元件的不同實(shí)例產(chǎn)生多種不同的效果。13.1.2作品優(yōu)化（10）盡量避免在作品的開(kāi)始出現(xiàn)停頓。在作品的開(kāi)始階段，要在文件量大的幀前面設(shè)計(jì)一些較小的幀序列，在播放這些幀的同時(shí)，預(yù)載后面文件量大的內(nèi)容。（11）對(duì)于動(dòng)畫(huà)的音頻素材，盡量使用MP3格式，因?yàn)槠湔加每臻g最小，壓縮效果最好。（12）音頻引用對(duì)象和位圖引用對(duì)象包含的文件量大，因此，避免在同一關(guān)鍵幀中同時(shí)包含這兩種引用對(duì)象，否則，可能會(huì)出現(xiàn)停頓幀。13.1.2作品優(yōu)化13.2影片的輸出與發(fā)布輸出影片設(shè)置輸出影片格式發(fā)布影片設(shè)置發(fā)布影片格式轉(zhuǎn)換為HTML5Canvas針對(duì)HTML5的發(fā)布選擇“文件>導(dǎo)出”命令，可以選擇將文件導(dǎo)出為圖像或影片。13.2.1輸出影片設(shè)置AnimateCC可以輸出多種格式的動(dòng)畫(huà)或圖形文件，一般包含以下幾種常用類(lèi)型。13.2.2輸出影片格式SWF影片(*.swf)JPEG序列(*.jpg)GIF序列(*.gif)PNG序列(*.png)選擇“文件>發(fā)布”命令，在Animate文件所在的文件夾中生成與Animate文件同名的SWF文件和HTML文件。發(fā)布影片13.2.3發(fā)布影片設(shè)置AnimateCC能夠發(fā)布多種格式的文件，下面介紹各種格式文件的參數(shù)設(shè)置。13.2.4發(fā)布影片格式Flash（.swf）文件格式SWCHTML包裝器GIF圖像JPEG圖像PNG圖像OAM包SVG圖像SWF歸檔如果想要將Animate中制作的舊版動(dòng)畫(huà)轉(zhuǎn)換為HTML5動(dòng)畫(huà)，可以通過(guò)一下幾種方式進(jìn)行轉(zhuǎn)換。13.2.5轉(zhuǎn)換為HTML5Canvas復(fù)制圖層的方式使用菜單命令轉(zhuǎn)換HTML5是構(gòu)建Web內(nèi)容的一種語(yǔ)言描述方式，是網(wǎng)頁(yè)創(chuàng)建內(nèi)容的最新標(biāo)準(zhǔn)。在AnimateCC2019中，選擇HTML5Canvas文檔類(lèi)型，可以進(jìn)入HTML5發(fā)布環(huán)境，輸出發(fā)布即可。選擇“文件>發(fā)布設(shè)置”命令，彈出“發(fā)布設(shè)置”對(duì)話框，在對(duì)話框中進(jìn)行設(shè)置，單擊“發(fā)布”按鈕，即可發(fā)布文件。13.2.6針對(duì)HTML5的發(fā)布

本章簡(jiǎn)介：

本章的綜合設(shè)計(jì)實(shí)訓(xùn)案例，是根據(jù)商業(yè)動(dòng)漫設(shè)計(jì)項(xiàng)目真實(shí)情境來(lái)訓(xùn)練學(xué)生利用所學(xué)知識(shí)完成商業(yè)動(dòng)漫設(shè)計(jì)項(xiàng)目。通過(guò)多個(gè)動(dòng)漫設(shè)計(jì)項(xiàng)目案例的演練，使學(xué)生進(jìn)一步掌握AnimateCC的強(qiáng)大操作功能和使用技巧，并應(yīng)用所學(xué)技能制作出專(zhuān)業(yè)的動(dòng)漫設(shè)計(jì)作品。第14章綜合設(shè)計(jì)實(shí)訓(xùn)課堂學(xué)習(xí)目標(biāo)掌握使用傳統(tǒng)補(bǔ)間命令制作傳統(tǒng)補(bǔ)間動(dòng)畫(huà)的方法。掌握?qǐng)D形、按鈕、影片剪輯元件的創(chuàng)建及應(yīng)用方法。掌握運(yùn)用動(dòng)作面板添加動(dòng)作腳本的方法。14.1賀卡設(shè)計(jì)—制作元宵節(jié)賀卡項(xiàng)目背景及要求項(xiàng)目創(chuàng)意及制作1．客戶名稱(chēng)尚佳科技有限公司2．客戶需求尚佳科技有限公司在元宵節(jié)來(lái)臨之際，為與合作伙伴以及公司員工聯(lián)絡(luò)感情和互致問(wèn)候，現(xiàn)需制作電子賀卡；要求具有溫馨的祝福語(yǔ)言和傳統(tǒng)的節(jié)日特色，能夠充分表達(dá)本公司的節(jié)日祝福與問(wèn)候。14.1.1項(xiàng)目背景及要求3．設(shè)計(jì)要求（1）賀卡要求運(yùn)用插畫(huà)的形式進(jìn)行設(shè)計(jì)。（2）使用具有元宵節(jié)特色的元素裝飾畫(huà)面，使人感受到濃厚的元宵節(jié)氣息。（3）整體色調(diào)使用暖色調(diào)烘托節(jié)日氛圍，使卡片更加具有元宵節(jié)特色。（4）設(shè)計(jì)規(guī)格均為2598px（寬）×1240px（高）。14.1.1項(xiàng)目背景及要求導(dǎo)入素材制作圖形元件；使用傳統(tǒng)補(bǔ)間命令制作傳統(tǒng)補(bǔ)間動(dòng)畫(huà)；使用屬性面板設(shè)置元件的不透明度及旋轉(zhuǎn)；使用場(chǎng)景制作場(chǎng)景動(dòng)畫(huà)。效果圖14.1.2項(xiàng)目創(chuàng)意及制作14.2電子相冊(cè)—制作旅游相冊(cè)項(xiàng)目背景及要求項(xiàng)目創(chuàng)意及制作1．客戶名稱(chēng)麥芽攝影工作室2．客戶需求麥芽攝影工作室是一家專(zhuān)業(yè)的攝影工作團(tuán)隊(duì)，工作室致力于運(yùn)用獨(dú)特的眼光捕捉屬于顧客唯美的瞬間，同時(shí)提供精致唯美的相冊(cè)。目前工作室需要制作一款新的旅游相冊(cè)模板，以江南游記為主題，要求相冊(cè)復(fù)古、唯美，即能夠體現(xiàn)出江南水鄉(xiāng)的特點(diǎn)又能夠表現(xiàn)出工作室的品質(zhì)。3．設(shè)計(jì)要求（1）相冊(cè)以江南不同風(fēng)景為主，畫(huà)面要求精致唯美。（2）提煉江南特色景觀，在模板中進(jìn)行體現(xiàn)并點(diǎn)綴畫(huà)面。 （3）整體設(shè)計(jì)要體現(xiàn)旅行所帶來(lái)輕松愉悅的感覺(jué)。（4）設(shè)計(jì)規(guī)格均為800px（寬）×600px（高）。14.2.1項(xiàng)目背景及要求導(dǎo)入素材制作按鈕元件和圖形元件；使用創(chuàng)建傳統(tǒng)補(bǔ)間命令制作補(bǔ)間動(dòng)畫(huà)；使用動(dòng)作面板設(shè)置腳本語(yǔ)言；使用粘貼到當(dāng)前位置命令復(fù)制按鈕圖形。效果圖14.2.2項(xiàng)目創(chuàng)意及制作14.3廣告設(shè)計(jì)—制作女包廣告項(xiàng)目背景及要求項(xiàng)目創(chuàng)意及制作1．客戶名稱(chēng)NEWLOOK2．客戶需求NEWLOOK是一家生產(chǎn)經(jīng)營(yíng)各類(lèi)皮件商品的公司，包括各式皮包、男女裝、香水、絲巾等等。多年來(lái)一直堅(jiān)持做自己的品牌精神，給顧客提供不同的產(chǎn)品。現(xiàn)因公司推出新款女士皮包，需要制作一個(gè)全新的網(wǎng)店首頁(yè)海報(bào)，要求起到宣傳公司新產(chǎn)品的作用，向客戶傳遞出清新和活力感。14.3.1項(xiàng)目背景及要求3．設(shè)計(jì)要求（1）將自然元素與新產(chǎn)品巧妙結(jié)合，突出產(chǎn)品的優(yōu)點(diǎn)。（2）畫(huà)面包含新產(chǎn)品，但不能喧賓奪主。（3）色彩運(yùn)用自然和諧，明亮清新。（4）設(shè)計(jì)具有簡(jiǎn)潔、時(shí)尚和雅致的藝術(shù)風(fēng)格。（5）設(shè)計(jì)規(guī)格均為800px（寬）×250px（高）。14.3.1項(xiàng)目背景及要求使用導(dǎo)入命令導(dǎo)入素材并制作圖形元件，使用創(chuàng)建傳統(tǒng)補(bǔ)間命令制作補(bǔ)間動(dòng)畫(huà)效果，使用屬性面板設(shè)置實(shí)例的不透明度及動(dòng)畫(huà)的旋轉(zhuǎn)角度，使用變形面板改變實(shí)例的大小及角度，使用文本工具輸入標(biāo)題性文字。效果圖14.3.2項(xiàng)目創(chuàng)意及制作14.4

海報(bào)設(shè)計(jì)——制作油潑面海報(bào)項(xiàng)目背景及要求項(xiàng)目創(chuàng)意及制作1．客戶名稱(chēng)一碗面2．客戶需求一碗面是一家連鎖餐飲品牌，以一座城一碗面為主旨，致力于為身處外鄉(xiāng)的人們帶來(lái)家鄉(xiāng)的味道。本季度店內(nèi)重點(diǎn)推出陜西油潑面，需要制作一款宣傳海報(bào)。設(shè)計(jì)要求畫(huà)面主題明確，符合行業(yè)特色并能夠體現(xiàn)出招牌菜品。14.4.1項(xiàng)目背景及要求3．設(shè)計(jì)要求（1）設(shè)計(jì)要求簡(jiǎn)潔大方，體現(xiàn)出當(dāng)?shù)靥厣?，且點(diǎn)明主旨。（2）要求圖文搭配合理，裝飾元素符合主題需求。（3）色彩要求以紅色為主色調(diào)，體現(xiàn)出本期主題特點(diǎn)，營(yíng)造出熱鬧的氛圍。（4）畫(huà)面整體主次分明，視覺(jué)流程明確。（5）設(shè)計(jì)規(guī)格均為750px（寬）×1181px（高）。14.4.1項(xiàng)目背景及要求使用導(dǎo)入命令導(dǎo)入素材并制作圖形元件；使用創(chuàng)建傳統(tǒng)補(bǔ)間命令制作動(dòng)畫(huà)效果；使用時(shí)間軸面板控制動(dòng)畫(huà)的出場(chǎng)時(shí)間。效果圖14.4.2項(xiàng)目創(chuàng)意及制作14.5節(jié)目片頭—制作早安片頭項(xiàng)目背景及要求項(xiàng)目創(chuàng)意及制作1．客戶名稱(chēng)陽(yáng)光幼兒園2．客戶需求陽(yáng)光幼兒園自成立以來(lái)，以溫暖的關(guān)懷、優(yōu)質(zhì)的教育、專(zhuān)一的服務(wù)精神為行為準(zhǔn)則，致力于為兒童提供一流的教學(xué)環(huán)境和先進(jìn)的教學(xué)服務(wù)?，F(xiàn)需要制作一部以早安主題的動(dòng)畫(huà)片片頭，要求通過(guò)簡(jiǎn)潔夸張的動(dòng)畫(huà)造型，以及擬人化的風(fēng)格，體現(xiàn)出清晨朝氣蓬勃的特點(diǎn)，能夠引起小朋友的注意并調(diào)動(dòng)其積極樂(lè)觀的心態(tài)。3．設(shè)計(jì)要求（1）動(dòng)畫(huà)設(shè)計(jì)要簡(jiǎn)潔夸張，運(yùn)用擬人化手法，符合兒童視覺(jué)識(shí)別特點(diǎn)。（2）要保持聲畫(huà)同步，提升信息傳達(dá)的能力。（3）將歌曲中的要素提煉概括，在模板中進(jìn)行體現(xiàn)并點(diǎn)綴畫(huà)面。（4）畫(huà)面要求使用明艷的大色塊，符合兒童的色彩感觀。（5）設(shè)計(jì)規(guī)格均為800px（寬）×534px（高）。14.5.1項(xiàng)目背景及要求使用導(dǎo)入命令導(dǎo)入素材并制作圖形元件，，使用創(chuàng)建傳統(tǒng)補(bǔ)間命令制作補(bǔ)間動(dòng)畫(huà)效果，使用遮罩命令制作動(dòng)畫(huà)效果，使用屬性面板設(shè)置實(shí)例的不透明度及動(dòng)畫(huà)的旋轉(zhuǎn)角度，使用變形面板改變實(shí)例的角度。效果圖14.5.2項(xiàng)目創(chuàng)意及制作14.6課堂練習(xí)1—設(shè)計(jì)音樂(lè)節(jié)目片頭項(xiàng)目背景及要求項(xiàng)目創(chuàng)意及制作1．客戶名稱(chēng)《你我來(lái)說(shuō)唱》2．客戶需求《你我來(lái)說(shuō)唱》是一款青年說(shuō)唱音樂(lè)節(jié)目，旨在傳播年輕人的文化態(tài)度和主張,重視理念和交互,是一檔年輕人群體作為收視主體的網(wǎng)絡(luò)綜藝節(jié)目?，F(xiàn)要為其設(shè)計(jì)節(jié)目片頭，要求以視聽(tīng)合一的形式概括與表現(xiàn)節(jié)目?jī)?nèi)容，直觀的體現(xiàn)主題思想且形式創(chuàng)新。14.6.1項(xiàng)目背景及要求3．設(shè)計(jì)要求（1）設(shè)計(jì)要求使用卡通畫(huà)的形式進(jìn)行制作，使畫(huà)面活潑生動(dòng)。（2）將節(jié)目特點(diǎn)及要素提煉概括，在片頭中進(jìn)行體現(xiàn)并點(diǎn)綴畫(huà)面。（3）色彩要求使用激情、奔放、斗志昂揚(yáng)的紅色調(diào)，符合節(jié)目特點(diǎn)。（4）圖文搭配合理，主次分明，視覺(jué)流程明確。（5）設(shè)計(jì)規(guī)格均為800px（寬）×600px（高）。14.6.1項(xiàng)目背景及要求1．素材資源圖片素材所在位置：云盤(pán)中的“Ch14/素材/設(shè)計(jì)音樂(lè)節(jié)目片頭/01~12”。2．制作提示首先，新建文件并導(dǎo)入素材文件；其次，在庫(kù)面板中制作圖形元件；再次，返回場(chǎng)景中制作動(dòng)畫(huà)效果；最后，為動(dòng)畫(huà)添加動(dòng)作腳本。3．知識(shí)提示使用導(dǎo)入到庫(kù)命令和新建元件命令導(dǎo)入素材并制作圖形元件；使用新建元件命令制作影片剪輯元件；使用時(shí)間軸面板，控制畫(huà)面的出場(chǎng)時(shí)間。14.6.2項(xiàng)目創(chuàng)意及制作14.7課堂練習(xí)2—設(shè)計(jì)空調(diào)扇廣告項(xiàng)目背景及要求項(xiàng)目創(chuàng)意及制作1．客戶名稱(chēng)戴森爾2．客戶需求戴森爾是一家綜合網(wǎng)上購(gòu)物平臺(tái),商品涵蓋家電、手機(jī)、電腦、服裝、百貨、海外購(gòu)等品類(lèi)?，F(xiàn)推出新型變頻空調(diào)扇，要求進(jìn)行廣告設(shè)計(jì)，用于平臺(tái)宣傳及推廣，設(shè)計(jì)要符合現(xiàn)代設(shè)計(jì)風(fēng)格，給人沉穩(wěn)干凈的映像。3．設(shè)計(jì)要求（1）畫(huà)面設(shè)計(jì)要求以產(chǎn)品圖片為主體。（2）設(shè)計(jì)要求使用直觀醒目的文字來(lái)詮釋廣告內(nèi)容，表現(xiàn)活動(dòng)特色。（3）畫(huà)面色彩使用要給人清新干凈的印象。（4）畫(huà)面版式沉穩(wěn)且富于變化。（5）設(shè)計(jì)規(guī)格均為1920px（寬）×800px（高）。14.7.1項(xiàng)目背景及要求1．素材資源圖片素材所在位置：云盤(pán)中的“Ch14/素材/設(shè)計(jì)空調(diào)扇廣告/01~03”。2．制作提示首先，新建文件并導(dǎo)入素材文件；其次，在庫(kù)面板中制作圖形元件；再次，制作影片剪輯動(dòng)畫(huà)；最后，制作場(chǎng)景動(dòng)畫(huà)。3．知識(shí)提示使用導(dǎo)入到庫(kù)命令導(dǎo)入素材；使用新建元件命令和文本工具制作圖形元件；使用分散到圖層命令制作功能動(dòng)畫(huà)；使用創(chuàng)建傳統(tǒng)補(bǔ)間命令，制作補(bǔ)間動(dòng)畫(huà)；使用屬性面板調(diào)整實(shí)例的透明度。14.7.2項(xiàng)目創(chuàng)意及制作14.8課后習(xí)題1—設(shè)計(jì)手機(jī)廣告項(xiàng)目背景及要求項(xiàng)目創(chuàng)意及制作1．客戶名稱(chēng)米心手機(jī)專(zhuān)營(yíng)店2．客戶需求米心手機(jī)專(zhuān)營(yíng)店是一家手機(jī)專(zhuān)賣(mài)場(chǎng)。該手機(jī)店最新推出了手機(jī)促銷(xiāo)活動(dòng)，需要制作針對(duì)網(wǎng)店的宣傳廣告，能夠體現(xiàn)出新款產(chǎn)品的特點(diǎn)。廣告要求內(nèi)容豐富，重點(diǎn)宣傳此次推出新款產(chǎn)品活動(dòng)。14.8.1項(xiàng)目背景及要求3．設(shè)計(jì)要求（1）廣告要求內(nèi)容突出，能夠充分展現(xiàn)此次新品宣傳活動(dòng)。（2）以產(chǎn)品實(shí)物為主體，與文字一起構(gòu)成豐富的畫(huà)面。（3）廣告設(shè)計(jì)要求主次分明，對(duì)文字進(jìn)行具有特色的設(shè)計(jì)，使消費(fèi)者快速了解產(chǎn)品信息。（4）要求畫(huà)面對(duì)比感強(qiáng)烈，能迅速吸引人們注意。（5）設(shè)計(jì)規(guī)格均為1899px（寬）×595px（高）。14.8.1項(xiàng)目背景及要求1．素材資源圖片素材所在位置：云盤(pán)中的“Ch14/素材/設(shè)計(jì)手機(jī)廣告/01~04”。2．制作提示首先，新建文件并導(dǎo)入素材文件；其次，在庫(kù)面板中制作圖形元件；再次，返回場(chǎng)景中制作手機(jī)動(dòng)畫(huà)