AS3实例教程:结合基本的动画和AS3绘图API

http://www.webjx.com/  2010-02-04 01:39:29  来源:中国教程网论坛 作者:cao4811

Webjx核心提示:这是一个粒子效果实例教程,学习如何结合基本的动画和 ActionScript 3 绘图API。

 这是一个粒子效果实例教程,学习如何结合基本的动画和 ActionScript 3 绘图API。

演示:

1、新建Flash文件,设置属性:宽、高默认为550*400 ,保存,名称任意。图1:
sshot-1.png
2、用椭圆工具画一个 10 × 10 大小的球,颜色任意。

3、把球转换成影片剪辑,命名 "Particle ",注册点居中。图2:
sshot-2.png
4、把球从舞台上删除。

5、打开库面板,右键单击Particle影片剪辑,选择属性。在属性面板中的链接项,为ActionScript导出的复选框打勾。在类的文本输入框中输入" Particle " 。图3:
sshot-3.png
6、新建一个ActionScript文件,命名为 " Particle ",保存在fla文件相同的目录下。图4:
sshot-4.png
在编译器中输入代码:


package {



        import flash.display.MovieClip;



        public class Particle extends MovieClip {



                //We need different speeds for different particles.

                //These variables can be accessed from the main movie, because they are public.

                public var speedX:Number;

                public var speedY:Number;



                function Particle ():void {



                }

        }

}
7、切换到fla主类。生成粒子实例,显示在舞台上,而且增加一些效果。在第1帧输入代码:


//We need few imports for the filters

import fl.motion.Color;

import flash.geom.ColorTransform;



//Create an array for the particles for later use

var numberOfParticles:Number = 30;

var particlesArray:Array = new Array();



//This loop creates 30 particles that are positioned randomly on the stage. 

//We also add some effects to the particles

for (var i=0; i < numberOfParticles; i++) {



        var particle:Particle = new Particle();



        //Give random x and y speed to the particle. 

        //Math.random returns a random number n, where 0 <= n < 1.

        particle.speedX = 2 + Math.random();

        particle.speedY = 2 + Math.random();



        //Set the starting position

        particle.y = Math.random() * stage.stageHeight;

        particle.x = Math.random() * stage.stageWidth;



        //Set a random tint to the particle, so they will have different colors.

        var ct:Color = new Color();

        ct.setTint (0xFFFFFF * Math.random(), 0.5);

        particle.transform.colorTransform = ct;



        //Set random size to the particles, so the particles will differ in size

        particle.scaleX = 0.5 + Math.random();

        particle.scaleY = particle.scaleX;



        //This array is used to store all of the filters

        var particleFilters:Array = new Array();



        //Create a different blur effect in each particle

        var tempBlurAmount = Math.random()*4;

        var blur:BlurFilter = new BlurFilter(tempBlurAmount, tempBlurAmount, 1);

        particleFilters.push (blur);



        //Create a glow effect in each particle

        var color:Number = 0x000000;

        var alphaValue:Number = 0.5;

        var blurX:Number = 20;

        var blurY:Number = 20;

        var strength:Number = 5;

        var glow:GlowFilter = new GlowFilter(color,

                                          alphaValue,

                                          blurX,

                                          blurY,

                                          strength);



        particleFilters.push (glow);



        //Apply the created filters to the particle (blur & glow)

        particle.filters = particleFilters;



        //Add the particle to the stage and push it into an array for later use

        addChild (particle);

        particlesArray.push (particle);

}
可能看起来很难的 ,但实际上非常简单。注释应该解释的很充分。测试一下影片剪辑,效果如图。图5:
sshot-5.png
8、注册Event.ENTER_FRAME事件,随机地移动粒子。接上面输入代码:


addEventListener (Event.ENTER_FRAME, enterFrameHandler);



//This function is responsible for animation

function enterFrameHandler (e:Event):void {



        //Let’s loop through the particles

        for (i=0; i < particlesArray.length; i++) {



                var particleOne:Particle = particlesArray[i];

                //Move the particle to a new location

                particleOne.x += particleOne.speedX;

                particleOne.y += particleOne.speedY;



                //Check the boundaries. 

                //If a hit occurs, multiply the speed by (-1) to reverse the speed.



                //Right edge

                if (particleOne.x > stage.stageWidth) {

                        particleOne.x = stage.stageWidth - particleOne.width/2;

                        particleOne.speedX *= -1;

                }



                //Left edge

                else if (particleOne.x < 0) {

                        particleOne.x = particleOne.width/2;

                        particleOne.speedX *= -1;

                }



                //Bottom

                if (particleOne.y > stage.stageHeight) {

                        particleOne.y = stage.stageHeight - particleOne.width/2;

                        particleOne.speedY *= -1;

                }



                //Top

                else if (particleOne.y < 0) {

                        particleOne.y = particleOne.width/2;

                        particleOne.speedY *= -1;

                }

        }

}
测试影片剪辑,观看一下效果。未命名-1.swf:


9、为粒子加入连线,修改 enterFrameHandler,代码如下:


function enterFrameHandler (e:Event):void {



        //Clear the previous lines

        graphics.clear();



        //Let’s loop through the particles

        for (i=0; i < particlesArray.length; i++) {



                var particleOne:Particle = particlesArray[i];

                //Move the particle to a new location

                particleOne.x += particleOne.speedX;

                particleOne.y += particleOne.speedY;



                //Check the boundaries

                if (particleOne.x > stage.stageWidth) {

                        particleOne.x = stage.stageWidth - particleOne.width/2;

                        particleOne.speedX *= -1;

                }

                else if (particleOne.x < 0) {

                        particleOne.x = particleOne.width/2;

                        particleOne.speedX *= -1;

                }

                if (particleOne.y > stage.stageHeight) {

                        particleOne.y = stage.stageHeight - particleOne.width/2;

                        particleOne.speedY *= -1;

                }

                else if (particleOne.y < 0) {

                        particleOne.y = particleOne.width/2;

                        particleOne.speedY *= -1;

                }



                //Go through the other particles to check the distance with the first particle

                for (var j:uint = i + 1; j < particlesArray.length; j++) {



                        var particleTwo:Particle = particlesArray[j];



                        var distanceX:Number = particleOne.x - particleTwo.x;

                        var distanceY:Number = particleOne.y - particleTwo.y;

                        //Use Pythagorean theorem (a^2 + b^2 = c^2) to calculate the distance 

                        var distance:Number = Math.sqrt(distanceX * distanceX + distanceY * distanceY);



                        //If the distance is smaller than 80px, draw a line between the particles

                        if (distance < 80) {

                                drawLine (particleOne, particleTwo);

                        }

                }

        }

}



在 enterFrameHandler 之后添加方法drawLine实现画线功能。



//This function draws a black line between two particles

function drawLine (particleOne:Particle, particleTwo:Particle):void {

        graphics.lineStyle (1, 0x000000);//线为白色,如黑色背景改为0xffffff

        graphics.moveTo (particleOne.x, particleOne.y);

        graphics.lineTo (particleTwo.x, particleTwo.y);

}
10、测试影片剪辑。

完整主类代码:


//We need few imports for the filters

import fl.motion.Color;

import flash.geom.ColorTransform;



//Create an array for the particles for later use

var numberOfParticles:Number = 30;

var particlesArray:Array = new Array();



//This loop creates 30 particles that are positioned randomly on the stage. 

//We also add some effects to the particles

for (var i=0; i < numberOfParticles; i++) {



        var particle:Particle = new Particle();



        //Give random x and y speed to the particle. 

        //Math.random returns a random number n, where 0 <= n < 1.

        particle.speedX = 2 + Math.random();

        particle.speedY = 2 + Math.random();



        //Set the starting position

        particle.y = Math.random() * stage.stageHeight;

        particle.x = Math.random() * stage.stageWidth;



        //Set a random tint to the particle, so they will have different colors.

        var ct:Color = new Color();

        ct.setTint (0xFFFFFF * Math.random(), 0.5);

        particle.transform.colorTransform = ct;



        //Set random size to the particles, so the particles will differ in size

        particle.scaleX = 0.5 + Math.random();

        particle.scaleY = particle.scaleX;



        //This array is used to store all of the filters

        var particleFilters:Array = new Array();



        //Create a different blur effect in each particle

        var tempBlurAmount = Math.random()*4;

        var blur:BlurFilter = new BlurFilter(tempBlurAmount, tempBlurAmount, 1);

        particleFilters.push (blur);



        //Create a glow effect in each particle

        var color:Number = 0x000000;

        var alphaValue:Number = 0.5;

        var blurX:Number = 20;

        var blurY:Number = 20;

        var strength:Number = 5;

        var glow:GlowFilter = new GlowFilter(color,

                                          alphaValue,

                                          blurX,

                                          blurY,

                                          strength);



        particleFilters.push (glow);



        //Apply the created filters to the particle (blur & glow)

        particle.filters = particleFilters;



        //Add the particle to the stage and push it into an array for later use

        addChild (particle);

        particlesArray.push (particle);

}



addEventListener (Event.ENTER_FRAME, enterFrameHandler);



//This function is responsible for animation

function enterFrameHandler (e:Event):void {



        //Clear the previous lines

        graphics.clear();



        //Let’s loop through the particles

        for (i=0; i < particlesArray.length; i++) {



                var particleOne:Particle = particlesArray[i];

                //Move the particle to a new location

                particleOne.x += particleOne.speedX;

                particleOne.y += particleOne.speedY;



                //Check the boundaries

                if (particleOne.x > stage.stageWidth) {

                        particleOne.x = stage.stageWidth - particleOne.width/2;

                        particleOne.speedX *= -1;

                }

                else if (particleOne.x < 0) {

                        particleOne.x = particleOne.width/2;

                        particleOne.speedX *= -1;

                }

                if (particleOne.y > stage.stageHeight) {

                        particleOne.y = stage.stageHeight - particleOne.width/2;

                        particleOne.speedY *= -1;

                }

                else if (particleOne.y < 0) {

                        particleOne.y = particleOne.width/2;

                        particleOne.speedY *= -1;

                }



                //Go through the other particles to check the distance with the first particle

                for (var j:uint = i + 1; j < particlesArray.length; j++) {



                        var particleTwo:Particle = particlesArray[j];



                        var distanceX:Number = particleOne.x - particleTwo.x;

                        var distanceY:Number = particleOne.y - particleTwo.y;

                        //Use Pythagorean theorem (a^2 + b^2 = c^2) to calculate the distance 

                        var distance:Number = Math.sqrt(distanceX * distanceX + distanceY * distanceY);



                        //If the distance is smaller than 80px, draw a line between the particles

                        if (distance < 80) {

                                drawLine (particleOne, particleTwo);

                        }

                }

        }

}



//This function draws a black line between two particles

function drawLine (particleOne:Particle, particleTwo:Particle):void {

        graphics.lineStyle (1, 0x000000);

        graphics.moveTo (particleOne.x, particleOne.y);

        graphics.lineTo (particleTwo.x, particleTwo.y);

}
更多