Flash攝像頭游戲課件的設(shè)計(jì)之動(dòng)畫制作論文
摘要：
攝像頭游戲是隨著技術(shù)的進(jìn)步產(chǎn)生出來的一種新的游戲形式，它擺脫了鼠標(biāo)與鍵盤的限制，給游戲者以全新的互動(dòng)體驗(yàn)。Flash 8提供的位圖處理功能為Flash攝像頭游戲的實(shí)現(xiàn)提供了可能。將攝像頭游戲技術(shù)引入到Flash課件的開發(fā)，可以充分發(fā)揮其互動(dòng)性和趣味性，與傳統(tǒng)Flash課件相比，具有其不可替代的優(yōu)勢。該文提出設(shè)計(jì)Flash攝像頭游戲課件的基本原則，并以《水果樂園》課件為例，詳細(xì)介紹了開發(fā)的過程和主要實(shí)現(xiàn)方法，為攝像頭游戲類課件制作提供了參考。
關(guān)鍵詞：Flash；攝像頭游戲；
一、引言
攝像頭游戲是隨著攝像頭的普及和圖形圖像技術(shù)的不斷發(fā)展而出現(xiàn)的。它擺脫了鼠標(biāo)鍵盤的限制，給游戲者帶來全新的游戲體驗(yàn)，能夠?qū)崿F(xiàn)許多傳統(tǒng)游戲無法實(shí)現(xiàn)的游戲效果。它通過攝像頭將玩家投影到游戲中，由玩家自己做動(dòng)作與游戲進(jìn)行交互。畫面中登場的敵人或道具都將對玩家的動(dòng)作即刻做出反應(yīng)，讓玩家體驗(yàn)到前所未有的新鮮感。
Flash課件是用Flash的形式表現(xiàn)教學(xué)內(nèi)容一種課件形式。Flash課件充分利用了Flash的直觀性、互動(dòng)性以及娛樂性，能夠有效的調(diào)動(dòng)學(xué)生的學(xué)習(xí)積極性，激發(fā)學(xué)生的學(xué)習(xí)樂趣，在當(dāng)前的教學(xué)過程中發(fā)揮著越來越大的作用。Flash攝像頭游戲課件整合了攝像頭游戲和Flash課件的優(yōu)點(diǎn)，充分體現(xiàn)了寓教于樂的教學(xué)思想。它帶給學(xué)生全新的游戲感受，能夠極大的激發(fā)學(xué)生的學(xué)習(xí)興趣。它能夠激發(fā)學(xué)生的多種感觀刺激，建立強(qiáng)烈的真實(shí)感，通過游戲過程中學(xué)生與游戲的互動(dòng)，還能夠促進(jìn)學(xué)生手、耳、眼以及肢體的相互協(xié)調(diào)，達(dá)到較好的教學(xué)效果。
二、Flash攝像頭游戲課件的設(shè)計(jì)原則
Flash攝像頭游戲課件具有較好參與性、體驗(yàn)性，能夠有效增強(qiáng)學(xué)習(xí)效果，提高學(xué)習(xí)效率，特別適合于學(xué)生動(dòng)作類技能的訓(xùn)練。在設(shè)計(jì)的過程中，應(yīng)遵循如下原則，體現(xiàn)其獨(dú)特的優(yōu)勢。
（1）教學(xué)性原則
這是所有課件，應(yīng)用于教學(xué)的最基本的要求，該類課件也不例外，在設(shè)計(jì)的過程中，必須針對一定的教學(xué)目標(biāo)，遵循認(rèn)知過程的一般規(guī)律，組織教學(xué)內(nèi)容和教學(xué)活動(dòng)。緊密圍繞以學(xué)生學(xué)習(xí)為中心的設(shè)計(jì)思路。
（2）易用性原則
攝像頭游戲課件的交互，計(jì)算機(jī)對于學(xué)習(xí)者的動(dòng)作回應(yīng)，都是建立在動(dòng)作檢測，捕捉學(xué)習(xí)者動(dòng)作影像的基礎(chǔ)上。設(shè)計(jì)過程中應(yīng)考慮讓學(xué)習(xí)者的操作盡量簡便，易于上手使用。做好課件使用的幫助或者使用手冊。
（3）科學(xué)性原則
課件的內(nèi)容，不能有科學(xué)性的錯(cuò)誤，這也是設(shè)計(jì)中基本要求，必須對課件所有呈示的內(nèi)容，進(jìn)行嚴(yán)格仔細(xì)的審查，保證學(xué)生看到的所有知識(shí)點(diǎn)，都必須科學(xué)、準(zhǔn)確，一般由課件開發(fā)小組中學(xué)科專家把好關(guān)。
（4）藝術(shù)性原則
如果一個(gè)課件的展示不但取得良好的教學(xué)效果，而日‘使人賞心悅目，使人獲得美的享受，則說課件具有較高的藝術(shù)性。這樣的課件是好的內(nèi)容與美的形式的統(tǒng)一，美的形式能激發(fā)學(xué)生的興趣，史好地表現(xiàn)內(nèi)容。其表現(xiàn)有:展示的對象結(jié)構(gòu)對稱，色彩柔和，搭配合理，有審美性。
（5）體驗(yàn)性原則
攝像頭游戲課件因其交互的多維化，全方位，檢測學(xué)習(xí)者動(dòng)作，使得學(xué)習(xí)者的沉浸感很強(qiáng)，要求學(xué)習(xí)者的個(gè)人形象和課件環(huán)境融合的過程中，能讓學(xué)習(xí)能有身臨其境的感覺，所以課件在設(shè)計(jì)的過程中，注意課件環(huán)境，界面的元素，聲音的效果，都必然能激發(fā)學(xué)習(xí)者的投入感。該原則是攝像頭游戲課件設(shè)計(jì)過程中最重要的原則，也是整個(gè)課件制作的關(guān)鍵，成敗所在。
三、Flash攝像頭游戲課件的設(shè)計(jì)與實(shí)現(xiàn)
在兒童英語教學(xué)中，引入Flash攝像頭游戲課件，使得兒童擺脫鍵盤和鼠標(biāo)的單一化的交互方式，而進(jìn)行身體動(dòng)作與計(jì)算機(jī)的交互，增強(qiáng)兒童學(xué)習(xí)的體驗(yàn)感，能較好的輔助英語的學(xué)習(xí)。以下是設(shè)計(jì)與開發(fā)的水果樂園課件的實(shí)現(xiàn)步驟和主要功能代碼。
1.攝像頭圖像的捕獲
使用Camera類實(shí)現(xiàn)對攝像頭圖像的捕獲。Camera.get()方法返回對用于捕獲視頻的 Camera 對象的引用。當(dāng) SWF 文件嘗試訪問 Camera.get() 返回的攝像頭時(shí)，F(xiàn)lash Player 顯示拒絕對話框，用戶可從中選擇是允許還是拒絕對攝像頭的訪問。setMode()方法將攝像頭的`捕獲模式設(shè)置為最符合指定要求的本機(jī)模式。//新建一個(gè)Camera對象，實(shí)例名為my_cam，并設(shè)置對象屬性。var my_cam:Camera = Camera.get();my_cam.setMode(160,120,30,true);
2.攝像頭圖像的顯示
1)顯示圖像
若要實(shí)際開始捕獲視頻，必須將 Camera 對象附加到 Video 對象。attachVideo(source:Object) : Void指定將在舞臺(tái)上的 Video 對象的邊界內(nèi)顯示的視頻流 (source)。//新建一個(gè)Video對象，將Camera對象附加到Video上。var my_video:Video;my_video.attachVideo(my_cam);
2)水平翻轉(zhuǎn)圖像
由于攝像頭中看到的圖像與游戲者本人的方向相反。為了方便游戲者操作游戲，在加載圖像時(shí)應(yīng)該把圖像左右翻轉(zhuǎn)。這一操作非常重要，將直接影響游戲者的游戲體驗(yàn)。
Video._rotation 屬性可以實(shí)現(xiàn)對Video圖像的旋轉(zhuǎn)，但是無法實(shí)現(xiàn)左右翻轉(zhuǎn)的效果。
Video._xscale 屬性指示從 Video 對象注冊點(diǎn)開始應(yīng)用的 Video 對象的水平縮放比例 。當(dāng)x軸的水平縮放比例為-100時(shí)，則可以實(shí)現(xiàn)對Video對象的水平翻轉(zhuǎn)。默認(rèn)注冊點(diǎn)為 (0，0)�？s放本地坐標(biāo)系統(tǒng)將影響 _x 和 _y 屬性設(shè)置，這些設(shè)置是以整像素定義的。由于翻轉(zhuǎn)時(shí)是以左上角主測點(diǎn)為中心，因此在水平翻轉(zhuǎn)之后，Video對象的坐標(biāo)雖然未發(fā)生改變，但是整體位置向左平移了Video. _width個(gè)像素。因此翻轉(zhuǎn)之后我們需要設(shè)置Video的新坐標(biāo)為Video._x = Video._x+Video._width。
3.獲取圖像信息
要對獲取的圖像進(jìn)行分析，必須將從攝像頭獲取的圖像信息提取出來。在Flash8中， Bitmap對象存儲(chǔ)了圖像中各點(diǎn)的RGB通道信息以及Alpha通道信息，可以使用new方法建立一個(gè)Bitmap對象。然后使用draw（）方法提取某一時(shí)刻video對象中的像素信息。
draw(source:Object,[matrix:Matrix],[colorTransform.:ColorTransform], [blendMode:Object], [clipRect:Rectangle], [smooth:Boolean]) : Void使用 Flash Player 矢量呈現(xiàn)器在目標(biāo)圖像上繪制源圖像。使用 Matrix、ColorTransform、BlendMode 對象以及目標(biāo) Rectangle 對象來控制呈現(xiàn)的執(zhí)行方式�；蛘咭部梢灾付ǹs放時(shí)是否應(yīng)對位圖進(jìn)行平滑處理。這只適用于當(dāng)源對象是 BitmapData 對象時(shí)的情況。
import Flash.display.BitmapData;
//創(chuàng)建BitmapData對象Var snapshot:BitmapData=newBitmapData(output_vid._width，output_vid._height);
//從my_video獲取當(dāng)前圖像now.draw(my_video);
4.運(yùn)動(dòng)檢測的實(shí)現(xiàn)
該部分是整個(gè)攝像頭游戲?qū)崿F(xiàn)的核心。主要利用了Flash 8的位圖處理功能，即BitmapData類。
1)基本思路
我們可以使用getPixel(x，y)獲取前一張圖片上每個(gè)像素點(diǎn)的像素值，然后對比后一張圖片中的每一點(diǎn)的像素值，當(dāng)像素的亮度差值變化達(dá)到一定程度時(shí)，認(rèn)為該點(diǎn)發(fā)生了運(yùn)動(dòng)變化。通過這種方式，得到前后兩張圖片的負(fù)片效果圖。
//閥值tolerance=10;
//獲取當(dāng)前圖像now某一點(diǎn)的RGB值nc=now.getPixel(x，y);
//紅色通道nr=nc16&0xff;
//綠色通道ng=nc8&0xff;
//藍(lán)色通道nb=nc&0xff;
//計(jì)算該點(diǎn)亮度值nl=Math.sqrt(nr*nr + ng*ng + nb*nb)
//獲取前一快照before同一點(diǎn)的RGB值bc=before.getPixel(x，y);
//紅色通道br=bc16&0xff;
//綠色通道bg=bc8&0xff;
//藍(lán)色通道bb=bc&0xff;
//計(jì)算該點(diǎn)亮度值bl=Math.sqrt(br*br + bg*bg + bb*bb);
//計(jì)算亮度值的變化d=Math.round(Math.abs(bl-nl));
if(dtolerance){//該點(diǎn)發(fā)生了變化 }
但是這種方法存在計(jì)算效率問題。按圖像大小為180*160像素，每秒30幀計(jì)算，每計(jì)算一副圖片需要的計(jì)算次數(shù)為180*160*30。圖像的像素越大，需要的計(jì)算次數(shù)就越多。采用隔點(diǎn)檢測的方法可以在一定程度上緩解計(jì)算壓力，即每隔n個(gè)像素檢測一次，這樣電腦的計(jì)算次數(shù)減少為原來的1/n。
2)改進(jìn)思路
Flash8提供的圖像混合模式可以解決上面遇到的效率問題。Flash8提供了11種圖像混合模式。每一種混合模式可以得到不同的混合效果。Different 混合模式是基于兩張圖片之間的亮度差值進(jìn)行計(jì)算，從而得到圖片的負(fù)片效果。利用該模式，便可以得到移動(dòng)像素的檢測圖像。
//將前一張快照before的圖像繪制到當(dāng)前快照now上，使用different混合模式now.draw(before， new Matrix()， null， "difference");
圖像中黑色表示沒有發(fā)生移動(dòng)，其他顏色表示發(fā)生了移動(dòng)。由于Flash8提供的混合模式是采用C++編碼實(shí)現(xiàn)的，因此運(yùn)行效率要比Action Script編碼更加高效。
5.動(dòng)態(tài)顯示檢測圖像
1)處理檢測圖像
通過以上兩種方式得到的圖像中色彩范圍較廣，這增加了統(tǒng)計(jì)上面的困難。通過使用 threshold() 方法，可以隔離和替換圖像中的顏色范圍，并對圖像像素執(zhí)行其它邏輯操作。threshold（）函數(shù)根據(jù)指定的閾值測試圖像中的像素值，并將通過測試的像素設(shè)置為新的顏色值。這樣，便得到了清晰醒目的檢測圖像。
//將大于閥值0xFF111111的像素替換為綠色。
myBitmap.threshold(myBitmap， myBitmap.rectangle， myBitmap.rectangle.topLeft， ""， 0xFF111111， 0xFF00FF00， 0x00FFFFFF， false);
2)檢測圖像的顯示
Bitmap對象無法直接在舞臺(tái)上顯示，必須附著在MovieClip上面才能顯示。因此可以使用MovieClip類的attachBitmap()方法，將獲取的圖像信息顯示出來。
//創(chuàng)建一個(gè)影片剪輯來顯示當(dāng)前圖像this.createEmptyMovieClip(當(dāng)前，this.getNextHighest Depth());
//將攝像頭獲取的圖像顯示在影片剪輯內(nèi)bitmap_mc.attachBitmap(now，1);
3)檢測圖像的動(dòng)態(tài)顯示
要實(shí)現(xiàn)檢測圖像的動(dòng)態(tài)顯示，必須不斷的更新當(dāng)前圖像now和歷史圖像before，并進(jìn)行混合處理�？梢园褭z測圖像的功能寫成方法snapshot()，每隔100毫秒調(diào)用一次。
偽代碼如下：
function snapshot() {//獲取當(dāng)前圖像//獲取檢測圖像//將檢測圖像繪制到//將檢測圖像中RGB超過閥值0xFF111111的部分替換成綠色//顯示檢測圖像//本次檢測完成之后，當(dāng)前圖像便成為了歷史圖像。為下一次檢測做好準(zhǔn)備。preBitmap = nowBitmap.clone();}
在該方法中，關(guān)鍵在于每次檢測完成之后當(dāng)前圖像和歷史圖像的更新。
6.檢測特定區(qū)域內(nèi)的運(yùn)動(dòng)狀態(tài)
經(jīng)過上面幾步操作，已經(jīng)得到了檢測圖像。檢測圖像是對整幅圖像的運(yùn)動(dòng)情況的反映。在游戲中，經(jīng)常需要檢測的是某一特定區(qū)域的運(yùn)動(dòng)狀態(tài)。
1)檢測某點(diǎn)的運(yùn)動(dòng)狀態(tài)
因?yàn)橐呀?jīng)到了檢測圖像，所以在檢測某一點(diǎn)運(yùn)動(dòng)狀態(tài)時(shí)，只需要判斷檢測圖像上該點(diǎn)的RGB值是否大于閥值。
偽代碼如下：
pix = myBitmap.getPixel(x， y);if (pix大于閥值) {//該點(diǎn)發(fā)生了運(yùn)動(dòng)}
2)檢測某區(qū)域的運(yùn)動(dòng)狀態(tài)
由于燈光因素、攝像頭圖像噪點(diǎn)等干擾因素的存在，每次只檢測一個(gè)點(diǎn)容易造成檢測結(jié)果的不穩(wěn)定。因此，大多采用區(qū)域檢測的方式。即在檢測某點(diǎn)運(yùn)動(dòng)狀態(tài)時(shí)，檢測的不僅僅是這個(gè)點(diǎn)，而是以該點(diǎn)開始的n*n個(gè)像素的區(qū)域（n的取值根據(jù)實(shí)際情況確定，在檢測點(diǎn)數(shù)量較多時(shí)，n的值不宜取太大。）。如果檢測區(qū)域內(nèi)的像素點(diǎn)變化數(shù)量超過一定閥值，如60％，則認(rèn)為該區(qū)域發(fā)生了運(yùn)動(dòng)。
需要注意的一點(diǎn)是，由于看到的圖像是經(jīng)過水平翻轉(zhuǎn)的，但原有的圖像內(nèi)部坐標(biāo)系并沒有發(fā)生變化，因此，檢測時(shí)的取點(diǎn)位置也要水平翻轉(zhuǎn)。
//以(rectx，recty)為頂點(diǎn)的rectw*recth的矩形區(qū)域的運(yùn)動(dòng)情況
function ismove(a， rectx， recty， rectw， recth) {var i， j;
var sum = 0;
var pix;
for (i=1; i=rectw; i++) {for (j=1; j=recth; j++) {//圖像水平翻轉(zhuǎn)后取點(diǎn)位置相對變化pix = a.getPixel(160-i-rectx， j+recty);
if (pix132361) {sum++;
//trace("sum="+sum);
if (sum(recth*rectw/2)) {return (sum);
//該區(qū)域發(fā)生了運(yùn)動(dòng)} else {return 0;}}
在該方法中，檢測圖像、檢測區(qū)域頂點(diǎn)坐標(biāo)、檢測區(qū)域大小都為作為變量輸入。采用這種方法，提高了程序的重用性，還可以實(shí)現(xiàn)對運(yùn)動(dòng)物體的檢測。
3)檢測點(diǎn)的設(shè)置
所謂檢測點(diǎn)，實(shí)際是一個(gè)影片剪輯。在進(jìn)行區(qū)域檢測時(shí)，以該影片剪輯的坐標(biāo)（x，y）確定檢測區(qū)域的坐標(biāo)位置。檢測點(diǎn)可以是一個(gè)不可見的輔助點(diǎn)，也可以是舞臺(tái)中運(yùn)動(dòng)的物體。當(dāng)把運(yùn)動(dòng)物體做為檢測點(diǎn)時(shí)，隨著物體的移動(dòng)，檢測區(qū)域也隨之移動(dòng)，因此可以實(shí)現(xiàn)對運(yùn)動(dòng)物體的檢測。檢測點(diǎn)的作用：一是可以起到輔助點(diǎn)的作用，簡化了檢測區(qū)域定位的繁瑣工作，使定位操作可視化。二是實(shí)現(xiàn)了代碼的重用，起到了簡化程序的作用。
7.實(shí)現(xiàn)攝像頭運(yùn)動(dòng)檢測的控制接口
游戲中檢測點(diǎn)接口的作用就是返回舞臺(tái)中被觸碰的檢測點(diǎn)編號(hào)。在接口函數(shù)中，調(diào)用了以上幾個(gè)功能函數(shù)。返回值為檢測點(diǎn)編號(hào)。
function istouch() {var max:Number = 0;
var min:Number;
var num:Number;
for (var i = 1; i=9; i++) {//檢測第i個(gè)檢測點(diǎn)是否被觸碰min = ismove(myBitmap, this["point"+i]._x-xpoint, this["point"+i]._y-ypoint, 10, 10);
//每次只能激發(fā)一個(gè)點(diǎn)，選擇9個(gè)點(diǎn)中移動(dòng)最顯著的一個(gè)if (max max = min;num = i;}}
if (num) {//返回被觸碰的點(diǎn)的序號(hào)return (num);} else {//一個(gè)檢測點(diǎn)也沒碰到！;return 0;}}
8.游戲交互功能的實(shí)現(xiàn)
游戲功能交互的實(shí)現(xiàn)tulaoshi.com方法和其他Flash游戲大體類似。在此游戲中，主要包括3大功能模塊：子彈系統(tǒng)，氣球系統(tǒng) 和主控制系統(tǒng)。
1)子彈系統(tǒng)的實(shí)現(xiàn)
該部分主要是實(shí)現(xiàn)子彈的運(yùn)動(dòng)。游戲中有9個(gè)檢測點(diǎn)，每個(gè)檢測點(diǎn)都可以發(fā)射子彈。各位置發(fā)射的子彈運(yùn)動(dòng)方向是不同的。第i個(gè)檢測點(diǎn)的子彈方向?yàn)閞ot=i*20，初始位置在界面底部中央。
this._x = this._x-30*Math.cos(rot*Math.PI/180);
this._y = this._y-30*Math.sin(rot*Math.PI/180);
當(dāng)子彈出界時(shí)，要使用this.unloadMovie()方法將該子彈實(shí)例銷毀，釋放內(nèi)存。
2)氣球系統(tǒng)的實(shí)現(xiàn)
該部分主要是實(shí)現(xiàn)氣球的碰撞檢測，判斷氣球是否被子彈擊中需使用hitTest()函數(shù)。該函數(shù)有兩種用法：
用法 1：
根據(jù) shapeFlag 設(shè)置，將 x 和 y 坐標(biāo)與指定實(shí)例的形狀或邊框進(jìn)行比較。如果 shapeFlag 設(shè)置為 true，則只計(jì)算在舞臺(tái)上的實(shí)例實(shí)際占據(jù)的區(qū)域，并且如果 x 和 y 在任意一點(diǎn)重疊，則返回 true 值。
用法 2：
計(jì)算 target 和指定實(shí)例的邊框，如果它們在任意一點(diǎn)上重疊或交叉，則返回 true。
3)主控制系統(tǒng)的實(shí)現(xiàn)
主控制系統(tǒng)是實(shí)現(xiàn)互動(dòng)功能的核心部分。主要工作就是把游戲中所有的功能模塊集成起來，對各功能模塊進(jìn)行調(diào)度和顯示。一方面，主控制系統(tǒng)要接收從攝像頭功能接口傳遞的信息；一方面根據(jù)接收的信息執(zhí)行相應(yīng)的功能代碼。
四、結(jié)束語
Flash攝像頭游戲課件能夠?qū)崿F(xiàn)很多傳統(tǒng)Flash課件難以實(shí)現(xiàn)的效果，特別是對操作技能的培養(yǎng)。我們開發(fā)的《水果樂園》課件提供給一些小學(xué)，進(jìn)行了英語學(xué)習(xí)實(shí)踐,效果還不錯(cuò)。但是，對于Flash攝像頭游戲課件應(yīng)用于學(xué)生高級(jí)思維策略的訓(xùn)練，還沒有進(jìn)行深入的研究，特別是角色扮演型、問題探究型等學(xué)習(xí)模式等實(shí)施，有待進(jìn)一步的的探索和實(shí)踐。
【Flash攝像頭游戲課件的設(shè)計(jì)之動(dòng)畫制作論文】相關(guān)文章：
小學(xué)flash動(dòng)畫課件制作方法03-26
flash教學(xué)課件制作03-29
制作flash教學(xué)課件03-28
小學(xué)flash課件制作03-24
初識(shí)flash動(dòng)畫教學(xué)課件03-30
小學(xué)動(dòng)畫《FLASH入門》課件03-22
如何制作flash游戲論文06-12