Animate動畫設(shè)計與制作實(shí)例教程（Animate CC 2019）項目八 制作游戲

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

（AnimateCC2019）項目八

制作游戲項目簡介

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

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

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

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

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

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

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

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

運(yùn)算符是用于對表達(dá)式中各個運(yùn)算量進(jìn)行各種運(yùn)算的符號。通過運(yùn)算符可以對一個或多個值計算新值。Animate提供的運(yùn)算符主要有以下幾種?！蚝缶Y：x++、x--?！蛞辉?+x、--x、+、-、～、!、delete、typeof、void。◎乘除法：*、/、%。◎加減法：+、-?！虬次灰莆唬?lt;<、>>、>>>?！蜿P(guān)系：<、>、<=、>=、asininstanceof、is?！虻扔冢?=、!=、===、!==?！虬次弧芭c”：&?！虬次弧爱惢颉保篰。◎按位“或”：|?！蜻壿嫛芭c”：&&?！蜻壿嫛盎颉保簗|。◎條件：?:?！蛸x值：=、*=、/=、%=、+=、-=、<<=、>>=、>>>=、&=、^=、|=?！蚨禾枺?。

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

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

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

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

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

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

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

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

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

function

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

{

//

函數(shù)的程序代碼

}

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

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

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

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

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

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

ActionScript3.0中控制影片剪輯播放的常用方法如下。（1）停止方法stop()：停止正在播放的動畫。此方法沒有參數(shù)。（2）播放方法play()：當(dāng)動畫被停止播放之后，使用play()方法使動畫繼續(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)前幀為最后一幀，則播放頭不移動。無參數(shù)。（7）跳轉(zhuǎn)到上一幀方法prevFrame()：將播放頭轉(zhuǎn)到前一幀并停止。如果當(dāng)前幀為第一幀，則播放頭不移動。無參數(shù)。（8）跳轉(zhuǎn)到下一場景方法nextScene()：將播放頭移到下一場景的第1幀并停止。無參數(shù)。1．順序結(jié)構(gòu)

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

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

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

本案例設(shè)計的是“石頭剪刀布”游戲。作為玩家，用戶可以單擊“石頭”“剪刀”“布”按鈕中的任一個，在玩家和電腦中有伸手的動作，玩家出的是玩家單擊的按鈕，而電腦是隨機(jī)出的。會顯示當(dāng)前是第幾局，玩家贏了幾局，電腦贏了幾局，平局?jǐn)?shù)是幾。當(dāng)玩夠30局后，游戲跳到另一個界面，顯示你贏了或者你輸了，可以單擊“重玩”按鈕重新開始游戲。運(yùn)行中的某個畫面如圖8-8所示。8.2任務(wù)一——制作“石頭剪刀布”游戲圖8-88.2.2設(shè)計思路（1）制作“石頭”“剪刀”“布”元件及對應(yīng)的按鈕元件。（2）用一個影片剪輯元件實(shí)現(xiàn)猜拳的3種動作。（3）用動態(tài)文本實(shí)現(xiàn)計數(shù)，用if函數(shù)判斷電腦實(shí)例顯示石頭、剪刀或布。8.2.3相關(guān)知識和技能點(diǎn)（1）特殊字體的使用。（2）動態(tài)文本的使用。（3）if函數(shù)、gotoAndStop()語句的使用。（1）新建一個尺寸為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)鍵幀，將“石頭”元件拖至“舞臺”。在第11幀插入關(guān)鍵幀，將該幀中的“石頭”向左移動一段距離。在此幀上添加代碼“stop();”。將第5～11幀選中，進(jìn)行“復(fù)制幀”操作，在第20幀和第40幀各執(zhí)行一次“粘貼幀”操作，將第20幀的幀標(biāo)簽改為“b”，將第40幀的幀標(biāo)簽改為“c”。用鼠標(biāo)右鍵單擊第22幀中的“石頭”，在彈出的快捷菜單中選擇“交換元件”命令。在“交換元件”對話框中選擇“剪刀”圖形元件，單擊“確定”按鈕或按Enter鍵；對第26幀（交換為剪刀）、第42幀（交換為布）和第46幀（交換為布）中的元件進(jìn)行交換元件操作。完成的時間軸如圖8-13所示。圖8-12

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

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

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

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

圖8-22

圖8-23（8）新建一個圖層，命名為“參考圖”，將該圖層拖到“按鈕”層的下面。將“未標(biāo)題-1.jpg”文件導(dǎo)入“庫”面板，將之拖至“參考圖”層，轉(zhuǎn)換為圖形元件，位置和“按鈕”層的按鈕相同，如圖8-24所示。在“屬性”面板，設(shè)置其“樣式”為“Alpha”，“Alpha”為15%，如圖8-25所示。

圖8-24

圖8-25（9）新建一個圖層，命名為“文字”，使用“文本”工具在圖片的上方空白處輸入文字“拼圖游戲”，設(shè)置文字格式為微軟雅黑、80、粗體，顏色為#8D030B，將庫中“pds.png”拖入“舞臺”，并使用“文本工具”在圖片下方空白處輸入“原圖”，設(shè)置文字大小為20，其他不變。為了突出顯示標(biāo)題，使用“線條工具”在標(biāo)題下畫一條直線，“顏色”設(shè)置為#999999，“筆觸”大小設(shè)置為5，效果如圖8-26所示。圖8-26（10）在“屬性”面板（見圖8-27）單擊“濾鏡”選項按鈕，選擇“投影”選項，將陰影顏色設(shè)為#666666，選擇“發(fā)光”選項，將發(fā)光顏色設(shè)為#333333，如圖8-28所示，鎖定該層。圖8-27

圖8-28（11）將“小圖形”層解鎖，新建圖層并重命名為“as”。選擇第1幀，打開“動作”面板，輸入圖8-29所示的代碼。（12）將圖8-29所示代碼（除了vara:int=0;）全選后復(fù)制，在“動作”面板的下面進(jìn)行粘貼，然后將tu16全部改為tu15，bt16全部改為bt15即可。（13）用類似方法，為所有小圖形影片剪輯（一直到tu1）都添加代碼。測試影片后保存為“拼圖游戲.fla”。圖8-29

圖8-308.4.1實(shí)訓(xùn)概述1．動畫的制作效果與設(shè)計理念

本實(shí)訓(xùn)制作的填色游戲，玩家能夠選擇顏色填充和重新填色，參考效果如圖8