如何用ActionScript3.0代码实现完美飘雪场景

2012-04-29 00:44陈雨婕
电脑知识与技术 2012年33期
关键词:计时器关键帧图层

摘要:ActionScript3.0可以有效的提高以FlashPlayer为目标的内容和应用程序的开发效率。通过图层设计、界面设计以及ActionScript代码设计三个方面,介绍了应用ActionScript3.0事件处理机制实现飘雪场景的制作方法。同时,该方法也适用于其他常用场景的制作。

关键词:ActionScript3.0;飘雪;事件侦听;事件处理

中图分类号:TP311 文献标识码:A 文章编号:1009-3044(2012)33-7922-03

ActionScript是一种基于Flash、Flex等多种开发环境、面向对象编程的脚本语言。其主要用于Flash动画控制、为Flash影片添加各种特效、实现复杂动画、交互动画以及开发各种富网络应用的动画程序等[1]。随着FlashCS3的发布,ActionScript3.0(以下简称AS3)横空出世了。AS3的推出使脚本语言的发展上升到一个新的高度。随着脚本语言的日趋成熟,AS3已经在Web、视频、音乐等多个领域得到了广泛应用,但对于很多习惯了ActionScript1.0和2.0的开发人员在面对AS3的巨大变化的同时又觉得不知所措[2],下面针对如何应用AS3中强大的事件处理机制来实现完美飘雪场景的制作方法进行介绍。

1设计的基本思想

时间轴也叫时间线,是一条贯穿时间的轴,用于表示对象在不同时间存在的不同状态,利用时间轴可以创建各种动画效果。飘雪场景设计的基本思想是在Flash时间轴上设定三图层,分别放置三个关键帧。第一个图层的关键帧用来放背景图片,第二个图层关键帧用来放文字动画,第三个图层的关键帧用来放置AS3代码,用代码来实现漫天雪花飘落的场景。下面将分别从图层设计、界面设计以及ActionScript代码设计三方面加以说明[3]。

2图层设计及影片剪辑元件的制作

2.1图层设计

图层就像是含有文字和图形等元素的胶片,一张张按顺序叠放在一起,组合起来形成页面的最终效果。图层有两大特点,一是除了画有图形或文字的地方,其他部分都是透明的,二是图层又是相对独立的,修改其中一层,不会影响到其他层[3]。该文把图层分为Bj、Wz和As等3个基本层,其中前面2个层用于显示。各个层的功能如表1所示。

表1 各图层的功能

[图层名称\&放置对象\&作用\&Bj\&背景图片\&用于放置飘雪场景的背景图片\&Wz\&文字的影片剪辑元件\&用于放置体现场景的文字动画\&As\&AS3代码\&用代码生成漫天飘落的雪花\&]

在FlashCS4开发环境中按顺序添加各个图层(如图1所示)。

2.2影片剪辑元件的制作

1)制作雪花的影片剪辑元件“雪花”。

2)制作飘雪的影片剪辑元件“Px”,里面包含一个引导路径动画,让“雪花”影片剪辑元件生成的实体从上至下沿曲线飘落。在该元件属性对话框中设置“Px”元件的链接属性,生成“Px”元件类。

3)制作含有文字动画的影片剪辑元件“Wz”。

3界面设计

1)设置Flash文档大小为背景图片大小,也可调整图片大小来匹配文档大小。

2)导入背景图片,在Bj图层的关键帧上放置背景图片。

3)在Wz图层的关键帧上放置“Wz”影片剪辑元件的实例,并将其放在场景的合适位置。

效果如图2所示。

图2 界面效果图

4代码编写

4.1代码设计思路

1)利用计时器事件侦听或进入帧事件侦听的特点来实现飘雪场景,即每间隔一定的时间就会自动执行事件处理函数来生成一个飘动的雪花,经过一段时间就会生成多个飘动的雪花。计时器事件侦听执行事件处理函数的间隔时间取决于计时器对象延时时间的设置,而进入帧事件侦听取决于flash软件中的帧频率(可调)的设置[4]。

2)在事件处理函数中,用代码生成Px元件类的飘动雪花的实例,并加载到舞台上。通过随机函数生成要求范围的随机数来控制该实例的坐标及大小。x坐标范围应该≤场景的宽度,y坐标的范围应该控制在场景的上半部分。

3)为了避免场景中无限制的产生雪花,要设置场景中雪花的最大值,用if语句进行判断,当雪花个数增加到最大值时,采用每增加1个雪花,就删除最底层(即最开始建立)雪花的方法,即用增1个,删1个的方法来达到场景内雪花数的动态平衡,从而达到连续不断而又不会无限增加的逼真飘雪效果。

4.2代码的实现

在AS图层第一帧打开“动作”窗口,输入动作脚本。

用进入帧事件侦听实现飘雪场景代码如下:

需要注意的是,在删除最下层雪花时,背景图占用了第0层,文字动画占用了第1层,所以最早产生的雪花在第2层,代码体现为this.removeChildAt(2)。

如用计时器侦听来实现飘雪场景,代码只需稍作改动。

1)首先应定义计时器类型的变量,延时时间为500ms即0.5秒,代码如下:

varjs:Timer=newTimer(500);

2)将以上代码的第3行对舞台加进入帧事件的侦听语句改为对计时器变量加计时器事件的侦听。

即将“stage.addEventListener(Event.ENTER_FRAME,hs);”改为:

js.addEventListener(TimerEvent.TIMER,hs);

3)在代码的结尾添加启动计时器的语句:

js.start();

5结束语

以上方法具有通用性,用相同的方法还能够实现飘花、落叶、下雨、满天繁星等常用动画场景的制作。通过图层、帧和AS3代码的有机结合来实现复杂动画,能够有效的提高动画制作的效率和逼真的程度。

参考文献:

[1]孙颖.FlashAction3殿堂之路[M].北京:电子工业出版社,2007.

[2]皮特斯.FlashActionScript3.0动画教程[M].王汝义,译.北京:人民邮电出版社,2008.

[3]徐浙君,俞淑燕.基于ActionScript3.0的游戏设计框架探索[J].计算机与现代化,2010(3):84-86.

[4]ToddPerkins.FlashActionScript3.0实训课堂[M].张猛,译.北京:人民邮电出版社,2008:62-9.

猜你喜欢
计时器关键帧图层
松鼠的计时器
超高精度计时器——原子钟
巧用混合图层 制作抽象动感森林
基于改进关键帧选择的RGB-D SLAM算法
抗缪勒氏管激素:卵巢功能的计时器!
基于相关系数的道路监控视频关键帧提取算法
图层法在地理区域图读图中的应用
基于聚散熵及运动目标检测的监控视频关键帧提取
跟我学添加真实的光照效果
竖向固定电火花打点计时器的技巧