Animate動(dòng)畫設(shè)計(jì)與制作實(shí)例教程（Animate CC 2019） 課件 項(xiàng)目7、8 制作動(dòng)畫片、制作游戲

Animate動(dòng)畫設(shè)計(jì)與制作實(shí)例教程

（AnimateCC2019）項(xiàng)目七

制作動(dòng)畫片項(xiàng)目簡(jiǎn)介

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

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

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

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

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

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

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

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

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

圖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組合鍵打開“庫(kù)”面板，選中“1”元件，用鼠標(biāo)右鍵單擊，在彈出的快捷菜單中選擇“直接復(fù)制”命令，彈出“直接復(fù)制元件”對(duì)話框，修改文件名為“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)入新建影片剪輯元件的編輯窗口，從“庫(kù)”面板中將“1”元件拖到如圖7-20所示的位置。圖7-18

圖7-19

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

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

實(shí)例由3個(gè)場(chǎng)景構(gòu)成，按照?qǐng)鼍翱煞譃?部分設(shè)計(jì)。第一部分為L(zhǎng)oading頁(yè)面，第二部分為字幕，第三部分為故事情節(jié)：一只小花貓?jiān)诶鲜蠖纯诘壤鲜蟪鰜淼鹊盟?，小老鼠們聽到貓的鼾聲，紛紛跑了出來?.3.3相關(guān)知識(shí)和技能點(diǎn)（1）設(shè)計(jì)Loading、text和maohelaoshu共3個(gè)場(chǎng)景，場(chǎng)景之間采用按鈕連接，本實(shí)例故事情節(jié)的實(shí)現(xiàn)是循環(huán)播放最后一個(gè)場(chǎng)景maohelaoshu，貓不斷地打鼾，老鼠不斷地跑出來。（2）使用各種元件，并通過實(shí)例練習(xí)去了解元件的應(yīng)用：場(chǎng)景的連接使用按鈕元件，角色——貓和老鼠采用圖形元件，貓打鼾的“Z”圖形是影片剪輯元件。1．制作Loading頁(yè)面

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

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

圖7-33

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

圖7-36

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

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

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

圖7-44

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

圖7-46

圖7-47

圖7-483．制作故事情節(jié)（1）新建“場(chǎng)景3”，更名為“maohelaoshu”。繪制一個(gè)矩形框，填充背景顏色為#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”圖層上新建一個(gè)圖層“mouse1”，在時(shí)間軸第5幀按F6鍵插入關(guān)鍵幀，將“mouse”元件拖至“舞臺(tái)”并放置在洞口的位置，如圖7-54所示。（7）在“mouse1”圖層的第15幀和第30幀插入關(guān)鍵幀，將第5幀中“mouse”元件的透明度設(shè)為0。將第30幀中的“mouse”元件拖至洞外。在第5～15、第15～30幀創(chuàng)建傳統(tǒng)補(bǔ)間動(dò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”元件拖至“舞臺(tái)”以外的下方、右方和左方。（10）新建圖層“cat”，將圖形元件“cat”拖至舞臺(tái)，新建圖形元件“Z”，如圖7-56所示，插入3個(gè)關(guān)鍵幀，使3個(gè)“Z”依次出現(xiàn)，制作打鼾效果?！癦”元件的時(shí)間軸如圖7-57所示。圖7-56

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

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

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

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

圖7-73

圖7-74（2）制作搶奶瓶動(dòng)畫圖7-75圖7-76

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

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

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

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

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

圖7-81

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

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

男孩和女孩由對(duì)視到牽手。圖7-83

圖7-84（6）第六分鏡情節(jié)

天色漸漸變暗，男孩和女孩手牽手回家。（7）第七分鏡情節(jié)

男孩和女孩隨著云彩反復(fù)上下飄動(dòng)。圖7-85

圖7-86

圖7-87（8）第八分鏡情節(jié)

男孩騎著單車載著女孩向前駛?cè)?，去看棒球比賽。?）第九分鏡情節(jié)

棒球比賽非常精彩，看完球賽兩人拉著手邊唱歌邊走。圖7-88

