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

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)。通過(guò)幾個(gè)應(yīng)用范例，講解AnimateCC2019

在游戲制作中的應(yīng)用。通過(guò)本項(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)境。使用該面板可以開(kāi)發(fā)與編輯用于FlashPlayer或AIR的ActionScript腳本程序，也可開(kāi)發(fā)和編輯用于HTML5Canvas文檔的JavaScript程序，這里主要介紹ActionScript腳本語(yǔ)言。在Animate中，ActionScript3.0有兩種編寫方法，一種是在時(shí)間軸的幀上編寫，另一種是在AS文件中編寫。

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

“動(dòng)作”面板由以下幾部分組成?！蚰_本窗口：提供了必要的代碼編輯工具，用來(lái)編輯腳本。◎腳本選項(xiàng)：“動(dòng)作”面板右上角有各種查找、替換和插入代碼的選項(xiàng)，還有一個(gè)“使用向?qū)砑印钡陌粹o，是一個(gè)簡(jiǎn)單易用的代碼自動(dòng)生成向?qū)?，可用于HTML5畫布文件類型?！蚰_本導(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（無(wú)符號(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)。通過(guò)運(yùn)算符可以對(duì)一個(gè)或多個(gè)值計(jì)算新值。Animate提供的運(yùn)算符主要有以下幾種。◎后綴：x++、x--?！蛞辉?+x、--x、+、-、～、!、delete、typeof、void?！虺顺ǎ?、/、%?！蚣訙p法：+、-?！虬次灰莆唬?lt;<、>>、>>>?！蜿P(guān)系：<、>、<=、>=、asininstanceof、is。◎等于：==、!=、===、!==?！虬次弧芭c”：&。◎按位“異或”：^?！虬次弧盎颉保簗?！蜻壿嫛芭c”：&&?！蜻壿嫛盎颉保簗|?！驐l件：?:?！蛸x值：=、*=、/=、%=、+=、-=、<<=、>>=、>>>=、&=、^=、|=?！蚨禾?hào)：。

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

客觀世界中的任何一個(gè)事物都可以看成是一個(gè)對(duì)象。在Animate中，每一個(gè)可以訪問(wèn)的目標(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)定義好的一段有特定功能的代碼來(lái)實(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ù)是用來(lái)對(duì)常量、變量等進(jìn)行某種運(yùn)算的程序代碼。這些代碼在程序中可重復(fù)使用。在編程時(shí)可以將需要處理的值或?qū)ο笸ㄟ^(guò)參數(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)志。◎用圓括號(hào)()來(lái)放置函數(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è)斜杠來(lái)指定單行注釋。程序?qū)⒑雎孕备芎笾钡皆撔心┪驳乃袃?nèi)容。多行注釋，多行注釋包括一個(gè)開(kāi)始注釋標(biāo)記（/*）、注釋內(nèi)容和一個(gè)結(jié)束注釋標(biāo)記（*/）。無(wú)論注釋跨多少行，程序都將忽略開(kāi)始標(biāo)記與結(jié)束標(biāo)記之間的所有內(nèi)容?！蜿P(guān)鍵字：是ActionScript中有特殊用途的保留字。不能使用關(guān)鍵字作為函數(shù)名、變量名和標(biāo)識(shí)符?！騾^(qū)分大小寫。1．常見(jiàn)事件類型（1）鼠標(biāo)事件

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

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

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

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

ActionScript3.0中控制影片剪輯播放的常用方法如下。（1）停止方法stop()：停止正在播放的動(dòng)畫。此方法沒(méi)有參數(shù)。（2）播放方法play()：當(dāng)動(dòng)畫被停止播放之后，使用play()方法使動(dòng)畫繼續(xù)播放。此方法沒(méi)有參數(shù)。（3）停止播放聲音方法stopAllSounds()：在不停止播放頭的情況下停止SWF文件中當(dāng)前正在播放的所有聲音。此方法沒(méi)有參數(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)。無(wú)參數(shù)。（7）跳轉(zhuǎn)到上一幀方法prevFrame()：將播放頭轉(zhuǎn)到前一幀并停止。如果當(dāng)前幀為第一幀，則播放頭不移動(dòng)。無(wú)參數(shù)。（8）跳轉(zhuǎn)到下一場(chǎng)景方法nextScene()：將播放頭移到下一場(chǎng)景的第1幀并停止。無(wú)參數(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è)界面，顯示你贏了或者你輸了，可以單擊“重玩”按鈕重新開(kāi)始游戲。運(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ò)”幀插入關(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)左鍵不松開(kāi)進(jìn)行拖曳，該小圖片跟隨鼠標(biāo)指針移動(dòng)，當(dāng)移動(dòng)到小圖片的正確位置并松開(kāi)鼠標(biāo)時(shí)，該圖片停留在正確位置，否則回到原來(lái)的位置。完成的效果截圖如圖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所示。將該層命名為“按鈕”并鎖定。

