今天就教大家使用Flash CS4制作带纹理的水晶泡泡动画,通过编写get和set访问器函数,为创建的组件类提供一个易用的编程接口,使组件类的属性在被访问的基础上得到很好的隐藏和封装。这个例子还运用了三角函数知识,创造出丰富的特效。通过这个例子的制作,读者可以掌握如何为组件类提供易于使用的编程接口,加深对三角函数知识的理解和应用。
这个例子的想法是:
1创建实例背景。
2画一个气泡状的图形,转换成组件类。
3编写组件类扩展类。
4创建一个文档类。
示例步骤:
(1)新建一个空白文档,舞台大小设置为400*300,帧率设置为30,舞台背景色设置为#618D0E,用舞台高度的直径画一个圆,填充径向渐变颜色,下面调整高亮位置,如图10-1所示。
其填充径向渐变值为#A7E600-#078914-#00552F。调整颜色句柄值,参数如下:
颜色一:红色:167,绿色:230,蓝色:0阿尔法:100%
颜色2:红色:7,绿色:137,蓝色:20阿尔法:100%
颜色三:红色:0,绿色:85,蓝色:47阿尔法:100%
图10-1绘制背景
(2)新建一层,命名为“高光”。画一个半径比步骤(1)中的圆略小的同心圆,填充线性渐变,使用渐变变形工具从上到下调整高光的分布,如图10-2所示。
填充线性渐变值为#FFFFFF-#FFFFFF。调整颜色句柄值,参数如下:
颜色一:红色:255,绿色:255,蓝色:255阿尔法:0%
颜色2:红色:255,绿色:255,蓝色:255阿尔法:100%
图10- 2突出显示
(3)新建一层,命名为“顶部高光”。使用椭圆工具在顶部画一个椭圆,填充线性渐变,高光分布如上,如图10- 3所示。
填充线性渐变值为#FFFFFF-#FFFFFF。调整颜色句柄值,参数如下:
颜色一:红色:255,绿色:255,蓝色:255阿尔法:0%
颜色2:红色:255,绿色:255,蓝色:255阿尔法:68%
图10-3主要亮点
(4)新建一个电影剪辑,命名为“Ball_mc”。画一个类似小泡泡的图形。这里我们画一个半径渐变的圆,大小约为20,如图10-4所示。
填充径向渐变值是#FFFFFF-#FFFFFF-#FFFFFF。调整颜色句柄值,参数如下:
颜色一:红色:255,绿色:255,蓝色:255阿尔法:36%
颜色2:红色:255,绿色:255,蓝色:255阿尔法:9%
颜色2:红色:255,绿色:255,蓝色:255阿尔法:0%
图10-4画了一个类似水泡的图形。
(5)为电影剪辑“Ball_mc”添加一个组件类,如10-5所示。
图10-5添加组件类
(6)下面是组件类扩展类。这个类有三个私有属性,如第11到13行所示。在第22行和第25行,我们定义了与其属性对应的get()方法,为组件类实例提供了访问对应属性的接口,第三个属性也提供了set()方法,如第29行所示。在这个类的构造函数中,三个属性也被初始化以分别生成随机的newX和newY值,如第17到19行所示。
AS3代码:
复制代码
代码如下:
**
*该类是一个扩展组件类。
* @作者lbynet
* @版本0.1
*/
包{
导入flash . display . sprite;
公共类Ball_mc扩展Sprite {
私有var newX:Number;
私有var newY:Number;
私有var W:Number;
公共函数Ball_mc() {
this . newx=1 math . random()* 100;//x轴上的随机速度
this . newy=1 math . random()* 20;//y轴上的随机速度
这个。w=0;//用于改变X轴上的随机速度值
}
公共函数get _newX():Number{
返回this.newX
}
公共函数get _newY():Number{
返回this.newY
}
公共函数set _W(i:Number){
这个。w=I;
}
公共函数get _W():Number{
归还这个。w;
}
}
}
(7)下面的主类是这个例子的文档类。这个类定义了三个属性,即存储水泡总数、数量累积变量和随机宽度和高度比值,如第12到14行所示。调用构造函数中的init()方法来初始化两个属性值,并注册ENTER_FRAME事件侦听器,如第20到22行所示。
/
复制代码
代码如下:
**
*这个类是主程序类。
* @作者lbynet
* @版本0.1
*/
包{
导入flash . display . sprite;
导入flash . events . event;
公共类Main扩展Sprite {
私有var total num:uint;
私有var I:uint;
私有var dim:Number;
公共函数Main() {
init();
}
私有函数init() {
this.totalNum=70
this . I=0;
stage.addEventListener(事件。ENTER_FRAME,ENTER FRAME handler);
}
(8)下面是两个监听器函数。enterFrameHandler是对应于之前注册的监听器的函数。该函数创建Totalnum的1个Ball_mc实例,实例的Y坐标值统一设置在舞台高度之外,如第29到31行所示。然后我们在第33行随机生成一个0到1之间的随机小数,乘以生成的Ball_mc实例对应的宽度和高度,得到随机的宽度和高度值,如第33到35行所示。在If()语句的末尾,将Ball_mc实例添加到显示列表中,并注册ENTER_FRAME事件侦听器,然后累积I值,如第37到39行所示。
AS3代码
复制代码
代码如下:
私有函数enter frame handler(Event:Event){
var _mc:雪碧;
if (this.i=totalNum) {
_ MC=new Ball _ MC();
_ MC . y=stage . stage height;
this . dim=math . random();
_ mc.width *=dim
_ mc.height *=dim
addChild(_ MC);
_mc.addEventListener(事件。ENTER_FRAME,removeEnterFrameHandler);
this.i
}
}
私有函数removeEnterFrameHandler(Event:Event){
var _ MC:*=event . target as Sprite;
_mc。_ W=.1
_mc.x=Math.sin(_mc。_W)*_mc。_纽克斯stage.stageWidth/2;
_mc.y -=_mc。_ newY
if (_mc.y=0) {
_mc.removeEventListener(事件。ENTER_FRAME,removeEnterFrameHandler);
remove child(_ MC);
this . I-;//使I的值小于totalNum,从而重新创建water_mc
(9) RemoveNeterFrameHandler是每个生成的Ball_mc实例对应的监听器函数。在这个函数中,我们累加Ball_mc实例的W属性并设置其X和Y坐标值,如第45行到第48行所示在中,X坐标值被设置为舞台中间的Ball_mc实例对应的newX属性值*其W属性的正弦值,如第47行所示,这样对应的Ball_mc实例在舞台中间来回移动, 并且其newY值在Y轴方向给定,使其在Y轴方向递减(即Ball_mc实例向上移动),最终产生螺旋上升效果,如第48行所示,如本例效果图所示。 下图显示了本例中使用的三角函数的简单示意图。
图10-6三角函数原理
(10)当Ball_mc实例移动到舞台顶部时,清除该实例和实例的注册的ENTER_FRAME事件侦听器,并递减I值,如步骤(7)的代码行50到55所示。我们还可以拓展思路,创造更多的效果,让球从上方移动到上方,像喷泉一样。还可以做各种类似的泡泡效果。
图10-7扩展示例
教程已经完成,希望对大家有帮助。