AnimateCC平面動畫設(shè)計與制作案例教程 課件 第5章 游戲制作

第5章游戲制作教學(xué)提示教學(xué)重點與難點教學(xué)內(nèi)容本章小結(jié)第5章游戲制作教學(xué)提示

本章主要通過“貓鼠游戲”、“飄雪動畫”、“猴子看香蕉”和“花瓣動畫”4個導(dǎo)入案例來講解使用ActionScript3.0動作腳本制作交互動畫的方法與技巧。最后通過“打飛機(jī)游戲”綜合項目介紹制作游戲類AnimateCC作品的相關(guān)知識技能。第5章游戲制作教學(xué)重點與難點

ActionScript3.0編程的基礎(chǔ)知識，時間軸控制函數(shù)，隨機(jī)函數(shù)，影片剪輯屬性及控制函數(shù)，影片剪輯的復(fù)制、拖放與移除，鼠標(biāo)控制方法，if語句，for語句的使用。第5章游戲制作教學(xué)內(nèi)容5.1概述5.2“貓鼠游戲”案例5.3“飄雪動畫”案例5.4“猴子看香蕉”案例5.5“花瓣動畫”案例5.6“打飛機(jī)游戲”案例5.1概述一、動作腳本概述ActionScript動作腳本分為ActionScript1.0（以下簡稱AS1）、ActionScript2.0（以下簡稱AS2）和ActionScript3.0（以下簡稱AS3）。1.1概述二、“動作”面板介紹第5章游戲制作教學(xué)內(nèi)容5.1概述5.2“貓鼠游戲”案例5.3“飄雪動畫”案例5.4“猴子看香蕉”案例5.5“花瓣動畫”案例5.6“打飛機(jī)游戲”案例5.2“貓鼠游戲”案例本節(jié)內(nèi)容1.案例效果2.操作步驟3.技術(shù)要點4.練習(xí)5.2“貓鼠游戲”案例一、案例效果

重點與難點：ActionScript3.0動作腳本的應(yīng)用技巧，ActionScript3.0事件機(jī)制及鼠標(biāo)單擊事件的偵聽，時間軸控制函數(shù)的使用。5.2“貓鼠游戲”案例二、操作步驟1.導(dǎo)入素材圖片,2.新建“鼠”按鈕元件3.背景設(shè)置注意：GIF格式的圖片導(dǎo)入到AnimateCC2018庫里后，軟件會將GIF圖片的每一幀都單獨保存為圖片，放在庫里并生成一個和素材同名的文件夾，并自動創(chuàng)建一個和GIF動畫等效的影片剪輯。5.2“貓鼠游戲”案例二、操作步驟4.制作“貓”、“老鼠”動畫,5.插入幀動畫第1幀：stop();第40幀：gotoAndStop（1）;5.2“貓鼠游戲”案例二、操作步驟6.修改“鼠”按鈕，設(shè)置實例名為“mouseBtn”7.修改第1幀的代碼，如下：8.測試發(fā)布影片5.2“貓鼠游戲”案例三、技術(shù)要點1.ActionScript3.0除了單獨編寫AS文件以外，只能將動作腳本添加到關(guān)鍵幀上。注意：只能為主時間軸或影片剪輯內(nèi)的關(guān)鍵幀添加動作腳本，不能為圖形元件和按鈕元件內(nèi)的關(guān)鍵幀添加。5.2“貓鼠游戲”案例三、技術(shù)要點2.按鈕或者影片剪輯等元件響應(yīng)鼠標(biāo)單擊事件。AS3的事件處理只有一種寫法，格式如下：target.addEventListener(event,handle);上面“target”為要添加事件的對象的實例名（在屬性里設(shè)置），“event”表示要添加的事件名，handle表示事件觸發(fā)后執(zhí)行的句柄，通常我們會寫成匿名函數(shù)或者帶名字的函數(shù)。以下將演示一個實例名稱為demoBtn的按鈕的單擊事件，該按鈕單擊后，場景將跳轉(zhuǎn)到第5幀。(1)選中場景時間軸的任意關(guān)鍵幀，按【F9】，彈出腳本輸入框，輸入如下代碼：demoBtn.addEventListener(MouseEvent.CLICK,function(){ gotoAndStop(5);});5.2“貓鼠游戲”案例四、練習(xí)（1）Math.round的含義是什么？（2）給影片剪輯實例添加腳本時需要注意什么？（3）navigateToURL瀏覽器網(wǎng)絡(luò)函數(shù)有幾個參數(shù)？各參數(shù)的含義是什么？第5章游戲制作教學(xué)內(nèi)容5.1概述5.2“貓鼠游戲”案例5.3“飄雪動畫”案例5.4“猴子看香蕉”案例5.5“花瓣動畫”案例5.6“打飛機(jī)游戲”案例5.3“飄雪動畫”案例本節(jié)內(nèi)容1.案例效果2.操作步驟3.技術(shù)要點4.練習(xí)5.3“飄雪動畫”案例一、案例效果

