基于AS3.0和FlashCS5的一起找茬游戲設(shè)計(jì)與開發(fā)

摘要：Flash二維動(dòng)畫制作入門容易，但要真正精通很難，關(guān)鍵之一是缺少能夠深入學(xué)習(xí)、實(shí)踐的參照案例。該文詳細(xì)介紹了基于ActionScript3.0和FlashCS5的一起找茬游戲設(shè)計(jì)與實(shí)現(xiàn)全過程，能夠?yàn)槌鯇W(xué)者進(jìn)一步的深入學(xué)習(xí)提供引導(dǎo)和借鑒。

關(guān)鍵詞：ActionScript3.0;FlashCS5;拼圖游戲

中圖分類號：TP311 ? ? ?文獻(xiàn)標(biāo)識碼：A

文章編號：1009-3044（2021）31-0070-03

1 系統(tǒng)功能介紹

一起找茬游戲是基于FlashCS5和ActionScript3.0設(shè)計(jì)，進(jìn)入游戲界面后點(diǎn)擊Play按鈕即可開始體驗(yàn)。本游戲共設(shè)計(jì)有五個(gè)界面，每個(gè)界面左右兩邊各有五個(gè)不同點(diǎn)，用戶需在規(guī)定時(shí)間內(nèi)找出全部不同點(diǎn)，然后自動(dòng)進(jìn)入下一界面，直到五個(gè)界面全部完成即通關(guān)，主要功能如下：

1）多個(gè)場景供用戶體驗(yàn)，每個(gè)場景會顯示不同點(diǎn)總數(shù)量，找出不同點(diǎn)時(shí)會自動(dòng)更新不同點(diǎn)剩余數(shù)量。

2）游戲含有限次提示功能，對所有場景有效，每次使用會自動(dòng)更新剩余提示數(shù)量。

3） 每個(gè)場景有倒計(jì)時(shí)功能，無論通關(guān)還是失敗，都有明確顯示，可無限次體驗(yàn)。

2 系統(tǒng)功能實(shí)現(xiàn)

1）打開FlashCS5軟件，執(zhí)行文件-->新建，在彈出的對話框中設(shè)置舞臺大小為800*600，然后選擇ActionScript3.0，在新建的文檔中把準(zhǔn)備好的10張圖片素材導(dǎo)入庫面板中備用。

2）雙擊時(shí)間軸的圖層1改名為文本播放，單擊該圖層的第一個(gè)關(guān)鍵幀，用文本工具在舞臺上輸入“一起找茬”并設(shè)置合適的大小和位置;新建一個(gè)Play按鈕置于文字下方命名為btnPlay;在按鈕下方輸入游戲說明。

3）新建一名為計(jì)時(shí)的影片剪輯備用。該影片剪輯主要功能是倒計(jì)時(shí)，可根據(jù)需要自主設(shè)置計(jì)時(shí)時(shí)間，計(jì)時(shí)結(jié)束前沒有找出所有不同點(diǎn)則游戲失敗，回到失敗界面（舞臺的第八幀）。操作步驟如下：

①在影片剪輯的第一幀繪制條形計(jì)時(shí)框并填充綠色。

②新建一名為框的圖層，將影片剪輯圖層1中的框剪切并粘貼在當(dāng)前位置。

③在圖層1第1440幀處插入關(guān)鍵幀并將色條形變成一像素寬，然后創(chuàng)建補(bǔ)間形狀動(dòng)畫。

④新建一名為AS的圖層，在第1440幀處輸入代碼：MovieClip（root）.gotoAndStop（8）。

4）新建一名為計(jì)數(shù)的影片剪輯。該影片剪輯圖層1的1-5幀分別對應(yīng)數(shù)字5-1（每幀對應(yīng)一個(gè)數(shù)字，倒序）;新建AS圖層，在該圖層第一幀輸入stop（）;，在該圖層第六幀輸入MovieClip（root）.nextFrame（）;，即找出所有不同后進(jìn)入下一場景。

