利用ActionScript3.0代碼實(shí)現(xiàn)卡片翻轉(zhuǎn)動(dòng)畫(huà)效果

陳雨婕

摘要：隨著Flash 軟件的發(fā)展和強(qiáng)大的ActionScript 3.0 面向?qū)ο笳Z(yǔ)言的推出，大大的提高了用Flash 開(kāi)發(fā)游戲的效率。通過(guò)卡片影片剪輯元件及其類(lèi)文件的設(shè)計(jì)，介紹了利用ActionScript 3.0代碼來(lái)實(shí)現(xiàn)卡片翻轉(zhuǎn)動(dòng)畫(huà)效果的方法。

關(guān)鍵詞：ActionScript3.0；卡片；翻轉(zhuǎn)；動(dòng)畫(huà)效果

中圖分類(lèi)號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2014）17-4118-02

Using ActionScript3.0 Code to Achieve Animation Effects of Flip Cards

CHEN Yu-jie

（Department of Science and Technology， Gansu Industry Polytechnic College， Tianshui 741025， China）

Abstract： With the development of Flash software and powerful object oriented language of ActionScript 3.0 is introduced， greatly improve the efficiency of Flash game development. Through design movie clip and the class file of the card element ，introduces the method of using ActionScript 3.0 code achieve animation effects of flip cards.

Key words： ActionScript3.0；card；flip； animation effects

ActionScript是一種基于Flash、Flex等多種開(kāi)發(fā)環(huán)境、面向?qū)ο缶幊痰哪_本語(yǔ)言。最新版本ActionScript 3.0（以下簡(jiǎn)稱(chēng)AS3）是Flash編程語(yǔ)言的一次重大升級(jí)，它相對(duì)于ActionScript 的早期版本更加高效、清晰和完善。AS3在Flash 內(nèi)容和應(yīng)用程序中實(shí)現(xiàn)了交互性、數(shù)據(jù)處理以及其它許多功能，可以有效的提高以Flash Player 為目標(biāo)的內(nèi)容和應(yīng)用程序的開(kāi)發(fā)效率。

在諸如配對(duì)游戲等簡(jiǎn)單的記憶類(lèi)游戲中，卡片的翻轉(zhuǎn)動(dòng)畫(huà)效果是必不可少的。在此類(lèi)游戲中，所有卡片開(kāi)始時(shí)正面朝下隨機(jī)排列，然后用鼠標(biāo)單擊卡片，可翻開(kāi)這張卡片，同樣當(dāng)翻開(kāi)第二張卡片時(shí)，會(huì)將翻開(kāi)的兩張卡片進(jìn)行配對(duì)。若兩張卡片匹配，則拿走這兩張卡片，否則卡片將會(huì)自動(dòng)翻轉(zhuǎn)到正面朝下放置。要實(shí)現(xiàn)卡片翻轉(zhuǎn)的動(dòng)畫(huà)效果，我們可以通過(guò)在影片剪輯中設(shè)計(jì)逐幀動(dòng)畫(huà)或關(guān)鍵幀的補(bǔ)間動(dòng)畫(huà)，在幀上以動(dòng)畫(huà)序列的形式顯示卡片翻轉(zhuǎn)，但這樣做要比用ActionScript實(shí)現(xiàn)麻煩許多，如果沒(méi)有豐富的動(dòng)畫(huà)經(jīng)驗(yàn)和熟練的鼠繪操作，很難想象卡片翻轉(zhuǎn)的逐步動(dòng)畫(huà)。利用AS3代碼來(lái)實(shí)現(xiàn)卡片翻轉(zhuǎn)的動(dòng)畫(huà)效果，既減少了使用者對(duì)工具的操作，又可以制作出逼真的動(dòng)畫(huà)，大大提高了游戲開(kāi)發(fā)的效率，這是人的手工制作無(wú)法比擬的。

1 卡片影片剪輯元件的設(shè)計(jì)

1） 制作卡片的影片剪輯元件，影片剪輯中至少要有19幀，第1幀用來(lái)顯示卡片背面，2-19幀用來(lái)顯示18張卡片上不同圖像的卡片正面，如圖1所示。

2） 為卡片影片剪輯創(chuàng)建Card類(lèi)，即創(chuàng)建Card.as文件。