重點與難點：隨機(jī)函數(shù)（Random），按幀頻執(zhí)行的事件（ENTER_FRAME事件），影片剪輯添加到舞臺（stage.addChild），條件語句（if…else）等的運用，以及對影片剪輯各種屬性的作用及設(shè)置方法的介紹。5.3“飄雪動畫”案例二、操作步驟1.制作“飄雪”影片剪輯

本元件分3層來制作：先制作出一朵雪花（“雪花”元件），再以雪花為元素制作出一朵飄落的雪花（“飄雪”元件），最后以飄落的雪花為元素制作出一片飄落的雪花（“落雪”元件）。

（1）制作“雪花”圖形元件

（2）制作“飄雪”影片剪輯注意：在第100幀的位置插入關(guān)鍵幀，點擊該關(guān)鍵幀，按【F9】彈出動作面板，輸入“stop();”（影片剪輯動畫停止）和“stage.removeChild(this);”（影片剪輯從舞臺移除）這兩行代碼。讓影片剪輯播放完畢后從舞臺移除避免資源的泄露引起動畫越放越卡頓。5.3“飄雪動畫”案例二、操作步驟2.制作主場景動畫（1）單擊圖標(biāo)，回到主場景中，將“圖層1”重命名為“背景”，從本案例對應(yīng)的素材文件夾中導(dǎo)入圖片“snowhouse.jpg”，調(diào)整其大小和位置，使其剛好覆蓋整個舞臺

（2）新建圖層，命名為“AS”。在第一幀中輸入腳本5.3“飄雪動畫”案例三、技術(shù)要點1.隨機(jī)函數(shù)的使用2.添加/移除影片剪輯3.影片剪輯屬性的設(shè)置4.條件結(jié)構(gòu)if語句的使用5.3“飄雪動畫”案例四、練習(xí)1.制作下雨效果的動畫提示：先畫一滴從下落再到散開的雨滴，然后持續(xù)不斷地將這個雨滴復(fù)制到畫面上，從而產(chǎn)生下雨的效果。第5章游戲制作教學(xué)內(nèi)容5.1概述5.2“貓鼠游戲”案例5.3“飄雪動畫”案例5.4“猴子看香蕉”案例5.5“花瓣動畫”案例5.6“打飛機(jī)游戲”案例5.4“猴子看香蕉”案例本節(jié)內(nèi)容1.案例效果2.操作步驟3.技術(shù)要點4.練習(xí)5.4“猴子看香蕉”案例一、案例效果1.本案例制作的是一只猴子很想吃香蕉，眼珠子一直跟著香蕉的位置移動而轉(zhuǎn)動的動畫，效果如圖。5.4“猴子看香蕉”案例一、操作步驟導(dǎo)入素材制作“香蕉”影片剪輯元件，執(zhí)行“修改”菜單下的“位圖”—“轉(zhuǎn)換位圖為矢量圖”命令并刪除香蕉背景5.4“猴子看香蕉”案例二、操作步驟4.同香蕉制作方法，制作猴子元件。5.4“猴子看香蕉”案例二、操作步驟5.制作猴子“眼睛”影片剪輯元件。CTRL+B打散“猴子”元件，然后利用橢圓工具繪制一個只有邊框50*50的橢圓，把橢圓放到打散的猴子眼睛處，然后把猴子眼睛單獨拖出到空白處，刪除猴子和橢圓，只留下眼睛，并將眼睛對齊到舞臺中央。利用刷子工具把眼珠部位刷成白色5.4“猴子看香蕉”案例二、操作步驟6.制作眼珠。在“眼睛”元件中，利用橢圓工具繪制一個填充顏色為#59181C的10*10的無邊框圓，并將這個圓轉(zhuǎn)換為影片剪輯元件“眼珠”。將“眼珠”元件放入到眼睛上原來眼珠的位置，給“眼珠”元件設(shè)置實例名為“eye”5.4“猴子看香蕉”案例二、操作步驟7.主場景設(shè)置，并發(fā)布測試。5.4“猴子看香蕉”案例三、技術(shù)要點1.影片剪輯的拖放操作。2.眼珠的旋轉(zhuǎn)范圍計算5.4“猴子看香蕉”案例四、練習(xí)1.用拖放函數(shù)設(shè)計制作一個包含9塊小圖片的拼圖游戲動畫。拼圖游戲的兩個畫面如圖。