圖7-89（10）第十分鏡情節(jié)

兩人手牽著手轉(zhuǎn)圈。

圖7-90（11）第十一分鏡情節(jié)

女孩走累了，讓男孩背著她，女孩伏在男孩肩上貌似睡著了，男孩小聲說了句“我愛你”，沒想到女孩卻聽到了，男孩的臉紅了。3．最終合成圖7-91

圖7-927.5評(píng)價(jià)考核能力類型考

核

內(nèi)

容評(píng)

價(jià)學(xué)

習(xí)

目

標(biāo)評(píng)

價(jià)

項(xiàng)

目321職業(yè)能力掌握使用Animate繪制圖形、編輯圖形的方法和技能；掌握動(dòng)畫片分鏡頭設(shè)計(jì)方法；會(huì)使用“代碼片段”面板和模板能夠熟練使用Animate繪圖

能夠靈活運(yùn)用場(chǎng)景和元件

能夠使用“代碼片段”面板

能夠使用模板

能夠使用Animate設(shè)計(jì)制作動(dòng)畫片

通用能力造型能力

審美能力

組織能力

解決問題能力

自主學(xué)習(xí)能力

創(chuàng)新能力

綜合評(píng)價(jià)

項(xiàng)目七任務(wù)評(píng)價(jià)考核表7.6.1參考制作效果

本例的靜幀效果如圖7-93所示。7.6課外拓展——制作“親吻豬”動(dòng)畫圖7-937.6.2知識(shí)要點(diǎn)（1）使用傳統(tǒng)補(bǔ)間動(dòng)畫制作小豬的位置變化。（2）使用形狀補(bǔ)間動(dòng)畫制作中心的變化。7.6.3參考制作過程Animate動(dòng)畫設(shè)計(jì)與制作實(shí)例教程

（AnimateCC2019）項(xiàng)目八

制作游戲項(xiàng)目簡(jiǎn)介

使用Animate制作的游戲以其小巧靈活、老少皆宜的特性，獲得了很多人的青睞。

本項(xiàng)目主要介紹AnimateCC2019“動(dòng)作”面板的組成及使用、ActionScript3.0基礎(chǔ)、事件和事件處理函數(shù)、時(shí)間軸控制函數(shù)和程序的3種基本結(jié)構(gòu)。通過幾個(gè)應(yīng)用范例，講解AnimateCC2019

在游戲制作中的應(yīng)用。通過本項(xiàng)目的學(xué)習(xí)，讀者可以掌握“動(dòng)作”面板、MouseEvent.事件和時(shí)間軸的使用方法和技能，掌握用Animate進(jìn)行游戲制作的方法和技巧。學(xué)習(xí)目標(biāo)了解ActionScript3.0基礎(chǔ)知識(shí)；掌握“石頭剪刀布”游戲的制作方法；掌握拼圖游戲的制作方法；掌握填色游戲的制作方法。8.1.1ActionScript3.0概述1．“動(dòng)作”面板概述

“動(dòng)作”面板是Animate程序編輯環(huán)境。使用該面板可以開發(fā)與編輯用于FlashPlayer或AIR的ActionScript腳本程序，也可開發(fā)和編輯用于HTML5Canvas文檔的JavaScript程序，這里主要介紹ActionScript腳本語(yǔ)言。在Animate中，ActionScript3.0有兩種編寫方法，一種是在時(shí)間軸的幀上編寫，另一種是在AS文件中編寫。

啟動(dòng)AnimateCC2019，執(zhí)行“窗口”>“動(dòng)作”命令或按F9鍵打開“動(dòng)作”面板，如圖8-1所示。8.1知識(shí)準(zhǔn)備——ActionScript3.0基礎(chǔ)圖8-1