圖8-22

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

圖8-24

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

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

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

本實(shí)訓(xùn)制作的填色游戲，玩家能夠選擇顏色填充和重新填色，參考效果如圖8-31所示。8.4實(shí)訓(xùn)任務(wù)——制作填色游戲圖8-312．動(dòng)畫整體風(fēng)格設(shè)計(jì)

首先選擇顏色，然后在上面的小格中單擊即可填色；也可以重新選色進(jìn)行填充，填出各式圖案；還可單擊“重新填充”按鈕，開(kāi)始新的填充。3．素材收集與處理

上網(wǎng)搜索填色游戲，分析其實(shí)現(xiàn)的方法，解決技術(shù)問(wèn)題。參照實(shí)例效果，學(xué)生分組合作，進(jìn)行策劃，制作填色游戲。8.4.2實(shí)訓(xùn)要點(diǎn)（1）使用“動(dòng)作”面板，使用時(shí)間軸控制語(yǔ)句。（2）顏色的搭配。（3）制作出填色游戲，提高學(xué)習(xí)興趣。8.4.3實(shí)訓(xùn)步驟8.5評(píng)價(jià)考核能力類型考

核

內(nèi)

容評(píng)

價(jià)學(xué)

習(xí)

目

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

價(jià)

項(xiàng)

目321職業(yè)能力掌握“動(dòng)作”面板的使用；掌握MouseEvent.CLICK事件的使用；能夠合理利用時(shí)間軸控制命令；能夠使用Animate完成簡(jiǎn)單游戲的制作熟練使用“動(dòng)作”面板

熟練使用MouseEvent.CLICK事件

熟練使用時(shí)間軸控制命令

能夠使用if函數(shù)

能夠使用Animate制作簡(jiǎn)單游戲

通用能力造型能力

審美能力

組織能力

解決問(wèn)題能力

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

創(chuàng)新能力

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

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

本例要實(shí)現(xiàn)的效果如圖8-43所示。8.6課外拓展——制作換裝游戲圖8-438.6.2知識(shí)要點(diǎn)（1）元件類型的更改，實(shí)例名稱的使用。（2）MouseEvent.CLICK事件、gotoAndStop()方法。（3）hitTestObject()、visible（可見(jiàn)性）。8.6.2知識(shí)要點(diǎn)（1）元件類型的更改，實(shí)例名稱的使用。（2）MouseEvent.CLICK事件、gotoAndStop()方法。（3）hitTestObject()、visible（可見(jiàn)性）。Animate動(dòng)畫設(shè)計(jì)與制作實(shí)例教程

（AnimateCC2019）項(xiàng)目九

制作網(wǎng)站項(xiàng)目簡(jiǎn)介

在網(wǎng)絡(luò)普及的現(xiàn)代社會(huì)，越來(lái)越多的企業(yè)或個(gè)人用戶開(kāi)始制作屬于自己的動(dòng)態(tài)網(wǎng)站。Animate與其他可以制作網(wǎng)頁(yè)的動(dòng)畫制作軟件相比，具有更強(qiáng)大的交互性。要想使用Animate制作出美觀的網(wǎng)頁(yè)，并使用戶能夠自由控制動(dòng)畫，首先就必須了解ActionScript的基礎(chǔ)知識(shí)，以及如何向影片添加交互性動(dòng)作。

