多媒體技術(shù)應(yīng)用項(xiàng)目化教程（修訂版） 課件 4動(dòng)畫技術(shù)應(yīng)用

項(xiàng)目四動(dòng)畫技術(shù)應(yīng)用“中秋月餅廣告”Animator動(dòng)畫設(shè)計(jì)與制作學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)能力目標(biāo)1．熟悉動(dòng)畫的基本原理，了解動(dòng)畫的應(yīng)用。2．熟悉幀、時(shí)間軸、圖層、面板、元件、動(dòng)作腳本等基本概念和常用動(dòng)畫文件格式。3．熟悉AnimatorCC2018軟件界面與基本工具的作用。4．掌握補(bǔ)間動(dòng)畫、逐幀動(dòng)畫、遮照動(dòng)畫、引導(dǎo)動(dòng)畫、交互動(dòng)畫的特點(diǎn)與制作過程。5．掌握使用AnimatorCC2018創(chuàng)作與發(fā)布主題動(dòng)畫作品的基本過程。1．能策劃、設(shè)計(jì)并制作一個(gè)中秋月餅廣告AnimatorCC2018作品。2．能運(yùn)用AnimatorCC2018軟件繪制矢量圖形、制作二維交互動(dòng)畫、并與聲音、文本進(jìn)行合成、形成動(dòng)畫作品。3．能運(yùn)用動(dòng)畫制作方法與技巧進(jìn)行簡(jiǎn)單動(dòng)畫作品的創(chuàng)作。4．能與人良好溝通，合作完成學(xué)習(xí)任務(wù)。目錄4.1項(xiàng)目提出4.2項(xiàng)目分析4.3相關(guān)知識(shí)4.4項(xiàng)目實(shí)現(xiàn)

4.5項(xiàng)目評(píng)價(jià)4.6項(xiàng)目總結(jié)4.7拓展訓(xùn)練4.1項(xiàng)目提出

