利用ActionScript3.0代码实现卡片翻转动画效果

陈雨婕

摘要：随着Flash 软件的发展和强大的ActionScript 3.0 面向对象语言的推出，大大的提高了用Flash 开发游戏的效率。通过卡片影片剪辑元件及其类文件的设计，介绍了利用ActionScript 3.0代码来实现卡片翻转动画效果的方法。

关键词：ActionScript3.0；卡片；翻转；动画效果

中图分类号：TP311 文献标识码：A 文章编号：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等多种开发环境、面向对象编程的脚本语言。最新版本ActionScript 3.0（以下简称AS3）是Flash编程语言的一次重大升级，它相对于ActionScript 的早期版本更加高效、清晰和完善。AS3在Flash 内容和应用程序中实现了交互性、数据处理以及其它许多功能，可以有效的提高以Flash Player 为目标的内容和应用程序的开发效率。

在诸如配对游戏等简单的记忆类游戏中，卡片的翻转动画效果是必不可少的。在此类游戏中，所有卡片开始时正面朝下随机排列，然后用鼠标单击卡片，可翻开这张卡片，同样当翻开第二张卡片时，会将翻开的两张卡片进行配对。若两张卡片匹配，则拿走这两张卡片，否则卡片将会自动翻转到正面朝下放置。要实现卡片翻转的动画效果，我们可以通过在影片剪辑中设计逐帧动画或关键帧的补间动画，在帧上以动画序列的形式显示卡片翻转，但这样做要比用ActionScript实现麻烦许多，如果没有丰富的动画经验和熟练的鼠绘操作，很难想象卡片翻转的逐步动画。利用AS3代码来实现卡片翻转的动画效果，既减少了使用者对工具的操作，又可以制作出逼真的动画，大大提高了游戏开发的效率，这是人的手工制作无法比拟的。

1 卡片影片剪辑元件的设计

1） 制作卡片的影片剪辑元件，影片剪辑中至少要有19帧，第1帧用来显示卡片背面，2-19帧用来显示18张卡片上不同图像的卡片正面，如图1所示。

2） 为卡片影片剪辑创建Card类，即创建Card.as文件。

3） 编写Card.as类文件，完成卡片翻转动画。

2 Card.as类文件的设计

2.1 设计思路

1） 定义变量fanZhuanbs并设初值为10，代表整个翻转的动画需要10步即10帧完成。

2） 定义函数kaiShiFanZhuan，在主类文件中当单击卡片时，调用kaiShiFanZhuan函数，并根据条件传递不同参数（翻转到第几帧去显示图像）。在函数中对卡片对象加进入帧事件侦听，每进入一帧，便调用fanZhuan函数。

3） 定义fanZhuan函数。当调用fanZhuan函数时，fanZhuanbs—，即完成一步减少一帧。

当fanZhuanbs的值在10到6之间时，scaleX的属性设为0.2*（ fanZhuanbs-5），那么scaleX的值将为1，0.8，0.6，0.4，0.2，每进行一步影片剪辑在X方向就缩小一点，相当于每进行一步，卡片就会由正面朝下或朝上平放逐步翻转到立放。

当fanZhuanbs的值在5到0之间时，scaleX的属性重新设为0.2*（ 5-fanZhuanbs），那么scaleX的值将为0，0.2，0.4，0.6，0.8，1.0，每进行一步影片剪辑就会在X方向放大一点，相当于每进行一步，卡片就会由立放逐步翻转到图像正面朝上或朝下平放。

当fanZhuanbs等于5即运行到第5步时，卡片将跳至新的一帧来显示需要显示的图像。

当fanZhuanbs等于0时，说明翻转完成，则删除进入帧侦听，结束动画。

2.2 代码实现

package