5）新建一名為提示的影片剪輯。在圖層1的第一幀輸入“？”，第二幀是空白關(guān)鍵幀;新建圖層2，圖層2的第一幀輸入代碼stop（）;，第二幀也是空白關(guān)鍵幀。

6）新建一名為圓圈的影片剪輯。在圖層1第一幀同一水平線上繪制半徑20、相隔300像素（一張圖片的寬度）、透明度為0的兩個(gè)實(shí)心圓;在第二幀同一水平線上繪制半徑20、相隔300像素、透明度為100%的兩個(gè)空心圓;新建AS圖層，第一幀輸入代碼stop（）;

7）新建一名為計(jì)時(shí)提示計(jì)數(shù)的圖層。

①選中該圖層第二幀，將計(jì)時(shí)影片剪輯拖入舞臺上方合適位置并命名為mcTime。

②將提示影片剪輯拖入計(jì)時(shí)下方，拖入五個(gè)，分別命名為ti1到ti5。

③將計(jì)數(shù)影片剪輯拖入合適位置并命名為mcCount。

④在第七幀輸入通關(guān)提示文本，并插入名為btnBack的返回按鈕。

⑥在第八幀輸入失敗提示文本，并插入名為btnRe的返回按鈕。

8）新建一名為五圖茬的圖層，第一幀空白，第二到第六幀每幀放兩張預(yù)先處理的有五處不同點(diǎn)的兩幅圖，拖5個(gè)圓圈影片剪輯覆蓋兩幅圖的不同點(diǎn)并分別命名為cha1到cha5。

9）新建名為AS的圖層。

①第一幀主要監(jiān)聽播放按鈕的單擊事件，單擊Play則進(jìn)入第二幀游戲的第一個(gè)場景，具體代碼如下：

import flash.events.MouseEvent;

stop（）;

btnPlay.addEventListener（MouseEvent.CLICK，toPlay）;

function toPlay（e：MouseEvent）{

gotoAndPlay（2）; }

②第二幀主要功能有：開始倒計(jì)時(shí);顯示不同點(diǎn)的當(dāng)前數(shù)量;為每一個(gè)不同點(diǎn)（chai）添加鼠標(biāo)單擊監(jiān)聽事件，接收到單擊事件則不同天剩余數(shù)量減一;為沒個(gè)提示添加鼠標(biāo)單擊的監(jiān)聽事件，實(shí)現(xiàn)單擊提示能夠消除場景中的一個(gè)不同點(diǎn)的功能，具體代碼如下：

import flash.events.MouseEvent;

stop（）;

mcTime.gotoAndPlay（1）;

mcCount.gotoAndStop（1）;

for（var i：int=1;i<=5;i++）

{

this["cha"+i].addEventListener（MouseEvent.CLICK，toFound）;

function toFound（e：MouseEvent）

{

switch（e.currentTarget.name）

{

case "cha1"： cha1.gotoAndStop（2）;mcCount.nextFrame（）;break;

case "cha2"： cha2.gotoAndStop（2）;mcCount.nextFrame（）;break;

case "cha3"： cha3.gotoAndStop（2）;mcCount.nextFrame（）;break;

case "cha4"： cha4.gotoAndStop（2）;mcCount.nextFrame（）;break;

case "cha5"： cha5.gotoAndStop（2）;mcCount.nextFrame（）;

}

}

}

for（var k：int=1;k<=5;k++）

