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

摘要：Flash二維動畫制作入門容易，但要真正精通很難，關鍵之一是缺少能夠深入學習、實踐的參照案例。該文詳細介紹了基于ActionScript3.0和FlashCS5的一起找茬游戲設計與實現(xiàn)全過程，能夠為初學者進一步的深入學習提供引導和借鑒。

關鍵詞：ActionScript3.0;FlashCS5;拼圖游戲

中圖分類號：TP311 ? ? ?文獻標識碼：A

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

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

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

1）多個場景供用戶體驗，每個場景會顯示不同點總數(shù)量，找出不同點時會自動更新不同點剩余數(shù)量。

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

3） 每個場景有倒計時功能，無論通關還是失敗，都有明確顯示，可無限次體驗。

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

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

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

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

①在影片剪輯的第一幀繪制條形計時框并填充綠色。

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

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

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

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

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

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

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

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

②將提示影片剪輯拖入計時下方，拖入五個，分別命名為ti1到ti5。

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

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

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

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

9）新建名為AS的圖層。

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

import flash.events.MouseEvent;

stop（）;

btnPlay.addEventListener（MouseEvent.CLICK，toPlay）;

function toPlay（e：MouseEvent）{

gotoAndPlay（2）; }

②第二幀主要功能有：開始倒計時;顯示不同點的當前數(shù)量;為每一個不同點（chai）添加鼠標單擊監(jiān)聽事件，接收到單擊事件則不同天剩余數(shù)量減一;為沒個提示添加鼠標單擊的監(jiān)聽事件，實現(xià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）; }

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

import flash.events.MouseEvent;

btnBack.addEventListener（MouseEvent.CLICK，toBack）;

function toBack（e：MouseEvent）{

gotoAndStop（1）; }

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

import flash.events.MouseEvent;

btnRe.addEventListener（MouseEvent.CLICK，toReturn）;

function toReturn（e：MouseEvent）{

gotoAndStop（1）; }

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

3 注意事項

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

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

參考文獻：

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

[2] 劉彩虹唐琳.Flash動畫設計與制作項目化教程[M].北京：清華大學出版社，2017.

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

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

收稿日期：2021-02-05

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