本項(xiàng)目主要介紹在Animate動(dòng)畫設(shè)計(jì)中經(jīng)常用到的函數(shù)和類對(duì)象，并通過(guò)3個(gè)應(yīng)用范例，講解應(yīng)用AnimateCC2019制作網(wǎng)站的方法和技巧。通過(guò)本項(xiàng)目的學(xué)習(xí)，讀者可以掌握實(shí)現(xiàn)交互動(dòng)畫的方法，學(xué)會(huì)使用AnimateCC2019設(shè)計(jì)、制作網(wǎng)站。學(xué)習(xí)目標(biāo)掌握影片剪輯控制腳本的使用方法；掌握網(wǎng)頁(yè)元素控制腳本的使用方法；掌握鍵盤事件的使用方法；掌握攝影網(wǎng)頁(yè)、學(xué)院招生網(wǎng)站、產(chǎn)品銷售網(wǎng)站的制作方法。

ActionScript3.0腳本在“動(dòng)作”面板中腳本窗口內(nèi)進(jìn)行編輯，如圖9-1所示，在“動(dòng)作”面板中，可以使用內(nèi)置的“代碼片段”工具簡(jiǎn)化腳本設(shè)計(jì)和編寫，代碼片段中集成了常見(jiàn)的各種事件和功能代碼。選定對(duì)象，直接雙擊相應(yīng)代碼片段即可把代碼添加到編輯框內(nèi)，根據(jù)實(shí)際需要完善修改即可，其調(diào)入可以直接在“動(dòng)作”面板中單擊腳本選項(xiàng)中的快捷工具圖標(biāo)調(diào)入，也可通過(guò)在主菜單中執(zhí)行“窗口”>“代碼片段”命令，在打開(kāi)的對(duì)話框中調(diào)入，如圖9-2所示。9.1知識(shí)準(zhǔn)備——交互式動(dòng)畫的制作

圖9-1

圖9-21．影片剪輯元件的屬性（1）坐標(biāo)：Animate場(chǎng)景中的每個(gè)對(duì)象都有它的坐標(biāo)，坐標(biāo)值以像素為單位。Animate場(chǎng)景的左上角為坐標(biāo)原點(diǎn)，它的坐標(biāo)位置為(0,0)，前一個(gè)表示水平坐標(biāo)，后一個(gè)表示垂直坐標(biāo)。Animate默認(rèn)的場(chǎng)景大小為550像素×400像素，即場(chǎng)景右下角的坐標(biāo)為(550,400)。場(chǎng)景中的每一點(diǎn)分別用X和Y表示x坐標(biāo)值和y坐標(biāo)值。（2）鼠標(biāo)指針位置：利用影片剪輯元件的屬性，不但可以獲得坐標(biāo)位置，還可以獲得鼠標(biāo)指針位置，即鼠標(biāo)指針在影片中的坐標(biāo)位置。表示鼠標(biāo)指針坐標(biāo)屬性的關(guān)鍵字是mouseX和mouseY，其中mouseX代表指針的水平坐標(biāo)位置，mouseY代表指針的垂直坐標(biāo)位置。9.1.1影片剪輯控制腳本（3）旋轉(zhuǎn)方向：rotation屬性代表影片剪輯的旋轉(zhuǎn)方向，它是一個(gè)角度值，范圍為?180°～180°，可以是整數(shù)，也可以是浮點(diǎn)數(shù)。如果將它的值設(shè)置在這個(gè)范圍之外，系統(tǒng)會(huì)自動(dòng)將其轉(zhuǎn)換為這個(gè)范圍之間的值。（4）可見(jiàn)性：visible屬性即可見(jiàn)性，使用布爾值true（1）或者false（0）表示。為true表示影片剪輯可見(jiàn)，即顯示影片剪輯；為false表示影片剪輯不可見(jiàn)，即隱藏影片剪輯。（5）透明度：alpha屬性決定了影片剪輯的透明程度，范圍為0～100，0代表完全透明，100表示不透明。（6）縮放屬性：影片剪輯的縮放屬性包括橫向縮放scaleX和縱向縮放scaleY。scaleX和scaleY的值代表相對(duì)于“庫(kù)”面板中原影片剪輯的橫向尺寸width和縱向尺寸height的百分比，而與場(chǎng)景中影片剪輯實(shí)例的尺寸無(wú)關(guān)。（7）尺寸屬性：與scaleX/scaleY值的屬性不同，width和height代表影片剪輯的絕對(duì)寬度和高度，而不是相對(duì)比例。2．絕對(duì)路徑和相對(duì)路徑

