Flash動(dòng)畫教學(xué)中互動(dòng)游戲的應(yīng)用研究

引言：通過(guò)兩個(gè)Flash互動(dòng)游戲的制作，結(jié)合制作過(guò)程與教學(xué)過(guò)程，從互動(dòng)游戲的角度入手Action script教學(xué)，希望在調(diào)動(dòng)學(xué)生積極性和Action script系統(tǒng)學(xué)習(xí)中取得一些平衡點(diǎn)，把游戲應(yīng)用到課堂教學(xué)中來(lái)，學(xué)生的興趣和集中力都能得到一定的提升

一、前言

在高職高專的Flash教學(xué)中，Action script腳本語(yǔ)言一直是重點(diǎn)部分，也是難點(diǎn)。學(xué)生對(duì)于代碼的印象從來(lái)都是枯燥、刻板、難以理解，特別是Action script編程語(yǔ)言這種需要很強(qiáng)的邏輯思維能力，一定的數(shù)學(xué)和英語(yǔ)基礎(chǔ)的課程，系統(tǒng)的教學(xué)從語(yǔ)法算法入手，在實(shí)際教學(xué)中效果不甚理想，本文從互動(dòng)游戲的角度入手Action script教學(xué)，希望在調(diào)動(dòng)學(xué)生積極性和Action script系統(tǒng)學(xué)習(xí)中取得一些平衡點(diǎn)。

網(wǎng)絡(luò)游戲一直是當(dāng)代大學(xué)生十分喜愛(ài)的一項(xiàng)活動(dòng)，把游戲應(yīng)用到課堂教學(xué)中來(lái)，學(xué)生的興趣和集中力都能得到一定的提升，下面以幾個(gè)flash互動(dòng)小游戲?yàn)槔鯝ction script的關(guān)鍵知識(shí)點(diǎn)。

二、大家來(lái)找茬

大家來(lái)找茬是一款老少皆宜的游戲，在很多地方都是用flash來(lái)實(shí)現(xiàn)游戲效果的。游戲的主要方式就是在限制時(shí)間內(nèi)用鼠標(biāo)點(diǎn)擊找出左右兩幅圖之間不同的地方來(lái)取得相應(yīng)的分?jǐn)?shù)。通過(guò)這個(gè)游戲，我們可以對(duì)ActionScript操作幀和鼠標(biāo)點(diǎn)擊的內(nèi)容進(jìn)行講解。

（一）游戲制作

1.準(zhǔn)備工作

首先我們要準(zhǔn)備兩張不同的圖片，一張是原圖，另外一張把他制作成錯(cuò)誤的圖片，一般情況下制作五處錯(cuò)誤是比較合適的。

接下來(lái)把兩幅圖并列排放在主場(chǎng)景中。把第一層鎖定，在時(shí)間軸上增加一個(gè)新的層，為了讓玩家的鼠標(biāo)移動(dòng)到圖片上有鼠標(biāo)動(dòng)作，我們?cè)诘诙釉黾右粋€(gè)按鈕，與這兩幅圖差不多大小，遮罩在圖片上，并且把該按鈕元件的透明度降為0，使其不要遮擋用來(lái)游戲的界面。

2.制作錯(cuò)誤動(dòng)畫

增加第三個(gè)圖層，這里需要制作一個(gè)當(dāng)玩家找到錯(cuò)誤以后畫上一個(gè)圈的動(dòng)畫效果，新建一個(gè)影片剪輯，取名“畫圈”，將其第一幀留一個(gè)空白關(guān)鍵幀，并且加入一個(gè)ActionScript語(yǔ)句：stop（）；，使其無(wú)法自動(dòng)播放。制作好畫圈動(dòng)畫以后，回到主場(chǎng)景，把這個(gè)動(dòng)畫放置到每一個(gè)錯(cuò)誤的位置，然后每一個(gè)位置的圓圈我們都給予一個(gè)實(shí)例名稱，比如“1a”、“2a”，錯(cuò)誤的圖上用“1b”、“2b”

3.制作找錯(cuò)誤鼠標(biāo)事件

當(dāng)玩家發(fā)現(xiàn)錯(cuò)誤的時(shí)候，鼠標(biāo)一點(diǎn)，就應(yīng)該出現(xiàn)畫圈的動(dòng)畫效果。新建一個(gè)按鈕元件，取名為“找茬”。在按鈕元件的“按下”幀里面，畫一個(gè)圓形