“動(dòng)作”面板由以下幾部分組成。◎腳本窗口：提供了必要的代碼編輯工具，用來編輯腳本?！蚰_本選項(xiàng)：“動(dòng)作”面板右上角有各種查找、替換和插入代碼的選項(xiàng)，還有一個(gè)“使用向?qū)砑印钡陌粹o，是一個(gè)簡(jiǎn)單易用的代碼自動(dòng)生成向?qū)В捎糜贖TML5畫布文件類型。◎腳本導(dǎo)航器：用于查找代碼所處的位置，Animate將代碼存放在時(shí)間軸的關(guān)鍵幀上，可在多個(gè)時(shí)間軸和關(guān)鍵幀上直接切換導(dǎo)航。2．編程要素（1）數(shù)據(jù)類型

簡(jiǎn)單數(shù)據(jù)類型：Boolean（布爾）、int（有符號(hào)整型）、Number（浮點(diǎn)）、String（字符串）、uint（無符號(hào)整型）。

復(fù)雜數(shù)據(jù)類型：Array（數(shù)組）、Date（日期）、Error（異常）、Function（函數(shù)）、RegExp（正則表達(dá)）。（2）運(yùn)算符和表達(dá)式

運(yùn)算符是用于對(duì)表達(dá)式中各個(gè)運(yùn)算量進(jìn)行各種運(yùn)算的符號(hào)。通過運(yùn)算符可以對(duì)一個(gè)或多個(gè)值計(jì)算新值。Animate提供的運(yùn)算符主要有以下幾種?！蚝缶Y：x++、x--?！蛞辉?+x、--x、+、-、～、!、delete、typeof、void?！虺顺ǎ?、/、%?！蚣訙p法：+、-。◎按位移位：<<、>>、>>>?！蜿P(guān)系：<、>、<=、>=、asininstanceof、is。◎等于：==、!=、===、!==。◎按位“與”：&?！虬次弧爱惢颉保篰。◎按位“或”：|。◎邏輯“與”：&&?！蜻壿嫛盎颉保簗|?！驐l件：?:。◎賦值：=、*=、/=、%=、+=、-=、<<=、>>=、>>>=、&=、^=、|=?！蚨禾?hào)：。

表達(dá)式是由常量、變量、函數(shù)及運(yùn)算符按照運(yùn)算法則組成的計(jì)算式。（3）對(duì)象

客觀世界中的任何一個(gè)事物都可以看成是一個(gè)對(duì)象。在Animate中，每一個(gè)可以訪問的目標(biāo)都是一個(gè)對(duì)象，如“舞臺(tái)”中的圖形、按鈕、影片剪輯等。（4）類

類是一批對(duì)象的共同特征（稱為“屬性”）和共同行為（稱為“方法”）的描述。類是對(duì)象的抽象。一般也把對(duì)象稱為類的實(shí)例。（5）屬性

類的屬性是指類中對(duì)象共有的特性和特征。例如，影片剪輯（MovieClip）類的屬性有：寬度（width）、高度（height）、位置（x,y）、透明度（alpha）、旋轉(zhuǎn)度（rotation）等。（6）方法

類的方法是指可以由類中所有對(duì)象執(zhí)行的操作。一般由系統(tǒng)內(nèi)已經(jīng)定義好的一段有特定功能的代碼來實(shí)現(xiàn)，可以在需要時(shí)直接調(diào)用這樣的方法。例如，play()就是影片剪輯的方法。（7）變量

變量是指程序運(yùn)行中可以改變的量。變量由兩部分構(gòu)成：變量名和變量的值。

變量的相關(guān)語(yǔ)法如下?！蚵暶髯兞浚簐ari;◎?qū)⒆兞颗c一個(gè)數(shù)據(jù)類型相關(guān)聯(lián)：vari:int;◎?yàn)樽兞抠x值：vari:int;i=20;◎在聲明變量的同時(shí)為變量賦值：vari:int=20（8）函數(shù)

函數(shù)是用來對(duì)常量、變量等進(jìn)行某種運(yùn)算的程序代碼。這些代碼在程序中可重復(fù)使用。在編程時(shí)可以將需要處理的值或?qū)ο笸ㄟ^參數(shù)的形式傳遞給函數(shù)，該函數(shù)將對(duì)這些值執(zhí)行運(yùn)算后返回結(jié)果。

定義函數(shù)的一般形式如下。

function