3） 編寫(xiě)Card.as類(lèi)文件，完成卡片翻轉(zhuǎn)動(dòng)畫(huà)。

2 Card.as類(lèi)文件的設(shè)計(jì)

2.1 設(shè)計(jì)思路

1） 定義變量fanZhuanbs并設(shè)初值為10，代表整個(gè)翻轉(zhuǎn)的動(dòng)畫(huà)需要10步即10幀完成。

2） 定義函數(shù)kaiShiFanZhuan，在主類(lèi)文件中當(dāng)單擊卡片時(shí)，調(diào)用kaiShiFanZhuan函數(shù)，并根據(jù)條件傳遞不同參數(shù)（翻轉(zhuǎn)到第幾幀去顯示圖像）。在函數(shù)中對(duì)卡片對(duì)象加進(jìn)入幀事件偵聽(tīng)，每進(jìn)入一幀，便調(diào)用fanZhuan函數(shù)。

3） 定義fanZhuan函數(shù)。當(dāng)調(diào)用fanZhuan函數(shù)時(shí)，fanZhuanbs—，即完成一步減少一幀。

當(dāng)fanZhuanbs的值在10到6之間時(shí)，scaleX的屬性設(shè)為0.2*（ fanZhuanbs-5），那么scaleX的值將為1，0.8，0.6，0.4，0.2，每進(jìn)行一步影片剪輯在X方向就縮小一點(diǎn)，相當(dāng)于每進(jìn)行一步，卡片就會(huì)由正面朝下或朝上平放逐步翻轉(zhuǎn)到立放。

當(dāng)fanZhuanbs的值在5到0之間時(shí)，scaleX的屬性重新設(shè)為0.2*（ 5-fanZhuanbs），那么scaleX的值將為0，0.2，0.4，0.6，0.8，1.0，每進(jìn)行一步影片剪輯就會(huì)在X方向放大一點(diǎn)，相當(dāng)于每進(jìn)行一步，卡片就會(huì)由立放逐步翻轉(zhuǎn)到圖像正面朝上或朝下平放。

當(dāng)fanZhuanbs等于5即運(yùn)行到第5步時(shí)，卡片將跳至新的一幀來(lái)顯示需要顯示的圖像。

當(dāng)fanZhuanbs等于0時(shí)，說(shuō)明翻轉(zhuǎn)完成，則刪除進(jìn)入幀偵聽(tīng)，結(jié)束動(dòng)畫(huà)。

2.2 代碼實(shí)現(xiàn)

package

{import flash.display.MovieClip；

import flash.events.*；

public dynamic class Card extends MovieClip

{private var isFliping：Boolean = false； //定義布爾變量，表示是否翻轉(zhuǎn)

private var fanZhuanbs：uint； //定義變量代表翻轉(zhuǎn)步數(shù)endprint

private var flipToFrame：uint； //定義變量表示卡片翻轉(zhuǎn)到哪一幀顯示圖像

/*開(kāi)始翻轉(zhuǎn)動(dòng)畫(huà)，可由主類(lèi)根據(jù)條件來(lái)確定卡片影片剪輯要翻轉(zhuǎn)到的幀數(shù)即要顯示哪張圖像作為實(shí)參傳遞給形參whichFrame，并用變量flipToFrame記住翻轉(zhuǎn)到的幀數(shù)。*/

public function kaiShiFanZhuan （whichFrame：uint）：void

{isFliping = true；

fanZhuanbs = 10； //翻轉(zhuǎn)動(dòng)畫(huà)10步完成，定義初始值

flipToFrame = whichFrame；

this.addEventListener（Event.ENTER_FRAME， fanZhuan）； }

/*對(duì)卡片加進(jìn)入幀事件偵聽(tīng)，每進(jìn)入一幀，便調(diào)用fanZhuan函數(shù)，來(lái)完成一步翻轉(zhuǎn)動(dòng)畫(huà)，整個(gè)動(dòng)畫(huà)需要10幀完成*/

//10步完成翻轉(zhuǎn)動(dòng)畫(huà)

public function fanZhuan （cs：Event）：void

{fanZhuanbs —； //下一步

if （fanZhuanbs > 5）

{//翻轉(zhuǎn)的前半部分，即卡片由平放逐步翻轉(zhuǎn)到立放

this.scaleX = 0.2*（ fanZhuanbs-5）；}

else

{//翻轉(zhuǎn)的后半部分，即卡片由立放逐步翻轉(zhuǎn)到平放

this.scaleX = 0.2*（ 5-fanZhuanbs）；}

if （fanZhuanbs == 5）

{//當(dāng)翻轉(zhuǎn)動(dòng)畫(huà)進(jìn)行到中間部分，卡片將跳至新的一幀來(lái)顯示需要顯示的圖像

this.gotoAndStop（flipToFrame）；}

if （flipStep == 0）

{//翻轉(zhuǎn)完成，則刪除進(jìn)入幀偵聽(tīng)，結(jié)束動(dòng)畫(huà)

this.removeEventListener（Event.ENTER_FRAME， fanZhuan）；}}}}