回到主場(chǎng)景，將該按鈕元件放到每一個(gè)錯(cuò)誤的位置上，并且為按鈕增加ActionScript語(yǔ)句：

on（release）{if（Number（re1）==0）{tellTarget（\"/1a\"）{play（）；}tellTarget（\"/1b\"）{play（）；}re1=1； count=Number（count）+1； score=Number（score）+10；}if（Number（count）==5）{nextFrame（）；}}

這是一個(gè)判斷是否找到錯(cuò)誤的代碼，re（n）表示是否找到第n個(gè)錯(cuò)誤，count表示已找到的錯(cuò)誤數(shù)，score表示分?jǐn)?shù)。當(dāng)玩家找到“1a”或者是其他錯(cuò)誤位置的時(shí)候，就演示畫圈的動(dòng)畫，count加1，分?jǐn)?shù)score加10。當(dāng)couter為5即找到五個(gè)錯(cuò)誤后，跳轉(zhuǎn)到下一幀，游戲結(jié)束。此游戲可以給學(xué)生留課后習(xí)題加上限制時(shí)間控制，如果時(shí)間內(nèi)沒(méi)有完成游戲就結(jié)束的功能。

三、打磚塊

打磚塊游戲大家都很熟悉：游戲者用一個(gè)擋板對(duì)小球進(jìn)行反彈，上方排列了一些方塊磚，游戲的目的就是利用鼠標(biāo)對(duì)擋板進(jìn)行左右移動(dòng)控制，以便將小球擋回去，避免小球落到擋板的下方，擋回去的小球?qū)⑴c上面的方磚發(fā)生碰撞，被碰撞的方磚會(huì)自動(dòng)顯示，玩家每打掉一塊方磚，會(huì)得到一定的分?jǐn)?shù)。

在本游戲中玩家的生命值為5，如果將當(dāng)前界面中的方磚全部打完，則進(jìn)入下一關(guān)。游戲開始允許玩家選擇游戲難度：初級(jí)、中級(jí)和高級(jí)，不同的難度中方磚的數(shù)量和小球運(yùn)動(dòng)的速度不同，玩家可以根據(jù)自己的水平來(lái)選擇合適的游戲難度。利用此游戲來(lái)講解ActionScript函數(shù)的用法

（一）游戲制作思路

本游戲主要涉及到以下幾種主要控制：

1.鼠標(biāo)拖動(dòng)：游戲中需要使用鼠標(biāo)拖動(dòng)檔板左右移動(dòng)來(lái)?yè)跣∏?，此功能也是很多游戲中常用的，用startdrag函數(shù)很容易就解決了。

2.小球的反彈控制：游戲中小球會(huì)不斷和墻壁、擋板或者方磚發(fā)生碰撞，所以需要使用Action來(lái)控制小球的反彈。

3.方磚和小球的碰撞測(cè)試：游戲中需要檢測(cè)小球是否碰到了方磚，此功能可以使用hitTest碰撞測(cè)試函數(shù)來(lái)檢測(cè)。

4.游戲的記分和生命值：在游戲中需要?jiǎng)討B(tài)的顯示當(dāng)前玩家的游戲得分和玩家剩余的生命值，這里使用動(dòng)態(tài)文本框（Dynamic text）實(shí)現(xiàn)顯示分?jǐn)?shù)的功能。

（二）游戲元件的制作步驟

1.小球的制作

此類游戲中小球是必不可少的對(duì)象，所以我們可以隨意繪制一個(gè)小球，再填充上合適的顏色，不過(guò)因?yàn)槲覀冃枰诤竺媸褂肁ction對(duì)小球進(jìn)行控制，所以這里我們將小球做成movie clip，命名為ball。

因?yàn)橛螒蛑行∏蛞诙鄠€(gè)場(chǎng)合進(jìn)行反彈，所以需要制作一個(gè)小球進(jìn)行反彈的效果，這里我們新建一個(gè)movie clip，命名為ball_jmp，進(jìn)入組件的編輯狀態(tài)后，在原有圖層layer1的上方新建一個(gè)圖層layer2，我們要的效果是小球由下自上彈起來(lái)，所以圖層layer1制作小球陰影由小到大的的shpae形狀變化效果，圖層layer2制作小球由下自上的motion運(yùn)動(dòng)效果.