函數(shù)名稱(參數(shù)1,參數(shù)2,……,參數(shù)n)

{

//

函數(shù)的程序代碼

}

3．ActionScript的語(yǔ)法規(guī)則

編寫ActionScript腳本時(shí)應(yīng)遵循以下語(yǔ)法規(guī)則?！蛴冒虢欠痔?hào)（;）作為一個(gè)語(yǔ)句的結(jié)束標(biāo)志?！蛴脠A括號(hào)()來放置函數(shù)中的相關(guān)參數(shù)，在定義函數(shù)時(shí)要將所有參數(shù)都放在圓括號(hào)中?！蛴么罄ㄌ?hào){}將語(yǔ)句組合在一起，形成邏輯上的一個(gè)程序塊。注意括號(hào)使用時(shí)要匹配?！蛴命c(diǎn)標(biāo)記（.）指出一個(gè)對(duì)象的屬性、特性或方法，或用于指示一個(gè)對(duì)象的目標(biāo)路徑。◎注釋：?jiǎn)涡凶⑨?，在一行中的任意位置放置兩個(gè)斜杠來指定單行注釋。程序?qū)⒑雎孕备芎笾钡皆撔心┪驳乃袃?nèi)容。多行注釋，多行注釋包括一個(gè)開始注釋標(biāo)記（/*）、注釋內(nèi)容和一個(gè)結(jié)束注釋標(biāo)記（*/）。無論注釋跨多少行，程序都將忽略開始標(biāo)記與結(jié)束標(biāo)記之間的所有內(nèi)容。◎關(guān)鍵字：是ActionScript中有特殊用途的保留字。不能使用關(guān)鍵字作為函數(shù)名、變量名和標(biāo)識(shí)符?！騾^(qū)分大小寫。1．常見事件類型（1）鼠標(biāo)事件

MouseEvent類定義了10種常見的鼠標(biāo)事件，具體如下?！駽LICK：定義鼠標(biāo)單擊事件?！駾OUBLE_CLICK：定義鼠標(biāo)雙擊事件。◎MOUSE_DOWN：定義鼠標(biāo)按鍵按下事件?！騇OUSE_MOVE：定義鼠標(biāo)指針移動(dòng)事件。8.1.2ActionScript3.0的事件處理◎MOUSE_OUT：定義鼠標(biāo)指針移出事件?！騇OUSE_OVER：定義鼠標(biāo)指針移過事件?！騇OUSE_UP：定義鼠標(biāo)按鍵松開事件?！騇OUSE_WHEEL：定義鼠標(biāo)滾輪滾動(dòng)觸發(fā)事件?！騌OLL_OUT：定義鼠標(biāo)指針滑入事件?！騌OLL_OVER：定義鼠標(biāo)指針滑出事件。（2）鍵盤事件◎KeyboardEvent.KEY_DOWN：定義按下鍵盤按鍵時(shí)事件。◎KeyboardEvent.KEY_UP：定義松開鍵盤按鍵時(shí)事件。（3）幀循環(huán)事件

幀循環(huán)事件是ActionScript3.0中動(dòng)畫編程的核心事件。該事件能夠控制代碼跟隨Animate的幀頻播放，在每次刷新屏幕時(shí)改變顯示對(duì)象。使用該事件時(shí)，需要把該事件代碼寫入事件偵聽函數(shù)中，然后在每次刷新屏幕時(shí)，都會(huì)調(diào)用Event.ENTER_FRAME事件，從而實(shí)現(xiàn)動(dòng)畫效果。2．事件偵聽器

ActionScript3.0中的事件偵聽器也就是以前版本中的事件處理函數(shù)，是事件的處理者，負(fù)責(zé)接收事件攜帶的信息，并在接收到該事件之后執(zhí)行事件處理函數(shù)體內(nèi)的代碼。

添加事件偵聽的過程分為兩步：第一步是創(chuàng)建一個(gè)事件偵聽函數(shù)第二步是使用addEvenListener()方法在事件目標(biāo)或者任何顯示對(duì)象上注冊(cè)偵聽器函數(shù)

