Animate動畫設(shè)計與制作實例教程（Animate CC 2019）項目七 制作動畫片

Animate動畫設(shè)計與制作實例教程

（AnimateCC2019）項目七

制作動畫片項目簡介

本項目主要介紹代碼片段和模板的使用、按分鏡頭制作動畫、將分鏡頭情節(jié)完全放入影片剪輯元件中、制作同一角色的不同動作、元件和各補間動畫的搭配使用、使用逐幀動畫制作所需效果、情節(jié)的連續(xù)和分鏡頭的承接技巧等。通過本項目的學(xué)習(xí)，讀者可以掌握用AnimateCC2019制作動畫片的技巧。學(xué)習(xí)目標(biāo)掌握代碼片段和模板的使用方法；掌握魚兒游、貓和老鼠、簡單愛動畫片的制作方法。7.1.1代碼片段

代碼片段是Animate中預(yù)先編寫好的ActionScript3.0代碼段，可以方便地添加到項目里，利用“代碼片段”面板里提供的動作立即給項目添加交互功能?？梢允褂么a片段添加能影響舞臺上行為的代碼，添加能在時間軸中控制播放頭移動的代碼，還可以將創(chuàng)建的新代碼片段添加到面板中。

使用代碼片段控制對象，對象必須是影片剪輯、按鈕或者文本，必須在“屬性”面板中為對象添加實例名，代碼片段不能直接添加到對象上，只能添加到時間軸的幀中。7.1知識準(zhǔn)備——代碼片段和模板

執(zhí)行“窗口”>“代碼片段”命令，可以打開“代碼片段”面板，如圖7-1所示?？梢詾锳ctionScript文檔、HTML5Canvas文檔和WebGL文檔添加交互代碼。圖7-11．使用代碼片段添加ActionScript代碼

在影片主時間軸上的任意一個關(guān)鍵幀以及影片剪輯元件里的任意一個關(guān)鍵幀，都可以添加ActionScript代碼。在編譯后的項目播放過程中，當(dāng)播放到某一幀時，如果其中包含代碼，它們就會被執(zhí)行。2．將自定義代碼片段添加到“代碼片段”面板（1）在“代碼片段”面板中，從面板菜單中選擇“新建代碼片段”。在彈出的對話框中，為自定義的代碼片段輸入標(biāo)題、工具提示文本和JavaScript或ActionScript3.0代碼。（2）單擊“自動填充”按鈕，可以將“動作”面板中選擇的任何代碼添加進(jìn)去。（3）在“動作”面板中，查看新添加的代碼并根據(jù)片段開頭的說明替換必要的參數(shù)。

Animate的模板為用戶創(chuàng)作各種常見動畫題材提供了很大便利，有許多模板可供創(chuàng)作使用，如照片幻燈片模板、測驗?zāi)０?、移動?nèi)容模板等。7.1.2模板7.2.1案例效果分析

本實例制作一群小魚在水中游來游去的小動畫，主要學(xué)習(xí)元件的使用方法。效果如圖7-10所示。

本實例使用5個繪制魚兒不同形態(tài)的圖形元件組成一個影片剪輯元件，由影片剪輯元件內(nèi)部放置圖形元件的順序和幀數(shù)來控制魚兒的動作，然后導(dǎo)入背景圖片，并將影片剪輯元件放置在合適的位置創(chuàng)建補間動畫，完成本實例的制作。7.2任務(wù)一——制作“魚兒游”動畫圖7-107.2.2設(shè)計思路

本例在元件的不同關(guān)鍵幀中改變魚兒的形狀，以形成魚兒在水中不斷穿梭、翻騰的動畫效果。7.2.3相關(guān)知識和技能點（1）Animate中的形狀為分散的狀態(tài)，在繪制魚兒形狀時，每出現(xiàn)一處重疊的線條，魚兒形狀就被分割成分散的形狀。在調(diào)整顏色時要注意，魚兒身體是由多個分散的色塊構(gòu)成的，要統(tǒng)一調(diào)配顏色。（2）將5個形態(tài)不同的魚兒圖形元件放置在一個影片剪輯元件中，再對影片剪輯元件設(shè)置補間動畫改變設(shè)置，從而制作魚兒游來游去的效果。（1）啟動AnimateCC2019，按Ctrl+N組合鍵，新建一個Animate文件。（2）按Ctrl+F8組合鍵，彈出“創(chuàng)建新元件”對話框，在“名稱”文本框中輸入“1”，選擇類型為“圖形”，如圖7-11所示。（3）單擊“確定”按鈕，進(jìn)入該元件的編輯窗口，選擇工具箱中的“鉛筆”工具，在“舞臺”的中心繪制魚兒的輪廓，如圖7-12所示。7.2.4任務(wù)實施