2.背景變幻效果

如果在游戲的過(guò)程中能不斷的變換游戲背景，可以使游戲氣氛顯的很緊張，玩起來(lái)也很刺激，所以就制作一個(gè)背景顏色快速變化的Mc，新建一個(gè)movie clip，命名為background，在第一幀使用矩形工具繪制一個(gè)填充色為藍(lán)色的矩形

然后在圖層layer1的第2幀插入一個(gè)關(guān)鍵幀，在第8幀也插入一個(gè)關(guān)鍵幀，并將第8湞中的矩形填充色改變?yōu)闇\藍(lán)色，然后建立第2幀到第8幀的shape形狀過(guò)度效果，最后將時(shí)間線延長(zhǎng)到第10幀：

在圖層layer1的第1幀添加AS：

play = 0；stop（）； //定義變量play，然后暫停播放

在圖層layer1的第2幀添加AS：

play = Number（play）+1；setProperty（\"/ball\"，_visible， 1）；tellTarget（\"/\"）

//變量play的值為當(dāng)前值增一，然后設(shè)置小球?yàn)椴豢梢?，主?chǎng)景停止播放

在圖層layer1的第8幀添加AS：

if（Number（play）<3）else{if（Number（endgame）==Number（1））{tellTarget（\"/\"） }

if（Number（/：endgame）==Number（1））{setProperty（\"/ball\"，_visible，true）；}

gotoAndStop（1）；}

3.游戲難度選擇按鈕的制作

本游戲可以在游戲開始前選擇游戲難度，游戲中一共分為三種難度，分別是初級(jí)，中級(jí)和高級(jí)，不同的難度方磚的數(shù)量和小球運(yùn)動(dòng)的速度將不同，玩家可以根據(jù)自己的水平來(lái)選擇合適的游戲難度。這里以其中一個(gè)按鈕為例進(jìn)行說(shuō)明，其它兩個(gè)按鈕制作方法類似。

新建一個(gè)button按鈕組件，命名為advanced，進(jìn)入組件編輯狀態(tài)后，在按鈕的UP幀處輸入advanced幾個(gè)字，代表高級(jí)難度，然后在OVER幀插入一個(gè)關(guān)鍵幀，將前面做好的組件ball_jmp拖到文字的左方，然后分別在DOWN幀和Hit幀插入關(guān)鍵幀。按照同樣的方法制作其它兩個(gè)按鈕，分別為beginner和intermediate，代表了初級(jí)和中級(jí)。

4.磚塊的制作

游戲的目的就是利用小球擊中更多的方磚，所以方磚是必不可少的，為了使游戲的視覺(jué)效果更加突出，本游戲一共制作了四種不同顏色的方磚，分別為黃色，紅色，藍(lán)色和綠色的磚塊，這里我們只對(duì)其中的一種藍(lán)色轉(zhuǎn)塊的制作進(jìn)行講解，其它三中的制作方法類似。

新建一個(gè)movie clip，命名為brickblue，進(jìn)入組件的辨別狀態(tài)后，先用矩形工具繪制一個(gè)填充色為藍(lán)色漸變的矩形。然后在圖層layer1的第2幀插入關(guān)鍵幀，將矩形的填充色改變?yōu)榧t色，并且將矩形分解為不同的幾部分，以便制作磚塊爆炸開的效果。為了使爆炸效果更加逼真，我們?cè)谶M(jìn)行一下修飾，新建一個(gè)圖層layer2，再第2幀插入一個(gè)關(guān)鍵幀，然后使用橢圓工具繪制一個(gè)具有紅色漸變填充色的圓形。這樣，磚塊的爆炸效果就很好的體現(xiàn)出來(lái)了。

最后還需要添加一些控制用的Action，在圖層layer1的第1幀添加如下AS：

vis = 1；stop（）；

在圖層layer1的第2幀添加如下AS：

todest = /：destroy；

在圖層layer1的第10幀添加如下AS：

removeMovieClip（\"/brick\" add todest）； stop（）；

到此為止，游戲中需要用到的所有元件就準(zhǔn)備好了。

（三）布置主場(chǎng)景