ActionScript3.0中控制影片剪輯播放的常用方法如下。（1）停止方法stop()：停止正在播放的動(dòng)畫。此方法沒有參數(shù)。（2）播放方法play()：當(dāng)動(dòng)畫被停止播放之后，使用play()方法使動(dòng)畫繼續(xù)播放。此方法沒有參數(shù)。（3）停止播放聲音方法stopAllSounds()：在不停止播放頭的情況下停止SWF文件中當(dāng)前正在播放的所有聲音。此方法沒有參數(shù)。（4）跳轉(zhuǎn)播放方法gotoAndPlay。8.1.3控制影片剪輯播放的方法（5）跳轉(zhuǎn)停止方法gotoAndStop：與跳轉(zhuǎn)播放方法類似，跳轉(zhuǎn)到指定幀停止。（6）跳轉(zhuǎn)到下一幀方法nextFrame()：將播放頭轉(zhuǎn)到下一幀并停止。如果當(dāng)前幀為最后一幀，則播放頭不移動(dòng)。無參數(shù)。（7）跳轉(zhuǎn)到上一幀方法prevFrame()：將播放頭轉(zhuǎn)到前一幀并停止。如果當(dāng)前幀為第一幀，則播放頭不移動(dòng)。無參數(shù)。（8）跳轉(zhuǎn)到下一場(chǎng)景方法nextScene()：將播放頭移到下一場(chǎng)景的第1幀并停止。無參數(shù)。1．順序結(jié)構(gòu)

按照語(yǔ)句的順序逐句執(zhí)行，只執(zhí)行一次。2．選擇結(jié)構(gòu)

用if語(yǔ)句實(shí)現(xiàn)，可以是函數(shù)嵌套，只執(zhí)行程序的某一個(gè)分支。3．循環(huán)結(jié)構(gòu)

可實(shí)現(xiàn)程序塊的循環(huán)，循環(huán)的次數(shù)不定。用while、do…while、for語(yǔ)句實(shí)現(xiàn)。8.1.4程序結(jié)構(gòu)8.2.1案例效果分析

本案例設(shè)計(jì)的是“石頭剪刀布”游戲。作為玩家，用戶可以單擊“石頭”“剪刀”“布”按鈕中的任一個(gè)，在玩家和電腦中有伸手的動(dòng)作，玩家出的是玩家單擊的按鈕，而電腦是隨機(jī)出的。會(huì)顯示當(dāng)前是第幾局，玩家贏了幾局，電腦贏了幾局，平局?jǐn)?shù)是幾。當(dāng)玩夠30局后，游戲跳到另一個(gè)界面，顯示你贏了或者你輸了，可以單擊“重玩”按鈕重新開始游戲。運(yùn)行中的某個(gè)畫面如圖8-8所示。8.2任務(wù)一——制作“石頭剪刀布”游戲圖8-88.2.2設(shè)計(jì)思路（1）制作“石頭”“剪刀”“布”元件及對(duì)應(yīng)的按鈕元件。（2）用一個(gè)影片剪輯元件實(shí)現(xiàn)猜拳的3種動(dòng)作。（3）用動(dòng)態(tài)文本實(shí)現(xiàn)計(jì)數(shù)，用if函數(shù)判斷電腦實(shí)例顯示石頭、剪刀或布。8.2.3相關(guān)知識(shí)和技能點(diǎn)（1）特殊字體的使用。（2）動(dòng)態(tài)文本的使用。（3）if函數(shù)、gotoAndStop()語(yǔ)句的使用。（1）新建一個(gè)尺寸為400像素×300像素的Animate文件（選擇ActionScript3.0）。（2）新建圖形元件“布”，在元件的編輯窗口，選擇布的圖形放入到元件中，如圖8-9所示。（3）新建圖形元件“剪刀”，選擇剪刀的圖形放入到元件中，如圖8-10所示。（4）新建圖形元件“石頭”，選擇石頭的圖形放入到元件中，如圖8-11所示。8.2.4任務(wù)實(shí)施圖8-9

圖8-10