路徑分為絕對(duì)路徑和相對(duì)路徑，它們的區(qū)別是到達(dá)目標(biāo)對(duì)象的出發(fā)點(diǎn)不同。絕對(duì)路徑是以當(dāng)前主場(chǎng)景（即根時(shí)間軸）為出發(fā)點(diǎn)，以目標(biāo)對(duì)象為結(jié)束點(diǎn)；而相對(duì)路徑則是從發(fā)出指令的對(duì)象所在的時(shí)間軸為出發(fā)點(diǎn)，以目標(biāo)對(duì)象為結(jié)束點(diǎn)。3．載入庫(kù)中的影片剪輯

在Animate中，可以從“庫(kù)”面板中將影片剪輯拖到“舞臺(tái)”上，使它們出現(xiàn)在SWF文件中。當(dāng)使用ActionScript3.0添加影片剪輯時(shí)，實(shí)際上是將一個(gè)影片實(shí)例添加到時(shí)間軸上。幀是時(shí)間軸的一部分，可以使用“動(dòng)作”面板將ActionScript3.0代碼與幀關(guān)聯(lián)。

用于添加影片剪輯的ActionScript3.0代碼有以下2個(gè)。（1）DisplayObjectContainer類

DisplayObjectContainer類是可用作顯示列表中顯示對(duì)象容器的所有對(duì)象的基類。使用DisplayObjectContainer類可排列顯示列表中的顯示對(duì)象。每個(gè)DisplayObjectContainer對(duì)象都有自己的子級(jí)列表，用于組織對(duì)象的z軸順序。z軸順序是由前至后，可確定哪個(gè)對(duì)象繪制在前，哪個(gè)對(duì)象繪制在后等。（2）addChild()方法格式為：publicfunctionaddChild(child:DisplayObject):DisplayObject

功能：將一個(gè)DisplayObject子實(shí)例添加到該DisplayObjectContainer實(shí)例中。子項(xiàng)將被添加到該DisplayObjectContainer實(shí)例中其他子項(xiàng)的前（上）面（要將某子項(xiàng)添加到特定索引位置，應(yīng)使用addChildAt()方法）。

參數(shù)child:DisplayObject是作為該DisplayObjectContainer實(shí)例的子項(xiàng)添加的DisplayObject實(shí)例。4．拖曳影片剪輯

在ActionScript3.0中，startDrag()方法的一般形式如下。public

function

startDrag(lockCenter:Boolean

=

false,

bounds:Rectangle

=

null):void

該方法允許用戶拖動(dòng)指定的Sprite。Sprite將一直保持可拖動(dòng)，直到通過(guò)調(diào)用Sprite.stopDrag()方法來(lái)明確停止，或直到將另一個(gè)Sprite變?yōu)榭赏蟿?dòng)為止。在同一時(shí)間只有一個(gè)Sprite是可拖動(dòng)的?！騦ockCenter:Boolean：指定是將可拖動(dòng)的Sprite鎖定到鼠標(biāo)指針位置中央（true），還是鎖定到用戶首次單擊該Sprite時(shí)所在的點(diǎn)上（false）。◎bounds:Rectangle：相對(duì)于Sprite父級(jí)的坐標(biāo)值，用于指定Sprite約束矩形。

stopDrag()方法可以實(shí)現(xiàn)停止拖曳影片，這個(gè)方法沒(méi)有參數(shù)。通過(guò)startDrag()方法變?yōu)榭赏蟿?dòng)的Sprite將一直保持可拖動(dòng)狀態(tài)，直到添加stopDrag()方法或另一個(gè)Sprite變?yōu)榭赏蟿?dòng)狀態(tài)為止（在同一時(shí)間只有一個(gè)Sprite是可拖動(dòng)的）。1．fscommand()方法

該方法用于控制Flash播放器的播放環(huán)境及播放效果。其語(yǔ)法格式如下。public

function

fscommand(command,

args):void2．navigateToURL()方法

navigateToURL()方法位于包中，用于為事件添加超級(jí)鏈接，包括電子郵件鏈接。其語(yǔ)法格式如下。navigateToURL(request,window):void9.1.2網(wǎng)頁(yè)元素控制腳本3．Loader類

Loader類可用于加載SWF文件或圖像（JPG、PNG或GIF）文件。使用load()方法來(lái)啟動(dòng)加載。被加載的顯示對(duì)象將作為L(zhǎng)oader對(duì)象的子級(jí)添加。（1）load()方法