隨著網(wǎng)絡(luò)技術(shù)、通信技術(shù)、多媒體技術(shù)的發(fā)展，動(dòng)畫逐漸從傳統(tǒng)的電影、電視平臺(tái)走向網(wǎng)絡(luò)，成為網(wǎng)絡(luò)商業(yè)廣告、網(wǎng)絡(luò)動(dòng)漫、網(wǎng)絡(luò)游戲等各類應(yīng)用領(lǐng)域的寵兒，其在增強(qiáng)動(dòng)態(tài)視覺效果和人機(jī)交互方面具有平面媒體無法比擬的優(yōu)勢(shì)。本項(xiàng)目訓(xùn)練側(cè)重訓(xùn)練二維動(dòng)畫的制作技術(shù)及應(yīng)用，以設(shè)計(jì)和實(shí)現(xiàn)“中秋月餅廣告”AnimatorCC2018動(dòng)畫為主線，以AnimatorCC2018為主要技術(shù)支撐，廣告內(nèi)容包括主體動(dòng)畫、廣告語、背景音樂等基本要素。4.2項(xiàng)目分析制作AnimatorCC2018主題動(dòng)畫的全過程，是指從動(dòng)畫項(xiàng)目分析與規(guī)劃開始，到將制作后的作品上傳到網(wǎng)絡(luò)的整個(gè)過程。如果是小規(guī)模項(xiàng)目，可以一個(gè)人承擔(dān)多項(xiàng)任務(wù)自己完成，但通常情況是3～4名開發(fā)者（設(shè)計(jì)師、程序員等）一起組成一個(gè)小組來完成項(xiàng)目。AnimatorCC2018主題動(dòng)畫的項(xiàng)目進(jìn)行基本過程如圖所示。任務(wù)分析與規(guī)劃素材收集整理主體設(shè)計(jì)元件制作動(dòng)畫合成測(cè)試評(píng)估發(fā)布檢測(cè)4.3AnimatorCC2018相關(guān)知識(shí)4.3.1AnimatorCC2018工作界面4.3相關(guān)知識(shí)1．幀幀是組成二維動(dòng)畫的基本單位。每幀就是動(dòng)畫中的一幅靜止的畫面。比如，在AnimatorCC2018動(dòng)畫中，根據(jù)幀的生成方法及在動(dòng)畫中的重要程度不同，動(dòng)畫中的幀可以分為關(guān)鍵幀、空白關(guān)鍵幀、靜態(tài)延長幀、補(bǔ)間幀等。4.3.2AnimatorCC2018專業(yè)術(shù)語4.3相關(guān)知識(shí)2．元件元件分為影片剪輯、按鈕、圖形三種類型。影片剪輯元件是可以獨(dú)立于主時(shí)間軸播放的動(dòng)畫剪輯，可以加入動(dòng)作代碼。按鈕元件有“常規(guī)”、“彈起”、“按下”和“點(diǎn)擊”四幀的特殊影片剪輯，可以加入動(dòng)作代碼。圖形元件是依賴主時(shí)間軸播放的動(dòng)畫剪輯，不可以加入動(dòng)作代碼。場(chǎng)景中的任意圖形、文字或圖片都可以轉(zhuǎn)換為元件。3．逐幀動(dòng)畫逐幀動(dòng)畫也稱為幀幀動(dòng)畫或關(guān)鍵幀動(dòng)畫，創(chuàng)建方法是逐個(gè)關(guān)鍵幀進(jìn)行編輯，每個(gè)關(guān)鍵幀都是獨(dú)立的，動(dòng)畫通過關(guān)鍵幀的不斷變化產(chǎn)生。4.3.2AnimatorCC2018專業(yè)術(shù)語5.3相關(guān)知識(shí)4．補(bǔ)間動(dòng)畫補(bǔ)間動(dòng)畫的原理是，在第一幀和最后一幀編輯圖形，中間由AnimatorCC2018軟件通過插值計(jì)算自動(dòng)生成動(dòng)畫。使用補(bǔ)間動(dòng)畫，制作的動(dòng)畫文件小，連續(xù)流暢，并且制作相對(duì)比較容易。AnimatorCC2018的補(bǔ)間動(dòng)畫有兩種形式：動(dòng)作補(bǔ)間動(dòng)畫和形狀補(bǔ)間動(dòng)畫。動(dòng)作補(bǔ)間動(dòng)畫只能使用元件制作，不能使用圖形創(chuàng)建。5．遮照動(dòng)畫遮照動(dòng)畫的原理是：在動(dòng)畫的上面放置一個(gè)遮照?qǐng)D層，就好象圖層的蒙板。遮照層遮蓋住的地方在動(dòng)畫正常播放時(shí)顯示，沒有遮蓋的地方將不顯示。5.3.2AnimatorCC2018專業(yè)術(shù)語4.3相關(guān)知識(shí)6．引導(dǎo)動(dòng)畫引導(dǎo)動(dòng)畫也稱路徑動(dòng)畫。引導(dǎo)動(dòng)畫的原理是：一個(gè)元件由它的上一個(gè)圖層，即引導(dǎo)層上所繪制的線條進(jìn)行引導(dǎo)，指定第1幀和最后一幀的元件在線條上的位置后，中間由軟件本身自動(dòng)生成補(bǔ)間動(dòng)畫。引導(dǎo)圖形在編輯時(shí)可見，發(fā)布后不可見。7．動(dòng)作腳本ActionScript3現(xiàn)在為基于Web的程序提供了更多的可能性。更適合高度復(fù)雜web應(yīng)用程序和大數(shù)據(jù)集?？梢詾橐訟nimatorCC2018Player為目標(biāo)的內(nèi)容和應(yīng)用程序提供高性能和開發(fā)效率。8．場(chǎng)景

AnimatorCC2018中使用場(chǎng)景可以將文檔組織成可包含除其它場(chǎng)景外的內(nèi)容的不連續(xù)部分。即可以重新建一個(gè)動(dòng)畫單元，不受前面場(chǎng)景的內(nèi)容影響，