圖8-11（5）新建影片剪輯“石頭剪刀布”，進(jìn)入元件的編輯窗口，在第4幀插入空白關(guān)鍵幀，添加代碼“stop();”。在第5幀插入空白關(guān)鍵幀，在“屬性”面板中設(shè)置幀標(biāo)簽“a”，如圖8-12所示。（6）在第7幀插入空白關(guān)鍵幀，將“石頭”元件拖至“舞臺(tái)”。在第11幀插入關(guān)鍵幀，將該幀中的“石頭”向左移動(dòng)一段距離。在此幀上添加代碼“stop();”。將第5～11幀選中，進(jìn)行“復(fù)制幀”操作，在第20幀和第40幀各執(zhí)行一次“粘貼幀”操作，將第20幀的幀標(biāo)簽改為“b”，將第40幀的幀標(biāo)簽改為“c”。用鼠標(biāo)右鍵單擊第22幀中的“石頭”，在彈出的快捷菜單中選擇“交換元件”命令。在“交換元件”對(duì)話框中選擇“剪刀”圖形元件，單擊“確定”按鈕或按Enter鍵；對(duì)第26幀（交換為剪刀）、第42幀（交換為布）和第46幀（交換為布）中的元件進(jìn)行交換元件操作。完成的時(shí)間軸如圖8-13所示。圖8-12

圖8-13（7）新建按鈕元件“布1”，在“彈起”幀，將圖形元件“布”拖至“舞臺(tái)”，添加文字“布”；在“指針經(jīng)過”幀插入關(guān)鍵幀，更改圖形大小；在“點(diǎn)擊”幀插入關(guān)鍵幀后，繪制一個(gè)矩形，矩形的大小恰好能覆蓋手及文字。（8）用類似方法制作“剪刀1”和“石頭1”按鈕元件。（9）返回“場(chǎng)景1”，設(shè)置背景為灰色。在第2幀插入空白關(guān)鍵幀，繪制一個(gè)矩形，填充紅色，復(fù)制該矩形并移到右側(cè)，填充藍(lán)色。將3個(gè)按鈕拖至“舞臺(tái)”；輸入靜態(tài)文本“玩家”“電腦”“現(xiàn)在是第回合”“玩家贏：”“電腦贏：”“平局：”，效果如圖8-14所示。（10）在“現(xiàn)在是第回合”的空處，使用“文本”工具拖出一個(gè)矩形塊，在“屬性”面板中選擇“動(dòng)態(tài)文本”，并設(shè)置實(shí)例名稱為“sum_text”，如圖8-15所示。圖8-14

圖8-15（11）用類似方法，在“玩家贏：”后面添加動(dòng)態(tài)文本框，實(shí)例名稱為“w1_text”。在“電腦贏：”后面添加動(dòng)態(tài)文本框，實(shí)例名稱為“d1_text”。在“平局：”后面添加動(dòng)態(tài)文本框，實(shí)例名稱為“p1_text”。（12）從“庫(kù)”面板中將“石頭剪刀布”影片剪輯拖到藍(lán)色區(qū)域，使用“變形”工具旋轉(zhuǎn)?90°，添加實(shí)例名稱“mc_d”。復(fù)制該影片剪輯實(shí)例，移到紅色矩形中，改變實(shí)例名稱為“mc_w”，并使用“變形”工具，進(jìn)行水平翻轉(zhuǎn)。使用“對(duì)齊”面板使“mc_d”“mc_w”處于同一水平線上。（13）新建“圖層3”，第2幀插入空白關(guān)鍵幀，添加“剪刀”的動(dòng)作代碼，“動(dòng)作”面板如圖8-16所示。在“圖層3”中的第2幀添加的“石頭”的代碼如圖8-17所示。圖8-16