第5章游戲制作教學(xué)內(nèi)容5.1概述5.2“貓鼠游戲”案例5.3“飄雪動畫”案例5.4“猴子看香蕉”案例5.5“花瓣動畫”案例5.6“打飛機(jī)游戲”案例5.5“花瓣動畫”案例本節(jié)內(nèi)容1.案例效果2.操作步驟3.技術(shù)要點4.練習(xí)5.5“花瓣動畫”案例一、案例效果1.本節(jié)為“花瓣動畫”案例，天空中飛舞著片片花瓣，當(dāng)單擊鼠標(biāo)左鍵后，花瓣就串成一串跟隨鼠標(biāo)運動，當(dāng)再單擊鼠標(biāo)左鍵時，花瓣又隨機(jī)分布在天空中，雙擊鼠標(biāo)花瓣就會隨機(jī)重新分布，效果如圖。

5.5“花瓣動畫”案例二、操作步驟1.導(dǎo)入背景圖片。2.制作所需元件。（1）線條工具（2）填充（3）旋轉(zhuǎn)復(fù)制

5.5“花瓣動畫”案例二、操作步驟3.制作花瓣旋轉(zhuǎn)的影片剪輯。

5.5“花瓣動畫”案例二、操作步驟4.主場景代碼。

5.5“花瓣動畫”案例三、技術(shù)要點1.循環(huán)結(jié)構(gòu)for的使用。2.鼠標(biāo)控制方法

5.5“花瓣動畫”案例四、練習(xí)1.設(shè)計一個loading動畫效果。2.試著做一個滿天星星的動畫，星星可以跟隨鼠標(biāo)指針運動，天上的星星為40顆，分布的坐標(biāo)范圍為橫坐標(biāo)0～800，縱坐標(biāo)為0～600，星星的大小和透明度不變

第5章游戲制作教學(xué)內(nèi)容5.1概述5.2“貓鼠游戲”案例5.3“飄雪動畫”案例5.4“猴子看香蕉”案例5.5“花瓣動畫”案例5.6“打飛機(jī)游戲”案例5.6“打飛機(jī)游戲”案例本節(jié)內(nèi)容1.案例效果2.操作步驟3.技術(shù)要點4.練習(xí)5.6“打飛機(jī)游戲”案例一、案例效果1.包括右下角的計時器功能，剩余時間為零時游戲結(jié)束，飛機(jī)都消失；左下角的分?jǐn)?shù)，打下一架飛機(jī)得一分；跟隨鼠標(biāo)移動的不是箭頭，而是一個靶子；當(dāng)點擊靶子打中一架飛機(jī)時，一架飛機(jī)爆炸墜落，飛機(jī)數(shù)量減少一架；舞臺上的飛機(jī)總數(shù)維持在一定數(shù)目。

5.6“打飛機(jī)游戲”案例二、操作步驟1.制作界面和文字動畫?！胺?jǐn)?shù)”后的動態(tài)文本的變量名為“scoreTxt”，“剩余時間”后的動態(tài)文本的變量名為“timeTxt”

5.6“打飛機(jī)游戲”案例二、操作步驟2.制作飛機(jī)、靶等相關(guān)元件。新建一個“靶”影片剪輯元件，在庫中右擊該元件，選擇屬性菜單，在屬性面板里設(shè)置類名為“mP”

5.6“打飛機(jī)游戲”案例二、操作步驟3.制作人作飛機(jī)按鈕元件。4.制作飛機(jī)飛行的動畫。

5.6“打飛機(jī)游戲”案例二、操作步驟5.制作“飛機(jī)被擊中”元件。新建“actions”圖層第10幀添加如圖5.70所示腳本，并命名“飛機(jī)被擊中”該元件的屬性中的“類”為mExp

5.6“打飛機(jī)游戲”案例二、操作步驟6.主場景設(shè)置。新建圖層，命名為“AS”，在“AS”圖層的第1、7幀分別命名幀名稱為“Start”，“ReStart”。在第1幀添加如圖。

5.6“打飛機(jī)游戲”案例三、技術(shù)要點1.AnimateCC游戲制作流程。2.全局變量與局部變量。3.事件調(diào)用者對象target和currentTarget的區(qū)別。4.增量運算符。

5.6