4.3.2AnimatorCC2018專業(yè)術(shù)語4.3相關(guān)知識(shí)4.3.3AnimatorCC2018常用快捷操作命令功能含義操作命令功能含義F5播放延長幀Ctrl+F8新建元件F6插入關(guān)鍵幀F(xiàn)9打開動(dòng)作面板F7插入空白關(guān)鍵幀Ctrl+F3打開屬性面板Enter播放影片Ctrl+B將元件打散為圖形Ctrl+Enter測(cè)試影片F(xiàn)8將圖形轉(zhuǎn)換為元件Ctrl+G將所選對(duì)象進(jìn)行組合4.4項(xiàng)目實(shí)現(xiàn)4.4.1總體設(shè)計(jì)1．結(jié)構(gòu)設(shè)計(jì)AnimatorCC2018廣告的基本結(jié)構(gòu)如圖所示。2．風(fēng)格設(shè)計(jì)

風(fēng)格設(shè)計(jì)是指為了使創(chuàng)意、設(shè)計(jì)與交互三者達(dá)到一種風(fēng)格上的統(tǒng)一而進(jìn)行的色彩、版面、風(fēng)格上的總體設(shè)計(jì)。鑒于“中秋月餅廣告”是主要是為了突出中秋吃月餅這一主題，借助明月當(dāng)空的場(chǎng)景，同時(shí)配上思念和祝福親友為主題的動(dòng)畫，動(dòng)畫考慮了傳統(tǒng)的表現(xiàn)要素之一月餅。因此在色彩上以月餅的顏色為主。同時(shí)以詼諧幽默的方式表現(xiàn)動(dòng)畫，讓人們?cè)谟鋹偟耐瑫r(shí)記住某一品牌的月餅。在聲音方面，除背景音樂外，配上輕快的音效，以烘托詼諧氣氛。動(dòng)畫人物形象采用了卡通人物風(fēng)格。主體動(dòng)畫廣告語4.4項(xiàng)目實(shí)現(xiàn)3．內(nèi)容設(shè)計(jì)4.4項(xiàng)目實(shí)現(xiàn)4.4.2運(yùn)用AnimatorCC2018軟件新建動(dòng)畫文錄及導(dǎo)入圖像

1．啟動(dòng)AnimatorCC20182．新建動(dòng)畫文檔4.4項(xiàng)目實(shí)現(xiàn)4.4.2運(yùn)用AnimatorCC2018軟件新建動(dòng)畫文錄及導(dǎo)入圖像

3．導(dǎo)入背景圖像4.4項(xiàng)目實(shí)現(xiàn)4.4.3運(yùn)用AnimatorCC2018軟件繪制圖形元件

4.4項(xiàng)目實(shí)現(xiàn)4.4.3運(yùn)用AnimatorCC2018軟件繪制圖形元件

4.4項(xiàng)目實(shí)現(xiàn)4.4.3運(yùn)用AnimatorCC2018軟件繪制圖形元件

4.4項(xiàng)目實(shí)現(xiàn)下面以“卡通頭像”元件的制作為例介紹如何使用AnimatorCC2018軟件創(chuàng)建圖形元件的過程。

4.4.3運(yùn)用AnimatorCC2018軟件繪制圖形元件