load()方法語(yǔ)法格式如下。public

function

load(request:URLRequest,

context:LoaderContext

=

null):void（2）unload()方法

unload()方法語(yǔ)法格式如下。public

function

unload():void4．removeChild()方法和removeChildAt()方法

使用removeChild()方法，將影片剪輯實(shí)例名作為參數(shù)，可以將其從“舞臺(tái)”上刪除。如刪除當(dāng)前時(shí)間軸所在“舞臺(tái)”上的影片剪輯實(shí)例myMovieClip，就可以使用語(yǔ)句：this.removeChild(myMovieClip);。也可以使用removeChildAt()方法使用索引號(hào)作為參數(shù)刪除某個(gè)影片剪輯。5．URLLoader類

URLLoader類以文本、二進(jìn)制數(shù)據(jù)或URL編碼變量的形式從URL下載數(shù)據(jù)。格式：URLLoader(request:URLRequest=null)作用：創(chuàng)建URLLoader對(duì)象。參數(shù)：request:URLRequest(default=null)是一個(gè)URLRequest對(duì)象，指定要下載的URL。如果省略該參數(shù)，則不開(kāi)始加載操作。如果已指定參數(shù)，則立即開(kāi)始加載操作。6．計(jì)時(shí)器、日期、聲音類（1）Timer類

Timer類是FlashPlayer計(jì)時(shí)器的接口?？梢詣?chuàng)建新的Timer對(duì)象，以便按指定的時(shí)間順序運(yùn)行代碼。使用start()方法來(lái)啟動(dòng)計(jì)時(shí)器。為timer事件添加事件偵聽(tīng)器，以便將代碼設(shè)置為按計(jì)時(shí)器間隔運(yùn)行。（2）Date類

Date類表示日期和時(shí)間信息。

Date()構(gòu)造函數(shù)的作用是構(gòu)造一個(gè)新的Date對(duì)象，該對(duì)象將保存指定的日期和時(shí)間。

Date()構(gòu)造函數(shù)使用最多7個(gè)參數(shù)（year、month、…、millisecond）指定日期和時(shí)間。

Date()構(gòu)造函數(shù)語(yǔ)法如下。public

function

Date(yearOrTimevalue:Object,

month:Number,

date:Number

=

1,

hour:Number

=

0,

minute:Number

=

0,

second:Number

=

0,

millisecond:Number

=

0)（3）Sound類

使用Sound類可以創(chuàng)建新的Sound對(duì)象、將外部MP3文件加載到該對(duì)象并播放該文件、關(guān)閉聲音流，以及訪問(wèn)有關(guān)聲音的數(shù)據(jù)，如有關(guān)流中字節(jié)數(shù)和ID3元數(shù)據(jù)的信息?！騍ound()構(gòu)造函數(shù)：創(chuàng)建一個(gè)新的Sound對(duì)象?！騊lay()方法：生成一個(gè)新的SoundChannel對(duì)象來(lái)回放該聲音。此方法返回SoundChannel對(duì)象，該對(duì)象可停止聲音并監(jiān)控音量。

鍵盤操作也是Animate用戶交互操作的重要事件。在ActionScript3.0中使用KeyboardEvent類來(lái)處理鍵盤操作事件。

它有兩種類型的鍵盤事件：KeyboardEvent.KEY_DOWN和KeyboardEvent.KEY_UP?！騅eyboardEvent.KEY_DOWN：定義按下鍵盤按鍵時(shí)的事件?！騅eyboardEvent.KEY_UP：定義松開(kāi)鍵盤按鍵時(shí)的事件。9.1.3鍵盤事件9.2.1案例效果分析

本案例制作一個(gè)攝影機(jī)構(gòu)的網(wǎng)頁(yè)，界面采用黑色背景，黑白對(duì)比體現(xiàn)了婚紗攝影機(jī)構(gòu)的專業(yè)化；導(dǎo)航條設(shè)計(jì)簡(jiǎn)潔而實(shí)用，極大地方便客戶了解企業(yè)的產(chǎn)品，進(jìn)行服務(wù)咨詢、技術(shù)支持等；多張作品圖片相互切換，展示了攝影機(jī)構(gòu)精湛的攝影技術(shù)和實(shí)力。靜幀效果如圖9-52所示。9.2任務(wù)一——制作菲凡攝影網(wǎng)頁(yè)圖9-529.2.2設(shè)計(jì)思路（1）制作3種不同的“遮罩”元件。（2）依次使用多個(gè)遮罩層，形成多張圖片相互切換的效果。（3）制作網(wǎng)站背景。9.2.3相關(guān)知識(shí)和技能點(diǎn)