3 結(jié)束語(yǔ)

AS3與Flash結(jié)合，不僅能夠創(chuàng)建各種不同的應(yīng)用特效，實(shí)現(xiàn)豐富多彩的動(dòng)畫(huà)效果，而且能使Flash創(chuàng)建的動(dòng)畫(huà)具有更強(qiáng)的動(dòng)態(tài)性、交互性和高效性，廣泛的應(yīng)用于動(dòng)畫(huà)、游戲、特效、應(yīng)用程序及網(wǎng)絡(luò)程序等領(lǐng)域。

參考文獻(xiàn)：

[1] （美）Gary Rosenzweig.ActionScrip 3.0游戲編程（第2版）[M].胡蓉，張東寧，朱栗華，譯.北京：人民郵電出版社，2013.

[2] 孫穎. Flash Action 3殿堂之路[M]. 北京：電子工業(yè)出版社，2007.

[3] （美）Todd Perkins.Flash ActionScript3.0實(shí)訓(xùn)課堂[M].張猛譯.北京：人民郵電出版社， 2008.endprint

private var flipToFrame：uint； //定義變量表示卡片翻轉(zhuǎn)到哪一幀顯示圖像

/*開(kāi)始翻轉(zhuǎn)動(dòng)畫(huà)，可由主類(lèi)根據(jù)條件來(lái)確定卡片影片剪輯要翻轉(zhuǎn)到的幀數(shù)即要顯示哪張圖像作為實(shí)參傳遞給形參whichFrame，并用變量flipToFrame記住翻轉(zhuǎn)到的幀數(shù)。*/

public function kaiShiFanZhuan （whichFrame：uint）：void

{isFliping = true；

fanZhuanbs = 10； //翻轉(zhuǎn)動(dòng)畫(huà)10步完成，定義初始值

flipToFrame = whichFrame；

this.addEventListener（Event.ENTER_FRAME， fanZhuan）； }

/*對(duì)卡片加進(jìn)入幀事件偵聽(tīng)，每進(jìn)入一幀，便調(diào)用fanZhuan函數(shù)，來(lái)完成一步翻轉(zhuǎn)動(dòng)畫(huà)，整個(gè)動(dòng)畫(huà)需要10幀完成*/

//10步完成翻轉(zhuǎn)動(dòng)畫(huà)

public function fanZhuan （cs：Event）：void

{fanZhuanbs —； //下一步

if （fanZhuanbs > 5）

{//翻轉(zhuǎn)的前半部分，即卡片由平放逐步翻轉(zhuǎn)到立放

this.scaleX = 0.2*（ fanZhuanbs-5）；}

else

{//翻轉(zhuǎn)的后半部分，即卡片由立放逐步翻轉(zhuǎn)到平放

this.scaleX = 0.2*（ 5-fanZhuanbs）；}

if （fanZhuanbs == 5）

{//當(dāng)翻轉(zhuǎn)動(dòng)畫(huà)進(jìn)行到中間部分，卡片將跳至新的一幀來(lái)顯示需要顯示的圖像

this.gotoAndStop（flipToFrame）；}

if （flipStep == 0）

{//翻轉(zhuǎn)完成，則刪除進(jìn)入幀偵聽(tīng)，結(jié)束動(dòng)畫(huà)

this.removeEventListener（Event.ENTER_FRAME， fanZhuan）；}}}}

3 結(jié)束語(yǔ)