1.執(zhí)行“插入”→“新建元件”命令，在彈出的對(duì)話框中創(chuàng)建一個(gè)名稱為“卡通頭像”的“圖形”元件，完成后點(diǎn)擊“確定”按鈕進(jìn)入“卡通頭像”元件編輯頁面。2.繪制一個(gè)三角形。將默認(rèn)的圖層改名為“臉”，并單擊這一層的第1幀，在工具欄中選擇“線條工具”，在屬性面板中設(shè)置線條的顏色為黑色，字號(hào)大小為“3”類型為“實(shí)線”，最后在舞臺(tái)上繪制一個(gè)三角形，如圖使用“選擇工具”對(duì)準(zhǔn)三角形的一條邊線，當(dāng)鼠標(biāo)指針變?yōu)榧^右下方出現(xiàn)一個(gè)弧線時(shí)，按住鼠標(biāo)左鍵不放拖拽，將邊線調(diào)整成弧線所示。使用同樣的方法，調(diào)整圖形完成后如圖所示。3.繪制眼睛和嘴巴。單擊時(shí)間軸上“插入圖層”按鈕新建一個(gè)圖層，將其改名為“眼睛和嘴”并確保它處在“臉”層上方，然后單擊這層的第1幀，接著在工具欄中選擇“鉛筆工具”，在選項(xiàng)欄中單擊鉛筆選項(xiàng)按鈕，并在彈出的菜單中選擇“平滑”，最后在屬性面板中設(shè)置線條的顏色為黑色，字號(hào)大小為“3”類型為“實(shí)線”，在舞臺(tái)上繪制卡通頭像的眼睛和嘴巴。初步效果如圖所示4.調(diào)整臉部圖形。使用“選擇工具”和“任意變形工具”對(duì)圖像進(jìn)行調(diào)整，調(diào)整完成后如圖所示。4.4項(xiàng)目實(shí)現(xiàn)4.4.3運(yùn)用AnimatorCC2018軟件繪制圖形元件⑤繪制鼻子。⑥繪制尾巴。⑦繪制耳朵。⑧調(diào)整耳朵圖形。⑨填充耳朵部位的顏色。4.4項(xiàng)目實(shí)現(xiàn)4.4.4運(yùn)用AnimatorCC2018軟件制作影片剪輯元件在制作中秋月餅廣告時(shí)我們還需要制作多個(gè)影片剪輯元件，包括楓葉飄動(dòng)、卡通人物行走、卡通人物正面表情、卡通人物暈倒、下月餅等，效果如圖所示。4.4項(xiàng)目實(shí)現(xiàn)4.4.4運(yùn)用AnimatorCC2018軟件制作影片剪輯元件

1.制作影片剪輯元件“卡通人物行走”主要操作步驟:①進(jìn)入編輯頁面。②拖動(dòng)圖形元件到各自圖層。注意：本題中“卡通人物腳”元件需要在“卡通人物腳前”，“卡通人物腳后”兩個(gè)圖層中各拖動(dòng)一個(gè)。4.4項(xiàng)目實(shí)現(xiàn)4.4.4運(yùn)用AnimatorCC2018軟件制作影片剪輯元件③調(diào)整圖形。④添加陰影。⑤添加幀。4.4項(xiàng)目實(shí)現(xiàn)4.4.4運(yùn)用AnimatorCC2018軟件制作影片剪輯元件⑥添加關(guān)鍵幀。4.4項(xiàng)目實(shí)現(xiàn)4.4.4運(yùn)用AnimatorCC2018軟件制作影片剪輯元件第1-5幀卡通人物腳部上方的變化第1-5幀卡通人物腳部下方的變化4.4項(xiàng)目實(shí)現(xiàn)4.4.4運(yùn)用AnimatorCC2018軟件制作影片剪輯元件2．制作影片剪輯元件“楓葉飄動(dòng)”主要操作步驟:①創(chuàng)建“楓葉飄動(dòng)”影片剪輯。②拖動(dòng)“楓葉”元件至舞臺(tái)。4.4項(xiàng)目實(shí)現(xiàn)4.4.4運(yùn)用AnimatorCC2018軟件制作影片剪輯元件③創(chuàng)建引導(dǎo)層添加引導(dǎo)線。④對(duì)準(zhǔn)引導(dǎo)線起點(diǎn)。4.4項(xiàng)目實(shí)現(xiàn)4.4.4運(yùn)用AnimatorCC2018軟件制作影片剪輯元件⑤在各關(guān)鍵幀處調(diào)整圖形位置。⑥創(chuàng)建補(bǔ)間動(dòng)畫。4.4項(xiàng)目實(shí)現(xiàn)4.4.4運(yùn)用AnimatorCC2018軟件制作影片剪輯元件3．制作影片剪輯元件“下月餅”主要操作步驟:①創(chuàng)建“下月餅“影片剪輯。②創(chuàng)建補(bǔ)間動(dòng)畫。4.4項(xiàng)目實(shí)現(xiàn)4.4.5運(yùn)用AnimatorCC2018軟件制作鏈接按鈕