{import flash.display.MovieClip；

import flash.events.*；

public dynamic class Card extends MovieClip

{private var isFliping：Boolean = false； //定义布尔变量，表示是否翻转

private var fanZhuanbs：uint； //定义变量代表翻转步数endprint

private var flipToFrame：uint； //定义变量表示卡片翻转到哪一帧显示图像

/*开始翻转动画，可由主类根据条件来确定卡片影片剪辑要翻转到的帧数即要显示哪张图像作为实参传递给形参whichFrame，并用变量flipToFrame记住翻转到的帧数。*/

public function kaiShiFanZhuan （whichFrame：uint）：void

{isFliping = true；

fanZhuanbs = 10； //翻转动画10步完成，定义初始值

flipToFrame = whichFrame；

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

/*对卡片加进入帧事件侦听，每进入一帧，便调用fanZhuan函数，来完成一步翻转动画，整个动画需要10帧完成*/

//10步完成翻转动画

public function fanZhuan （cs：Event）：void

{fanZhuanbs —； //下一步

if （fanZhuanbs > 5）

{//翻转的前半部分，即卡片由平放逐步翻转到立放

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

else

{//翻转的后半部分，即卡片由立放逐步翻转到平放

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

if （fanZhuanbs == 5）

{//当翻转动画进行到中间部分，卡片将跳至新的一帧来显示需要显示的图像

this.gotoAndStop（flipToFrame）；}

if （flipStep == 0）

{//翻转完成，则删除进入帧侦听，结束动画

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

3 结束语

AS3与Flash结合，不仅能够创建各种不同的应用特效，实现丰富多彩的动画效果，而且能使Flash创建的动画具有更强的动态性、交互性和高效性，广泛的应用于动画、游戏、特效、应用程序及网络程序等领域。

参考文献：

[1] （美）Gary Rosenzweig.ActionScrip 3.0游戏编程（第2版）[M].胡蓉，张东宁，朱栗华，译.北京：人民邮电出版社，2013.

[2] 孙颖. Flash Action 3殿堂之路[M]. 北京：电子工业出版社，2007.

[3] （美）Todd Perkins.Flash ActionScript3.0实训课堂[M].张猛译.北京：人民邮电出版社， 2008.endprint

private var flipToFrame：uint； //定义变量表示卡片翻转到哪一帧显示图像

/*开始翻转动画，可由主类根据条件来确定卡片影片剪辑要翻转到的帧数即要显示哪张图像作为实参传递给形参whichFrame，并用变量flipToFrame记住翻转到的帧数。*/

public function kaiShiFanZhuan （whichFrame：uint）：void

{isFliping = true；

fanZhuanbs = 10； //翻转动画10步完成，定义初始值

flipToFrame = whichFrame；

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

/*对卡片加进入帧事件侦听，每进入一帧，便调用fanZhuan函数，来完成一步翻转动画，整个动画需要10帧完成*/

//10步完成翻转动画

public function fanZhuan （cs：Event）：void

{fanZhuanbs —； //下一步

if （fanZhuanbs > 5）

{//翻转的前半部分，即卡片由平放逐步翻转到立放

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

else

{//翻转的后半部分，即卡片由立放逐步翻转到平放

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

if （fanZhuanbs == 5）

{//当翻转动画进行到中间部分，卡片将跳至新的一帧来显示需要显示的图像

this.gotoAndStop（flipToFrame）；}

if （flipStep == 0）

{//翻转完成，则删除进入帧侦听，结束动画

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

3 结束语

AS3与Flash结合，不仅能够创建各种不同的应用特效，实现丰富多彩的动画效果，而且能使Flash创建的动画具有更强的动态性、交互性和高效性，广泛的应用于动画、游戏、特效、应用程序及网络程序等领域。

参考文献：

[1] （美）Gary Rosenzweig.ActionScrip 3.0游戏编程（第2版）[M].胡蓉，张东宁，朱栗华，译.北京：人民邮电出版社，2013.

[2] 孙颖. Flash Action 3殿堂之路[M]. 北京：电子工业出版社，2007.

[3] （美）Todd Perkins.Flash ActionScript3.0实训课堂[M].张猛译.北京：人民邮电出版社， 2008.endprint

private var flipToFrame：uint； //定义变量表示卡片翻转到哪一帧显示图像

/*开始翻转动画，可由主类根据条件来确定卡片影片剪辑要翻转到的帧数即要显示哪张图像作为实参传递给形参whichFrame，并用变量flipToFrame记住翻转到的帧数。*/

public function kaiShiFanZhuan （whichFrame：uint）：void

{isFliping = true；

fanZhuanbs = 10； //翻转动画10步完成，定义初始值

flipToFrame = whichFrame；

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

/*对卡片加进入帧事件侦听，每进入一帧，便调用fanZhuan函数，来完成一步翻转动画，整个动画需要10帧完成*/

//10步完成翻转动画

public function fanZhuan （cs：Event）：void

{fanZhuanbs —； //下一步

if （fanZhuanbs > 5）

{//翻转的前半部分，即卡片由平放逐步翻转到立放

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

else

{//翻转的后半部分，即卡片由立放逐步翻转到平放

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

if （fanZhuanbs == 5）

{//当翻转动画进行到中间部分，卡片将跳至新的一帧来显示需要显示的图像

this.gotoAndStop（flipToFrame）；}

if （flipStep == 0）

{//翻转完成，则删除进入帧侦听，结束动画

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

3 结束语

AS3与Flash结合，不仅能够创建各种不同的应用特效，实现丰富多彩的动画效果，而且能使Flash创建的动画具有更强的动态性、交互性和高效性，广泛的应用于动画、游戏、特效、应用程序及网络程序等领域。

参考文献：

[1] （美）Gary Rosenzweig.ActionScrip 3.0游戏编程（第2版）[M].胡蓉，张东宁，朱栗华，译.北京：人民邮电出版社，2013.

[2] 孙颖. Flash Action 3殿堂之路[M]. 北京：电子工业出版社，2007.

[3] （美）Todd Perkins.Flash ActionScript3.0实训课堂[M].张猛译.北京：人民邮电出版社， 2008.endprint