版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
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)色,襯托校園如天空和大海般的深沉
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 裝飾管理合同模板
- 卷布訂貨合同模板
- 綠化種植施工合同模板
- 房屋代理協(xié)議合同模板
- 正規(guī)機(jī)械購(gòu)銷合同模板
- 機(jī)封合同模板
- 租賃物資合同模板
- 非標(biāo)件合同模板
- 商店務(wù)工合同模板
- 冷庫(kù)承包使用合同模板
- 紙箱報(bào)價(jià)公式
- 第三節(jié)流水地貌2課件
- 全國(guó)常規(guī)免疫接種率監(jiān)測(cè)方案
- 地源熱泵機(jī)房調(diào)試方案 (1)
- 附表 電力服務(wù)(涉電維護(hù)、檢測(cè)等)收費(fèi)項(xiàng)目及標(biāo)準(zhǔn)
- 《礦山機(jī)械設(shè)備》復(fù)習(xí)題
- 焊接工藝設(shè)計(jì)方案
- 二手車舊機(jī)動(dòng)車評(píng)估圖文實(shí)例及交易注意事項(xiàng)珍貴教材PPT課件
- 管02酸洗、鈍化記錄
- 《內(nèi)科護(hù)理學(xué)》病例分析(完整版)
- 低壓有源濾波柜訂貨技術(shù)文件
評(píng)論
0/150
提交評(píng)論