1．制作鏈接按鈕主要操作步驟:①創(chuàng)建元件。②拖動(dòng)“月餅”元件至舞臺(tái)。③輸入文字“聯(lián)系我們”。④在按鈕中插入幀。4.4項(xiàng)目實(shí)現(xiàn)1．制作主體動(dòng)畫主要操作步驟:4.4.6運(yùn)用AnimatorCC2018軟件制作主體動(dòng)畫、廣告語(1)回到主場(chǎng)景1(2)添加背景圖像(3)延續(xù)背景圖像4.4項(xiàng)目實(shí)現(xiàn)4.4.6運(yùn)用AnimatorCC2018軟件制作主體動(dòng)畫、廣告語(4)拖動(dòng)“人物行走”元件至舞臺(tái)。(5)插入關(guān)鍵幀(6)創(chuàng)建傳統(tǒng)補(bǔ)間動(dòng)畫(7)導(dǎo)入人物行走時(shí)的音樂4.4項(xiàng)目實(shí)現(xiàn)4.4.6運(yùn)用AnimatorCC2018軟件制作主體動(dòng)畫、廣告語(8)在動(dòng)畫中加入“行走.mp3”聲音文件(9)設(shè)置同步為“數(shù)據(jù)流”4.4項(xiàng)目實(shí)現(xiàn)4.4.6運(yùn)用AnimatorCC2018制作片頭動(dòng)畫、主體動(dòng)畫、片尾動(dòng)畫(10)“人物正面”圖層各幀處插入空白關(guān)鍵幀(11)拖動(dòng)“卡通人物正面”元件實(shí)例至舞臺(tái)4.4項(xiàng)目實(shí)現(xiàn)4.4.6運(yùn)用AnimatorCC2018制作片頭、主體動(dòng)畫、片尾動(dòng)畫(12)在動(dòng)畫中加入“笑.mp3”聲音文件(13)在動(dòng)畫中加入“驚奇.mp3”聲音文件4.4項(xiàng)目實(shí)現(xiàn)4.4.6運(yùn)用AnimatorCC2018軟件制作主體動(dòng)畫、廣告語(14)在動(dòng)畫中加入“撞擊.mp3”聲音文件(15)在動(dòng)畫中加入“悲慘.mp3”聲音文件4.4項(xiàng)目實(shí)現(xiàn)4.4.6運(yùn)用AnimatorCC2018軟件制作主體動(dòng)畫、廣告語