圖8-17（14）在“圖層3”中的第2幀添加“布”按鈕的代碼，與剪刀、石頭的代碼類似。（15）在第1幀添加動(dòng)作代碼“varw1:int=0;varp1:int=0;vard1:int=0;varsum:int=0;”，在第2幀添加動(dòng)作代碼“stop();”，在后面10幀插入空白關(guān)鍵幀，添加幀標(biāo)簽“wy”，在該幀的“舞臺(tái)”中輸入“恭喜！你贏了！”，并添加一個(gè)“重玩”按鈕，實(shí)例名稱為yan。在新建“圖層3”的第10幀上添加代碼，如圖8-18所示。（16）測(cè)試影片，保存為“石頭剪刀布.fla”。圖8-188.3.1案例效果分析

本案例設(shè)計(jì)的是拼圖游戲，游戲規(guī)則是當(dāng)鼠標(biāo)指針在某個(gè)小圖片上時(shí)，按下鼠標(biāo)左鍵不松開進(jìn)行拖曳，該小圖片跟隨鼠標(biāo)指針移動(dòng)，當(dāng)移動(dòng)到小圖片的正確位置并松開鼠標(biāo)時(shí)，該圖片停留在正確位置，否則回到原來的位置。完成的效果截圖如圖8-19所示。8.3任務(wù)二——制作拼圖游戲圖8-198.3.2設(shè)計(jì)思路（1）將小圖片都轉(zhuǎn)化為元件，并重新排列好。（2）用按鈕記錄小圖片的正確位置。（3）為小圖片添加動(dòng)作，使小圖片到正確位置時(shí)停留，否則返回原位置。8.3.3相關(guān)知識(shí)和技能點(diǎn)（1）影片剪輯方法stopDrag()。（2）碰撞檢測(cè)方法hitTestPoint()、hitTestObject()。（3）“對(duì)齊”面板、查找與替換。（1）新建一個(gè)尺寸為640像素×480像素的Animate文件（選擇ActionScript3.0），“舞臺(tái)”背景色設(shè)置為#003300。（2）執(zhí)行“文件”>“導(dǎo)入”>“導(dǎo)入到庫(kù)”命令，將images文件夾中的所有圖片導(dǎo)入“庫(kù)”面板中。（3）按Ctrl+F8組合鍵，新建“影片剪輯”元件，名稱為“tu1”，從“庫(kù)”面板中將“pdsu-1.gif”拖至“舞臺(tái)”中，將它轉(zhuǎn)換為影片剪輯元件。（4）重復(fù)上一步的操作，把“pdsu-2.gif”轉(zhuǎn)換為“tu2”，“pdsu-3.gif”轉(zhuǎn)換為“tu3”…“pdsu-16.gif”轉(zhuǎn)換為“tu16”。（5）將“舞臺(tái)”中的16個(gè)影片剪輯打亂次序后，使用“對(duì)齊”面板排列，如圖8-20所示。將“圖層1”命名為“小圖形”，并鎖定。8.3.4任務(wù)實(shí)施圖8-20（6）在“庫(kù)”面板中，用鼠標(biāo)右鍵單擊“tu1”，選擇“直接復(fù)制”命令，在彈出的“直接復(fù)制元件”對(duì)話框中輸入名稱為“bt”，選擇類型為“按鈕”，單擊“確定”按鈕，這時(shí)就有一個(gè)按鈕元件“bt”。在“庫(kù)”面板中雙擊“bt”按鈕圖標(biāo)，進(jìn)入按鈕的編輯窗口。將“彈起”幀的內(nèi)容全選后，執(zhí)行“修改”>“分離”命令（或按Ctrl+B組合鍵）把圖像打散，使用“墨水瓶”工具給它添加黑色邊框后，將填充刪除，只留邊框。在“點(diǎn)擊”幀插入關(guān)鍵幀，并填充漸變色，效果如圖8-21所示。圖8-21（7）返回“場(chǎng)景1”。新建一個(gè)圖層，將該圖層拖到“圖形”層的下面。將按鈕“bt”拖至“舞臺(tái)”中，選擇該按鈕，按Alt鍵拖動(dòng)按鈕“bt”橫向復(fù)制4個(gè)，再選中這4個(gè)按鈕縱向復(fù)制4排，如圖8-22所示。對(duì)按鈕按先行后列的順序?qū)?shí)例命名為“bt1”…“bt16”，如圖8-23所示。將該層命名為“按鈕”并