Flash動畫教學中互動游戲的應用研究

引言：通過兩個Flash互動游戲的制作，結合制作過程與教學過程，從互動游戲的角度入手Action script教學，希望在調動學生積極性和Action script系統學習中取得一些平衡點，把游戲應用到課堂教學中來，學生的興趣和集中力都能得到一定的提升

一、前言

在高職高專的Flash教學中，Action script腳本語言一直是重點部分，也是難點。學生對于代碼的印象從來都是枯燥、刻板、難以理解，特別是Action script編程語言這種需要很強的邏輯思維能力，一定的數學和英語基礎的課程，系統的教學從語法算法入手，在實際教學中效果不甚理想，本文從互動游戲的角度入手Action script教學，希望在調動學生積極性和Action script系統學習中取得一些平衡點。

網絡游戲一直是當代大學生十分喜愛的一項活動，把游戲應用到課堂教學中來，學生的興趣和集中力都能得到一定的提升，下面以幾個flash互動小游戲為例，引出Action script的關鍵知識點。

二、大家來找茬

大家來找茬是一款老少皆宜的游戲，在很多地方都是用flash來實現游戲效果的。游戲的主要方式就是在限制時間內用鼠標點擊找出左右兩幅圖之間不同的地方來取得相應的分數。通過這個游戲，我們可以對ActionScript操作幀和鼠標點擊的內容進行講解。

（一）游戲制作

1.準備工作

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

接下來把兩幅圖并列排放在主場景中。把第一層鎖定，在時間軸上增加一個新的層，為了讓玩家的鼠標移動到圖片上有鼠標動作，我們在第二層增加一個按鈕，與這兩幅圖差不多大小，遮罩在圖片上，并且把該按鈕元件的透明度降為0，使其不要遮擋用來游戲的界面。

2.制作錯誤動畫

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

3.制作找錯誤鼠標事件

當玩家發現錯誤的時候，鼠標一點，就應該出現畫圈的動畫效果。新建一個按鈕元件，取名為“找茬”。在按鈕元件的“按下”幀里面，畫一個圓形

回到主場景，將該按鈕元件放到每一個錯誤的位置上，并且為按鈕增加ActionScript語句：

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（）；}}

這是一個判斷是否找到錯誤的代碼，re（n）表示是否找到第n個錯誤，count表示已找到的錯誤數，score表示分數。當玩家找到“1a”或者是其他錯誤位置的時候，就演示畫圈的動畫，count加1，分數score加10。當couter為5即找到五個錯誤后，跳轉到下一幀，游戲結束。此游戲可以給學生留課后習題加上限制時間控制，如果時間內沒有完成游戲就結束的功能。

三、打磚塊

打磚塊游戲大家都很熟悉：游戲者用一個擋板對小球進行反彈，上方排列了一些方塊磚，游戲的目的就是利用鼠標對擋板進行左右移動控制，以便將小球擋回去，避免小球落到擋板的下方，擋回去的小球將與上面的方磚發生碰撞，被碰撞的方磚會自動顯示，玩家每打掉一塊方磚，會得到一定的分數。

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

（一）游戲制作思路

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

1.鼠標拖動：游戲中需要使用鼠標拖動檔板左右移動來擋小球，此功能也是很多游戲中常用的，用startdrag函數很容易就解決了。

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

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

4.游戲的記分和生命值：在游戲中需要動態的顯示當前玩家的游戲得分和玩家剩余的生命值，這里使用動態文本框（Dynamic text）實現顯示分數的功能。

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

1.小球的制作

此類游戲中小球是必不可少的對象，所以我們可以隨意繪制一個小球，再填充上合適的顏色，不過因為我們需要在后面使用Action對小球進行控制，所以這里我們將小球做成movie clip，命名為ball。

因為游戲中小球要在多個場合進行反彈，所以需要制作一個小球進行反彈的效果，這里我們新建一個movie clip，命名為ball_jmp，進入組件的編輯狀態后，在原有圖層layer1的上方新建一個圖層layer2，我們要的效果是小球由下自上彈起來，所以圖層layer1制作小球陰影由小到大的的shpae形狀變化效果，圖層layer2制作小球由下自上的motion運動效果.

2.背景變幻效果

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

然后在圖層layer1的第2幀插入一個關鍵幀，在第8幀也插入一個關鍵幀，并將第8湞中的矩形填充色改變為淺藍色，然后建立第2幀到第8幀的shape形狀過度效果，最后將時間線延長到第10幀：

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

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

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

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

//變量play的值為當前值增一，然后設置小球為不可見，主場景停止播放

在圖層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.游戲難度選擇按鈕的制作

本游戲可以在游戲開始前選擇游戲難度，游戲中一共分為三種難度，分別是初級，中級和高級，不同的難度方磚的數量和小球運動的速度將不同，玩家可以根據自己的水平來選擇合適的游戲難度。這里以其中一個按鈕為例進行說明，其它兩個按鈕制作方法類似。

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

4.磚塊的制作

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

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

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

vis = 1；stop（）；

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

todest = /：destroy；

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

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

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

（三）布置主場景

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

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

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

4.新建一個圖層命名為info，此層用來放置記分和生命值用的文本框，分別用文本工具繪制三個文本框，設置其屬性為Dynamic text動態文本框，然后給文本框添加說明性文字，從上到下分別為分數，生命值和等級，最后分別給此三個文本框設置變量名為score，balls和level_I。

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

（四）游戲控制代碼

由于篇幅問題，僅給出教學相關關鍵代碼：

新建一個圖層命名為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標識游戲是否結束，如果游戲結束，則跳轉到第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，則游戲結束

gotoAndPlay（\"loopback\"）；

四、結語

利用游戲進行flash教學是在教學實踐中值得嘗試的一步，用生動豐富多彩的游戲應用來填充枯燥乏味的actionscript語言講解不僅符合高職高專項目驅動教學的大方針，還可以使學生的注意力回到課堂本身上來，提升學生對于課程的積極性，相信隨著教學的實踐，還會有更多更好的游戲應用項目可以發掘創造。

參考文獻

[1]做個FLASH游戲設計師.計算機與網絡.2002.9.02.

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

（作者單位：湖北財稅職業學院）