圖7-11

圖7-12（4）在“屬性”面板中設(shè)置填充色為#FFBA94，使用“顏料桶”工具填充魚的身體部分，如圖7-13所示。（5）更改填充色為#FF9A63，填充魚的頭部，如圖7-14所示。（6）更改填充色為#FF7939，填充魚身上的花紋，如圖7-15所示。（7）刪除魚兒輪廓線，如圖7-16所示。至此，“1”元件完成。

圖7-13

圖7-14

圖7-15

圖7-16（8）按Ctrl+L組合鍵打開“庫”面板，選中“1”元件，用鼠標(biāo)右鍵單擊，在彈出的快捷菜單中選擇“直接復(fù)制”命令，彈出“直接復(fù)制元件”對話框，修改文件名為“2”，如圖7-17所示。圖7-17（9）單擊“確定”按鈕，進(jìn)入“2”元件的編輯窗口，選擇“任意變形”工具和“選擇”工具，調(diào)整魚兒的形狀。（10）重復(fù)步驟（8）、（9）的操作，復(fù)制出“3”“4”“5”元件，并依次調(diào)整魚兒的形狀，如圖7-18所示。（11）按Ctrl+F8組合鍵新建元件，命名為“魚兒”，選擇元件類型為“影片剪輯”，如圖7-19所示。（12）單擊“確定”按鈕，進(jìn)入新建影片剪輯元件的編輯窗口，從“庫”面板中將“1”元件拖到如圖7-20所示的位置。圖7-18

圖7-19

圖7-20（13）選中第4幀，按F7鍵插入空白關(guān)鍵幀，將元件“2”拖到圖7-21所示的位置。圖7-21（14）在第12幀插入空白關(guān)鍵幀，從“庫”面板中將元件“3”拖到圖7-22所示的位置。圖7-22（15）在第15幀插入空白關(guān)鍵幀，從“庫”面板中將元件“5”拖到圖7-23所示的位置。圖7-23（16）在第18幀插入空白關(guān)鍵幀，從“庫”面板中將元件“4”拖到圖7-24所示的位置。圖7-24（17）選中第27幀，按F5鍵插入普通幀，如圖7-25所示。圖7-25（18）單擊“場景1”圖標(biāo)，回到場景1，執(zhí)行“文件”>“導(dǎo)入”>“導(dǎo)入到庫”命令，導(dǎo)入一幅圖片，如圖7-26所示，調(diào)整圖片大小，使之覆蓋整個舞臺，如圖7-27所示。圖7-26

圖7-27（19）單擊“時間軸”中的“插入圖層”按鈕，新建“圖層2”，從“庫”面板中將若干“魚兒”元件拖到“圖層2”中，最終圖層和效果如圖7-28所示。（20）按Ctrl+Enter組合鍵測試影片。圖7-287.3.1案例效果分析（1）故事情節(jié)：一只貓在老鼠洞邊等著捉老鼠，老鼠一直不出來，貓等得睡著了，聽見貓的鼾聲，老鼠紛紛跑出洞來。（2）場景設(shè)計：應(yīng)用3個場景，分別是Loading頁面、字幕場景和故事場景。Loading頁面由線條和圓圈構(gòu)成，可通過制作的按鈕元件跳轉(zhuǎn)到字幕場景；字幕場景包括線條和閃爍小星星的變化，最后出現(xiàn)標(biāo)題——貓和老鼠；通過Enter按鈕可進(jìn)入故事場景。（3）具體任務(wù)分解：具體分為繪制背景、繪制角色、小貓打鼾、老鼠出洞幾個小任務(wù)。分別制作元件完成這些小任務(wù)，并將情節(jié)貫穿起來，構(gòu)成本實例，靜幀效果如圖7-29所示。7.3任務(wù)二——制作“貓和老鼠”動畫圖7-297.3.2設(shè)計思路