{

this["ti"+k].addEventListener（MouseEvent.CLICK，toHelp）;

function toHelp（e：MouseEvent）

{

if（e.currentTarget.name=="ti1"）

{ for（var j：int=1;j<=5;j++）

{ var cha=this["cha"+j];

if（cha.currentFrame==2）

continue;

else{cha.gotoAndStop（2）;ti1.gotoAndStop（2）;mcCount.nextFrame（）;break; }

}

}

if（e.currentTarget.name=="ti2"）

{ for（var j2：int=1;j2<=5;j2++）

{ var chax=this["cha"+j2];

if（chax.currentFrame==2）

continue;

else{chax.gotoAndStop（2）;ti2.gotoAndStop（2）;mcCount.nextFrame（）;break; }

}

}

if（e.currentTarget.name=="ti3"）

{ for（var j3：int=1;j3<=5;j3++）

{ var chay=this["cha"+j3];

if（chay.currentFrame==2）

continue;

else{chay.gotoAndStop（2）;ti3.gotoAndStop（2）;mcCount.nextFrame（）;break; }

}

}

if（e.currentTarget.name=="ti4"）

{ for（var j4：int=1;j4<=5;j4++）

{ var chaz=this["cha"+j4];

if（chaz.currentFrame==2）

continue;

else{chaz.gotoAndStop（2）;ti4.gotoAndStop（2）;mcCount.nextFrame（）;break; }

}

}

if（e.currentTarget.name=="ti5"）

{ for（var j5：int=1;j5<=5;j5++）

{ var chaw=this["cha"+j5];

if（chaw.currentFrame==2）

continue;

else{chaw.gotoAndStop（2）;ti5.gotoAndStop（2）;mcCount.nextFrame（）;break; }

}

}

}

}

③ 第三幀的代碼如下：

mcTime.gotoAndPlay（1）;

mcCount.gotoAndStop（1）;

for（var ij=1;ij<=5;ij++）{

this["cha"+ij].gotoAndStop（1）; }

④ 第四幀的代碼如下：

mcTime.gotoAndPlay（1）;

mcCount.gotoAndStop（1）;

for（var a=1;a<=5;a++）{

this["cha"+a].gotoAndStop（1）; }

⑤第五幀的代碼如下：

mcTime.gotoAndPlay（1）;

mcCount.gotoAndStop（1）;

for（var j=1;j<=5;j++）{

this["cha"+j].gotoAndStop（1）; }

⑥第六幀的代碼如下：

mcTime.gotoAndPlay（1）;

mcCount.gotoAndStop（1）;

for（var kx=1;kx<=5;kx++）{

this["cha"+kx].gotoAndStop（1）; }

⑦第七幀主要是實(shí)現(xiàn)單擊返回按鈕返回舞臺第一幀重新游戲的功能，具體代碼如下：

import flash.events.MouseEvent;

btnBack.addEventListener（MouseEvent.CLICK，toBack）;

function toBack（e：MouseEvent）{

gotoAndStop（1）; }

⑧第八幀也是實(shí)現(xiàn)單擊返回按鈕返回舞臺第一幀重新游戲的功能，具體代碼如下：

import flash.events.MouseEvent;

btnRe.addEventListener（MouseEvent.CLICK，toReturn）;

function toReturn（e：MouseEvent）{

gotoAndStop（1）; }

10）為了改善用戶體驗(yàn)，新建一名為music的圖層，添加一首音樂。保存Flash文檔并按Ctrl+Enter進(jìn)行測試，效果如圖1所示。

3 注意事項(xiàng)

1）主場景的AS圖層第3至第6幀中的代碼高度相似，但是務(wù)必要使用不同的循環(huán)變量，否則很可能會報(bào)錯(cuò)。

2）五次提示對所有場景有效，因此使用提示時(shí)要獲取當(dāng)前幀的名稱，再進(jìn)行循環(huán)讀取沒有找出的不同點(diǎn)，按順序找出并加以顯示。

參考文獻(xiàn)：

[1] 胡國鈺.Flash經(jīng)典課堂：動(dòng)畫、游戲與多媒體制作案例教程[M].北京：清華大學(xué)出版社，2013.

[2] 劉彩虹唐琳.Flash動(dòng)畫設(shè)計(jì)與制作項(xiàng)目化教程[M].北京：清華大學(xué)出版社，2017.

[3] 張建琴，官彬彬.Flash CS6動(dòng)畫制作案例教程[M].北京：清華大學(xué)出版社，2018.

【通聯(lián)編輯：張薇】

收稿日期：2021-02-05

作者簡介：陳趙云（1982—），男，江西人，講師，研究方向?yàn)閃eb系統(tǒng)開發(fā)、物聯(lián)網(wǎng)技術(shù)應(yīng)用。