使用影片剪輯元件制作“遮罩”圖形；使用遮罩動(dòng)畫制作多張圖片相互切換的效果；使用影片剪輯元件制作百葉窗效果。（1）新建一個(gè)AnimateCC2019影片文檔，設(shè)置舞臺(tái)尺寸為800像素×600像素，其他參數(shù)保持默認(rèn)，保存影片文檔為“菲凡攝影.fla”。（2）執(zhí)行“文件”>“導(dǎo)入”>“導(dǎo)入到庫(kù)”命令，將要使用的素材圖片導(dǎo)入“庫(kù)”面板中。（3）按Ctrl+F8組合鍵新建圖形元件“百葉”，使用“矩形”工具在“舞臺(tái)”上繪制一個(gè)矩形條，如圖9-53所示。9.2.4任務(wù)實(shí)施圖9-53（4）新建影片剪輯元件“百葉動(dòng)”，將“百葉”圖形元件拖到“舞臺(tái)”中，在第18幀添加關(guān)鍵幀。調(diào)整第1幀矩形條的寬度，如圖9-54所示，創(chuàng)建傳統(tǒng)補(bǔ)間動(dòng)畫，如圖9-55所示。新建“圖層2”，在第18幀添加關(guān)鍵幀，調(diào)出“動(dòng)作”面板，輸入圖9-56所示的代碼。圖9-54

圖9-55

圖9-56（5）新建影片剪輯“多個(gè)百葉動(dòng)”，將“百葉動(dòng)”元件拖到“舞臺(tái)”中，多次復(fù)制后，效果如圖9-57所示。（6）回到“場(chǎng)景1”，重命名“圖層1”為“背景”，將“菲凡攝影背景.jpg”導(dǎo)入“舞臺(tái)”中。調(diào)圖片的位置和大小，在時(shí)間軸的第75幀按F5鍵添加幀，效果如圖9-58所示。（7）新建“圖層2”，將“4月天.jpg”圖片拖到“舞臺(tái)”中，調(diào)整圖片的大小和位置，效果如圖9-59所示。圖9-57

圖9-58

圖9-59（8）新建“圖層3”，在時(shí)間軸第5幀按F6鍵添加關(guān)鍵幀，將“1.jpg”素材圖片拖至“舞臺(tái)”，位置和大小和“圖層2”中圖像相同，如圖9-60所示。（9）新建圖層“多個(gè)百葉窗”，在第5幀添加關(guān)鍵幀，將影片剪輯“多個(gè)百葉動(dòng)”拖到“舞臺(tái)”中，調(diào)整其位置和大小，使其覆蓋“圖層3”中的圖片，如圖9-61所示。選中該圖層，用鼠標(biāo)右鍵單擊，在彈出的快捷菜單中選擇“遮罩層”命令，將其設(shè)為遮罩層，如圖9-62所示。圖9-60

圖9-61

圖9-62（10）使用同樣的方法制作多個(gè)遮罩層，面板效果如圖9-63所示。適當(dāng)調(diào)整影片剪輯“多個(gè)百葉動(dòng)”的方向和位置，以產(chǎn)生不同的效果，如圖9-64所示。例如，產(chǎn)生的另一種“遮罩”形狀如圖9-65所示。

圖9-63

圖9-64

圖9-65（11）新建圖層“小圖片”，分別將“1.jpg”圖片、“2.jpg”圖片、“3.jpg”圖片拖到“舞臺(tái)”中，調(diào)整圖片的大小和位置，如圖9-66所示。（12）最終運(yùn)行效果如圖9-67所示。（13）按Ctrl+Enter組合鍵測(cè)試影片，然后保存文件。圖9-66

圖9-679.3.1案例效果分析

本案例為平頂山學(xué)院制作一個(gè)招生網(wǎng)站，網(wǎng)站整體的色調(diào)為深藍(lán)色，襯托校園如天空和大海般的深沉