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

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

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

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

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

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

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

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

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

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

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

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

4.4.3運用AnimatorCC2018軟件繪制圖形元件

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

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

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

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

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

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

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

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

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