1.回到主場(chǎng)景中，將原來(lái)的圖層layer1更名為background，此層放置游戲的背景。使用矩形工具在舞臺(tái)上繪制一個(gè)和舞臺(tái)同樣大小的填充色為深藍(lán)色的矩形，作為游戲的整體背景，然后將組件background拖到舞臺(tái)的靠右的位置，作為游戲的主體背景。

2.新建一個(gè)圖層命名為bricks，此層用來(lái)放置四種顏色的磚塊，將四種不同顏色的磚塊分別自上而下拖放到舞臺(tái)的左邊，并給四中顏色的磚塊分別設(shè)置實(shí)例名為brick， brickred，brickblue和brickgreen。

3.再分別新建兩個(gè)圖層，分別命名為ball和paddle，將小球和檔板分別拖放到主背景的靠下的位置，并分別設(shè)置實(shí)例名為ball和paddle。

4.新建一個(gè)圖層命名為info，此層用來(lái)放置記分和生命值用的文本框，分別用文本工具繪制三個(gè)文本框，設(shè)置其屬性為Dynamic text動(dòng)態(tài)文本框，然后給文本框添加說(shuō)明性文字，從上到下分別為分?jǐn)?shù)，生命值和等級(jí)，最后分別給此三個(gè)文本框設(shè)置變量名為score，balls和level_I。

5.新建一個(gè)圖層命名為button，此圖層放置游戲開始前的難度選擇按鈕，將前面制作的三個(gè)難度按鈕分別拖到主背景的中間位置，由上自下分別為beginner， intermediate和Addvanced。

（四）游戲控制代碼

由于篇幅問(wèn)題，僅給出教學(xué)相關(guān)關(guān)鍵代碼：

新建一個(gè)圖層命名為action，在此圖層第1 幀添加as：

setProperty（\"/paddle\"， _visible， true）；setProperty（\"/ball\"， _visible， true）；score = 0；stop（）；

在此圖層第2 幀添加as：

startDrag（\"/paddle\"， 1， 240， 420， 560， 420）；

ballx = 300；bally = 400；speedx = 8；speedy = -8；ballwidth = 16；paddlewidth = 80；

brickwidth = 40；Level_index = 10；bricknumber = 0；Level_i = 1；modified = true；

endgame = 1；border = 250；

在此圖層第3幀添加as：

if （endgame） //變量endgame標(biāo)識(shí)游戲是否結(jié)束，如果游戲結(jié)束，則跳轉(zhuǎn)到第5幀

if（Number（bricknumber）<=0）{

Level_i=Level_index-9；call（Level_index）；

setProperty（\"/brick\"，_visible，1）；setProperty（\"/brickblue\"， _visible， 1）；

setProperty（\"/brickgreen\"，_visible，1）；setProperty（\"/brickred\"， _visible， 1）；

ballx = 300；bally = 400；speedx = Number（speed）+Number（xspeed）-5；

speedy = -speed-xspeed；}setProperty（\"/ball\"， _x， ballx）；setProperty（\"/ball\"，_y，bally）；

在此圖層第4 幀添加as：

if （Number（balls）<1）{endgame=true；gotoAndStop（6）；}

//如果生命值balls為0，則游戲結(jié)束

gotoAndPlay（\"loopback\"）；

四、結(jié)語(yǔ)

利用游戲進(jìn)行flash教學(xué)是在教學(xué)實(shí)踐中值得嘗試的一步，用生動(dòng)豐富多彩的游戲應(yīng)用來(lái)填充枯燥乏味的actionscript語(yǔ)言講解不僅符合高職高專項(xiàng)目驅(qū)動(dòng)教學(xué)的大方針，還可以使學(xué)生的注意力回到課堂本身上來(lái)，提升學(xué)生對(duì)于課程的積極性，相信隨著教學(xué)的實(shí)踐，還會(huì)有更多更好的游戲應(yīng)用項(xiàng)目可以發(fā)掘創(chuàng)造。

參考文獻(xiàn)

[1]做個(gè)FLASH游戲設(shè)計(jì)師.計(jì)算機(jī)與網(wǎng)絡(luò).2002.9.02.

[2]Flash游戲制作：打磚塊.太平洋電腦網(wǎng).2005.2.24.

（作者單位：湖北財(cái)稅職業(yè)學(xué)院）