(16)拖入月亮元件至舞臺(tái)(17)插入關(guān)鍵幀4.4項(xiàng)目實(shí)現(xiàn)（18）創(chuàng)建傳統(tǒng)補(bǔ)間動(dòng)畫4.4.6運(yùn)用AnimatorCC2018軟件制作主體動(dòng)畫、廣告語(19)拖動(dòng)兩個(gè)“楓葉飄動(dòng)”影片剪輯元件實(shí)例拖至舞臺(tái)4.4項(xiàng)目實(shí)現(xiàn)4.4.6運(yùn)用AnimatorCC2018軟件制作主體動(dòng)畫、廣告語(20)水平翻轉(zhuǎn)圖形(21)建立撞擊效果4.4項(xiàng)目實(shí)現(xiàn)4.4.6運(yùn)用AnimatorCC2018軟件制作主體動(dòng)畫、廣告語(22）拖動(dòng)“人物暈倒”影片剪輯元件實(shí)至舞臺(tái)（23）拖動(dòng)“下月餅”影片剪輯元件實(shí)至舞臺(tái)4.4項(xiàng)目實(shí)現(xiàn)4.4.6運(yùn)用AnimatorCC2018軟件制作主體動(dòng)畫、廣告語（24）拖動(dòng)“遮罩片”元件實(shí)例拖至舞臺(tái)（25）改變“遮罩片”元件實(shí)例大小并創(chuàng)建動(dòng)畫4.4項(xiàng)目實(shí)現(xiàn)2．添加廣告語主要操作步驟:4.4.6運(yùn)用AnimatorCC2018軟件制作主體動(dòng)畫、廣告語①拖動(dòng)“文字1”元件實(shí)例拖至舞臺(tái)②設(shè)置“Alpha”值4.4項(xiàng)目實(shí)現(xiàn)4.4.6運(yùn)用AnimatorCC2018軟件制作主體動(dòng)畫、廣告語③延長幀④拖動(dòng)“文字2”元件實(shí)例拖至舞臺(tái)4.4項(xiàng)目實(shí)現(xiàn)4.4.6運(yùn)用AnimatorCC2018軟件制作主體動(dòng)畫、廣告語⑤拖動(dòng)“聯(lián)系我們”按鈕元件實(shí)例至舞臺(tái)4.4.6運(yùn)用AnimatorCC2018軟件制作主體動(dòng)畫、廣告語4.4項(xiàng)目實(shí)現(xiàn)⑥添加ActionScript3.0代碼4.4項(xiàng)目實(shí)現(xiàn)4.4.7AnimatorCC2018動(dòng)畫測(cè)試與發(fā)布1．測(cè)試影片或場(chǎng)景2．導(dǎo)出作品主要操作步驟:①打開“中秋月餅廣告.fla”文件。②打開“導(dǎo)出影片”對(duì)話框。③選擇保存類型。4.6項(xiàng)目總結(jié)

4．6．2知識(shí)拓展AnimatorCC2018技術(shù)典型應(yīng)用1．動(dòng)漫2．MTV3．游戲4．商業(yè)廣告4.6項(xiàng)目總結(jié)

5．網(wǎng)站6．教學(xué)課件4．6．2知識(shí)拓展4.6項(xiàng)目總結(jié)

4．6．3技術(shù)提升

AnimatorCC2018制作的網(wǎng)絡(luò)廣告，短小精悍，文字和動(dòng)畫內(nèi)容都比較少，力求通過短時(shí)間的動(dòng)畫，來吸引瀏覽者的注意。在AnimatorCC2018網(wǎng)絡(luò)廣告中，經(jīng)常會(huì)在廣告上添加一個(gè)占據(jù)整個(gè)動(dòng)畫幅面的隱形按鈕，用戶任何時(shí)候點(diǎn)擊動(dòng)畫都能方便的鏈接到網(wǎng)站上。4.6項(xiàng)目總結(jié)

1.如何創(chuàng)建隱形按鈕執(zhí)行“插入→新建元件”命令，在彈出的對(duì)話框中創(chuàng)建一個(gè)名稱為任意名稱的按鈕元件，完成后點(diǎn)擊“確定”按鈕進(jìn)入按鈕元件編輯頁面。選中“點(diǎn)擊”幀，按“F6”插入關(guān)鍵幀，選中工具箱中的矩形工具，填充顏色任意，然后在繪圖區(qū)上繪制一個(gè)矩形，完成后效果如圖將制作好的隱形按鈕拖動(dòng)到舞臺(tái)中，可以看到，無論是什么顏色制作的隱形按鈕，在舞臺(tái)中顯示時(shí)都是藍(lán)色的。并且隱形按鈕只在制作時(shí)顯示，在輸出為影片后，隱形按鈕是不顯示的，在實(shí)際制作網(wǎng)絡(luò)廣告的案例中，經(jīng)常使用隱形按鈕來鏈接網(wǎng)絡(luò)廣告的網(wǎng)址。4.7拓展訓(xùn)練4．7．1改進(jìn)訓(xùn)練1.訓(xùn)練內(nèi)容為“中秋網(wǎng)絡(luò)廣告”增加隱形按鈕的鏈接方式，使得在任何時(shí)候點(diǎn)擊動(dòng)畫都能鏈接到月餅銷售公司的網(wǎng)站上。2.訓(xùn)練要求（1）使用隱形按鈕的方式添加。（2）任何時(shí)候單擊動(dòng)畫，都能實(shí)現(xiàn)鏈接效果。3.重點(diǎn)提示（1）創(chuàng)建與文檔大小一致的隱形按鈕并覆蓋在動(dòng)畫上方。（2）創(chuàng)建隱形按鈕的鏈