AS3與Flash結(jié)合，不僅能夠創(chuàng)建各種不同的應(yīng)用特效，實(shí)現(xiàn)豐富多彩的動(dòng)畫(huà)效果，而且能使Flash創(chuàng)建的動(dòng)畫(huà)具有更強(qiáng)的動(dòng)態(tài)性、交互性和高效性，廣泛的應(yīng)用于動(dòng)畫(huà)、游戲、特效、應(yīng)用程序及網(wǎng)絡(luò)程序等領(lǐng)域。

參考文獻(xiàn)：

[1] （美）Gary Rosenzweig.ActionScrip 3.0游戲編程（第2版）[M].胡蓉，張東寧，朱栗華，譯.北京：人民郵電出版社，2013.

[2] 孫穎. Flash Action 3殿堂之路[M]. 北京：電子工業(yè)出版社，2007.

[3] （美）Todd Perkins.Flash ActionScript3.0實(shí)訓(xùn)課堂[M].張猛譯.北京：人民郵電出版社， 2008.endprint

private var flipToFrame：uint； //定義變量表示卡片翻轉(zhuǎn)到哪一幀顯示圖像

/*開(kāi)始翻轉(zhuǎn)動(dòng)畫(huà)，可由主類(lèi)根據(jù)條件來(lái)確定卡片影片剪輯要翻轉(zhuǎn)到的幀數(shù)即要顯示哪張圖像作為實(shí)參傳遞給形參whichFrame，并用變量flipToFrame記住翻轉(zhuǎn)到的幀數(shù)。*/

public function kaiShiFanZhuan （whichFrame：uint）：void

{isFliping = true；

fanZhuanbs = 10； //翻轉(zhuǎn)動(dòng)畫(huà)10步完成，定義初始值

flipToFrame = whichFrame；

this.addEventListener（Event.ENTER_FRAME， fanZhuan）； }

/*對(duì)卡片加進(jìn)入幀事件偵聽(tīng)，每進(jìn)入一幀，便調(diào)用fanZhuan函數(shù)，來(lái)完成一步翻轉(zhuǎn)動(dòng)畫(huà)，整個(gè)動(dòng)畫(huà)需要10幀完成*/

//10步完成翻轉(zhuǎn)動(dòng)畫(huà)

public function fanZhuan （cs：Event）：void

{fanZhuanbs —； //下一步

if （fanZhuanbs > 5）

{//翻轉(zhuǎn)的前半部分，即卡片由平放逐步翻轉(zhuǎn)到立放

this.scaleX = 0.2*（ fanZhuanbs-5）；}

else

{//翻轉(zhuǎn)的后半部分，即卡片由立放逐步翻轉(zhuǎn)到平放

this.scaleX = 0.2*（ 5-fanZhuanbs）；}

if （fanZhuanbs == 5）

{//當(dāng)翻轉(zhuǎn)動(dòng)畫(huà)進(jìn)行到中間部分，卡片將跳至新的一幀來(lái)顯示需要顯示的圖像

this.gotoAndStop（flipToFrame）；}

if （flipStep == 0）

{//翻轉(zhuǎn)完成，則刪除進(jìn)入幀偵聽(tīng)，結(jié)束動(dòng)畫(huà)

this.removeEventListener（Event.ENTER_FRAME， fanZhuan）；}}}}

3 結(jié)束語(yǔ)

AS3與Flash結(jié)合，不僅能夠創(chuàng)建各種不同的應(yīng)用特效，實(shí)現(xiàn)豐富多彩的動(dòng)畫(huà)效果，而且能使Flash創(chuàng)建的動(dòng)畫(huà)具有更強(qiáng)的動(dòng)態(tài)性、交互性和高效性，廣泛的應(yīng)用于動(dòng)畫(huà)、游戲、特效、應(yīng)用程序及網(wǎng)絡(luò)程序等領(lǐng)域。

參考文獻(xiàn)：

[1] （美）Gary Rosenzweig.ActionScrip 3.0游戲編程（第2版）[M].胡蓉，張東寧，朱栗華，譯.北京：人民郵電出版社，2013.

[2] 孫穎. Flash Action 3殿堂之路[M]. 北京：電子工業(yè)出版社，2007.

[3] （美）Todd Perkins.Flash ActionScript3.0實(shí)訓(xùn)課堂[M].張猛譯.北京：人民郵電出版社， 2008.endprint