實例由3個場景構(gòu)成，按照場景可分為3部分設(shè)計。第一部分為Loading頁面，第二部分為字幕，第三部分為故事情節(jié)：一只小花貓在老鼠洞口等老鼠出來等得睡著了，小老鼠們聽到貓的鼾聲，紛紛跑了出來。7.3.3相關(guān)知識和技能點（1）設(shè)計Loading、text和maohelaoshu共3個場景，場景之間采用按鈕連接，本實例故事情節(jié)的實現(xiàn)是循環(huán)播放最后一個場景maohelaoshu，貓不斷地打鼾，老鼠不斷地跑出來。（2）使用各種元件，并通過實例練習(xí)去了解元件的應(yīng)用：場景的連接使用按鈕元件，角色——貓和老鼠采用圖形元件，貓打鼾的“Z”圖形是影片剪輯元件。1．制作Loading頁面

Loading頁面的效果如圖7-30所示。（1）新建Animate文件，執(zhí)行“窗口”>“其他面板”>“場景”命令，選中“場景1”，修改名稱為“Loading”，如圖7-31所示。7.3.4任務(wù)實施圖7-30

圖7-31（2）新建一個圖形元件，命名為“circle”，如圖7-32所示。（3）新建一個圖形元件，命名為“ring”，如圖7-33所示。（4）新建一個圖形元件，命名為“backgr”，作為Loading背景，分別將圖形元件“circle”和“ring”多次拖至“舞臺”，并按不同大小放置，如圖7-34所示。圖7-32

圖7-33

圖7-34（5）新建一個按鈕元件，命名為“click”，作為Loading結(jié)束后的鏈接，如圖7-35所示。（6）返回主場景“Loading”，在時間軸上新建一個圖層，命名為“BACK”。在第1幀將圖形元件“backgr”拖至“舞臺”，在第4幀按F5鍵插入普通幀，如圖7-36所示。（7）在主場景新建一個圖層，命名為“AS”，在“AS”圖層的第4幀插入關(guān)鍵幀，按F9鍵打開“動作”面板，輸入語句“stop();”，時間軸如圖7-37所示。圖7-35

圖7-36

圖7-37（8）在“AS”圖層的第4幀拖入按鈕元件“click”，“屬性”面板中設(shè)置實例名稱為“btn”，按F9鍵，在“動作”面板中輸入代碼。完成Loading頁面的制作，時間軸如圖7-38所示。圖7-38（9）執(zhí)行“插入”>“場景”命令，出現(xiàn)“場景2”，將“場景2”改名為“text”，如圖7-39所示。圖7-392．制作字幕（1）進(jìn)入“text”場景，在“圖層1”上繪制一個黑色矩形，設(shè)置寬為550，高為400，“X”“Y”都為0，使之布滿整個舞臺，成為黑色背景。（2）新建圖層，命名為“l(fā)ight”，使用“橢圓”工具在“舞臺“中央繪制一個圓形，執(zhí)行“修改”>“形狀”>“柔化填充邊緣”命令，彈出“柔化填充邊緣”對話框，如圖7-40所示，柔化效果對比如圖7-41所示。圖7-40

圖7-41（3）按F8鍵，將柔化邊緣處理后的圓形轉(zhuǎn)化為元件，并命名為L1。（4）在第5幀插入關(guān)鍵幀，設(shè)置第1幀中元件的透明度“Alpha”值為0，在第1～5幀創(chuàng)建傳統(tǒng)補間動畫，編輯光線淡入效果。（5）在第10幀插入關(guān)鍵幀，使用“任意變形”工具對光圈進(jìn)行變形處理，設(shè)置其透明度“Alpha”值為80%，效果如圖7-42所示。（6）新建圖層“l(fā)ine_1”，在第5幀插入關(guān)鍵幀，在“舞臺“中央繪制一條直線，設(shè)置顏色為#666666，樣式為“極細(xì)”，在第10幀插入關(guān)鍵幀，將第5幀中的線條縮到最短，在第5～10幀創(chuàng)建形狀補間動畫，如圖7-43所示。圖7-42

