武陵观察网 问答 怎能制作质感的水晶泡泡动画?

怎能制作质感的水晶泡泡动画?

今天就教大家使用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扩展示例

教程已经完成,希望对大家有帮助。

本文来自网络,不代表本站立场,转载请注明出处:https:

怎能制作质感的水晶泡泡动画?

武陵观察网后续将为您提供丰富、全面的关于怎能制作质感的水晶泡泡动画?内容,让您第一时间了解到关于怎能制作质感的水晶泡泡动画?的热门信息。小编将持续从百度新闻、搜狗百科、微博热搜、知乎热门问答以及部分合作站点渠道收集和补充完善信息。