当前位置: 首页 > 图文教程 > Flash动画 > ActionScript > AS3实例教程:结合基本的动画和AS3绘图API

ActionScript
FLASH AS3与网页JS参数值传递的问题
Flash AS3的parameters对象处理网页参数
Flash教程 认识Flash ActionScript的环境
Flash ActionScript编程基础
Flash AS3代码实现鼠标跟随喷枪涂鸦效果
falsh 跨域调用配置
Flash AS3.0 实例教程 喷泉动画特效
AS3 Loader与URLLoader的比较
ColorTransform类调整显示对象的颜色值
Flash AS3 快速制作烟雾动画
Flash AS3 制作文字飞出动画
ActionScript 学习小心得
ActionScript3.0读取网页FlashVars中的参数的问题
通过实例学习AS3.0:案例三
通过实例学习Flash AS3.0:案例四
通过实例学习Flash AS3.0:案例五
通过实例学习Flash AS3.0:案例六
Flash教程:认识Flash ActionScript的环境
Flash as入门(1):认识AS面板
Flash as入门(3):AS基本语法

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-03-20   浏览: 98 ::
收藏到网摘: n/a

 这是一个粒子效果实例教程,学习如何结合基本的动画和 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);

}