圖7-43（7）新建圖層“title”，在第25幀按F6鍵插入關(guān)鍵幀，在“舞臺”中央輸入文本“貓和老鼠”，格式為隸書、白色、粗體，按F8鍵，將其轉(zhuǎn)化為圖形元件title。（8）在圖層“l(fā)ight”的第25幀插入關(guān)鍵幀并創(chuàng)建傳統(tǒng)補間動畫，使用“任意變形”工具放大該幀中的元件，在“屬性”面板上將該元件的透明度設(shè)為0。（9）在圖層“title”的第55幀插入關(guān)鍵幀，并創(chuàng)建傳統(tǒng)補間動畫，將第25幀中元件的透明度設(shè)為0，形成標(biāo)題文字的淡入效果。（10）新建圖層“l(fā)ine_2”，在第10幀按F6鍵插入關(guān)鍵幀，復(fù)制圖層“l(fā)ine_1”中第10幀的直線，粘貼到當(dāng)前位置。分別在這兩個圖層的第25幀插入關(guān)鍵幀并創(chuàng)建形狀補間動畫，將“l(fā)ine_1”圖層中的線條向下移，“l(fā)ine_2”圖層中的線條向上移，將標(biāo)題夾在它們之間，如圖7-44所示。（11）新建圖層“g_line1”，在第25幀插入關(guān)鍵幀，復(fù)制兩條分開的線到新圖層的相同位置，轉(zhuǎn)換成圖形元件“l(fā)ine”。在第35幀插入關(guān)鍵幀，使用“任意變形”工具在垂直方向上拉伸元件“l(fā)ine”，將第25幀的“緩動”設(shè)為100，在第25～35幀創(chuàng)建傳統(tǒng)補間動畫。（12）新建4個圖層，復(fù)制“g_line1”圖層的內(nèi)容，時間軸布置如圖7-45所示。

圖7-44

圖7-45（13）新建圖層“m-circle”，在第40幀插入關(guān)鍵幀，繪制圖7-46所示的發(fā)光小球，并進(jìn)行組合。將該圖形復(fù)制15次，使用“修改”>“對齊”下的命令，使其以線條為參考均勻排列。（14）選中第41～55幀，按F6鍵逐幀插入關(guān)鍵幀，從第40幀開始，逐幀刪除后面的14個、13個小球組合……直到第55幀，生成小球依次出現(xiàn)的動畫效果。（15）新建圖層“m-light”，選擇相應(yīng)幀，插入圖7-47所示的小球發(fā)光效果。（16）新建圖層，為標(biāo)題制作倒影，并在最后一幀插入關(guān)鍵幀，按F9鍵，輸入“stop();”。添加按鈕元件“ENTER”，設(shè)置實例名稱為“btn_enter”。按F9鍵，在“動作”面板中輸入代碼。場景“text”的制作完成，靜幀效果如圖7-48所示。

圖7-46

圖7-47

圖7-483．制作故事情節(jié)（1）新建“場景3”，更名為“maohelaoshu”。繪制一個矩形框，填充背景顏色為#FFFFCC。（2）將圖層命名為“wall”，繪制圖7-49所示的墻壁圖形，然后按Ctrl+G組合鍵進(jìn)行組合。（3）在圖層“wall”下新建圖層“floor”，繪制圖7-50所示的黑色不規(guī)則圖形，作為墻壁上小洞的陰影，效果如圖7-51所示。（4）新建圖形元件“mouse”，繪制老鼠的卡通形象，如圖7-52所示。圖7-49

圖7-50

圖7-51

圖7-52（5）新建圖形元件“cat”，繪制小貓睡覺的圖形，如圖7-53所示。（6）在“floor”圖層上新建一個圖層“mouse1”，在時間軸第5幀按F6鍵插入關(guān)鍵幀，將“mouse”元件拖至“舞臺”并放置在洞口的位置，如圖7-54所示。（7）在“mouse1”圖層的第15幀和第30幀插入關(guān)鍵幀，將第5幀中“mouse”元件的透明度設(shè)為0。將第30幀中的“mouse”元件拖至洞外。在第5～15、第15～30幀創(chuàng)建傳統(tǒng)補間動畫，靜幀效果如圖7-55所示。

圖7-53

圖7-54

圖7-55（8）新建圖層“mouse2”“mouse3”，選中圖層“mouse1”的第5～30幀，用鼠標(biāo)右鍵單擊，在彈出的快捷菜單中選擇“復(fù)制幀”命令，分別在“mouse2”圖層的第30幀和“mouse3”圖層的第60幀執(zhí)行“粘貼幀”命令。（9）在圖層“mouse1”的第40幀、圖層“mouse2”的第70幀和圖層“mouse3”的第95幀插入關(guān)鍵幀，分別將“mouse”元件拖至“舞臺”以外的下方、右方和左方。（10）新建圖層“cat”，將圖形元件“cat”拖至舞臺，新建圖形元件“Z”，如圖7-56所示，插入3個關(guān)鍵幀，使3個“Z”依次出現(xiàn)，制作打鼾效果?！癦”元件的時間軸如圖7-57所示。圖7-56

圖7-57（11）新建圖層“sound”，導(dǎo)入小貓打呼的聲音文件，在“屬性”面板上將聲音的“同步”屬性設(shè)為“事件”“循環(huán)”，在最后一幀插入空白關(guān)鍵幀，按F9鍵，在“動作”面板上輸入語句“stop();”。（12）測試影片，最終效果如圖7-58所示。圖7-587.4.1實訓(xùn)概述1．動畫的制作目的與設(shè)計理念

制作本實訓(xùn)的目的在于熟悉制作動畫片的邏輯過程，先設(shè)計情節(jié)和劇情，然后按照分鏡頭制作，整個動畫片由若干影片剪輯元件構(gòu)成，最終場景的合成是由一個個影片剪輯元件放置在時間軸的合適位置上構(gòu)成的。實訓(xùn)內(nèi)容是制作一個搭配音樂的動畫片，通過一個個浪漫的情節(jié)表現(xiàn)出青年男女之間純真的愛。動畫靜幀效果如圖7-59所示。7.4實訓(xùn)任務(wù)——制作“簡單愛”動畫圖7-592．動畫整體風(fēng)格設(shè)計

本實訓(xùn)選取“包子”為主人翁，充滿童話風(fēng)格，并且大大簡化了角色設(shè)計。動畫的整體風(fēng)格生動活潑，搭配清新的歌曲，體現(xiàn)了“青年男女之間純真的愛”的主題。本實訓(xùn)設(shè)計了故事前奏和12個情節(jié)構(gòu)成動畫整體。3．素材收集與處理

收集色彩明亮的河邊、草地、棒球等背景圖片，收集歌曲作為聲音素材，收集（元件素材多采用手繪完成）。（1）按分鏡頭制作動畫。（2）將分鏡頭情節(jié)完全放入影片剪輯元件中。（3）制作同一角色的不同動作。（4）元件和多種補間動畫的搭配使用。（5）使用逐幀動畫制作所需效果。（6）情節(jié)的連續(xù)和分鏡頭的承接技巧。7.4.2實訓(xùn)要點圖7-60第一部分：前期設(shè)定（1）新建一個文檔，導(dǎo)入聲音文件“背景音樂”，將聲音的“同步”屬性設(shè)為“數(shù)據(jù)流”，如圖7-60所示。（2）按Enter鍵播放聲音，確定歌曲唱完一段的幀數(shù)，單擊“屬性”面板上的“編輯”按鈕，編輯聲音并設(shè)置聲音的淡入淡出效果，如圖7-61和圖7-62所示。7.4.3實訓(xùn)步驟圖7-61

圖7-62第二部分：繪制主角圖7-63

圖7-64

圖7-65

圖7-66圖7-67

圖7-68

圖7-69

圖7-70圖7-71

圖7-72第三部分：制作情節(jié)1．制作前奏（1）制作開場白

圖7-73

圖7-74（2）制作搶奶瓶動畫圖7-75圖7-76

圖7-77（3）制作搶漫畫書動畫（4）制作前奏結(jié)束動畫圖7-78

圖7-792．按照分鏡頭制作動畫（1）第一分鏡頭情節(jié)

男孩和女孩相約到河邊，男孩先到河邊，邊等候邊看風(fēng)景，女孩來了慢慢地走到男孩身后，卻害羞地垂下臉，不知怎么開口叫他。圖7-80（2）第二分鏡頭情節(jié)

男孩轉(zhuǎn)身去追女孩，正在找不到女孩時，女孩突然蹦出來親了男孩一口，男孩受驚轉(zhuǎn)身就跑，女孩在后面追。（3）第三分鏡情節(jié)

男孩和女孩追逐著跑過草地，來到河邊停了下來，隔壁鄰居在旁觀看。

圖7-81

圖7-82（4）第四分鏡情節(jié)

互相深情款款地對視，愛意在男孩和女孩之間傳送。（5）第五分鏡情節(jié)

男孩和女孩由對視到牽手。圖7-83