当前位置: 首页 > 图文教程 > Flash动画 > ActionScript > Flash AS3实例教程:连锁反应的粒子动画

ActionScript
FLASH 3D相册之利用BitmapData类制作
Flash 脚本游戏开发教程 第一课
Flash 脚本游戏开发教程第二课
Flash 脚本游戏开发教程第三课
Flash 脚本游戏开发教程第四课
Flash 脚本游戏开发教程第五课
Flash 脚本游戏开发教程第六课
Flash 脚本游戏开发教程第七课
Flash 脚本游戏开发教程第八课
Flash AS实现的蝌蚪摆尾动画的教程
从基础开始深入学Flash AS3教程(4)(译文)
从基础开始深入学Flash AS3教程(5)(译文)
从基础开始深入Flash AS3教程(2)(译文)
从基础开始深入学Flash AS3教程(3)(译文)
Flash AS3对单个图片进行角色动作化处理
从基础开始深入Flash AS3教程(1)(译文)
Flash教程:if条件语句的用法
Flash AS教程:_visible属性的详细讲解
Flash AS教程:图片环绕旋转效
Flash教程:trace()的使用

ActionScript 中的 Flash AS3实例教程:连锁反应的粒子动画


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

这是一个粒子效果实例教程,将学习如何创建粒子并产生一个连锁反应。

演示:


1、新建Flash文档,设置:宽、高为 400 × 400 ,保存。

2、用椭圆工具在舞台上画一个 20 × 20 大小的圆。 (你能选择任意的颜色)

3、右键单击圆形,把它转换成影片剪辑,注册点居中。

4、在ActionScript导出的复选框中打勾 ,做类链接,类名为" Particle " 。图1:

5、把圆形从舞台删除,新建ActionScript 3.0文件。图2:

6、我们编写一个外部的Particle类。在编译器中输入代码:

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;

                public var partOfExplosion:Boolean = false;



                function Particle ():void {



                }

        }

}

7、保存在fla文件的同一目录下,名为 " Particle " 。图3:

8、切换到我们的fla主文档。首先我们在舞台上生成粒子实例。在第一帧输入代码:

//We need few imports for the color

import fl.motion.Color;

import flash.geom.ColorTransform;

/*We want 20 particles at the start

particlesArray is used when we animate each particle */

var numberOfParticles:Number = 20;

var particlesArray:Array = new Array();

//Each time a hit occurs, we want to create 10 new particles

var numberOfExplosionParticles:uint = 10;

//This loop creates the first particles and gives them speed and coordinates

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

        var particle:Particle = new Particle(); 

        //We want the particles to stay at their original position

        particle.speedX = 0;

        particle.speedY = 0; 

        //Set the starting position

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

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

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

        addChild (particle);

        particlesArray.push (particle);

}

9、测试你的影片,效果如图。图4:

10、随机地选择一个粒子产生爆炸效果。爆炸后,生成新的粒子。最后,删除舞台上爆炸的粒子。把下列代码块加入到动作面板:

//Call for the first explosion

startExplosions ();

/*This function makes a random particle to explode.

From here, the chain reaction begins.*/

function startExplosions ():void { 

        //Select a random particle from an array

        var index = Math.round(Math.random() * (particlesArray.length-1));

        var firstParticle:Particle = particlesArray[index]; 

        //Set a random tint

        var ct:Color = new Color();

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

        //Create 10 new particles because of explosion

        for (var i=0; i < numberOfExplosionParticles; 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 = Math.random()*10 - 5 ;

                particle.speedY = Math.random()*10 - 5; 

                //Apply the randomly selected tint to each particle

                particle.transform.colorTransform = ct; 

                //Set the starting position

                particle.y = firstParticle.y;

                particle.x = firstParticle.x; 

                //Particle is part of an explosion

                particle.partOfExplosion = true; 

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

                addChild (particle);

                particlesArray.push (particle);

        }

        //Let’s remove the particle that exploded (remove from stage and from the array)

        removeChild (firstParticle);

        particlesArray.splice (index,1); 

        addEventListener (Event.ENTER_FRAME, enterFrameHandler);

}

11、添加方法 enterFrameHandler,更新粒子坐标,使粒子动起来。输入下列代码:

//This function is responsible for the animation

function enterFrameHandler (e:Event):void { 

        //Loop through every particle

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

                var particleOne:Particle = particlesArray[i]; 

                //Update the particle’s coordinates

                particleOne.y += particleOne.speedY;

                particleOne.x += particleOne.speedX; 

                /*This loop calls a checkForHit function to find if the two particles are colliding*/

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

                        var particleTwo:Particle = particlesArray[j]; 

                        /*Make sure the particles are on stage, only then check for hits*/

                        if (contains(particleOne) && contains(particleTwo)) {

                                checkForHit (particleOne, particleTwo);

                        }

                }

        }

}

12、方法 " checkForHit" 是最难的部份,碰撞检测。输入代码:

/*This function checks whether two particles have collided*/

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

        /*Let’s make sure we only check those particles, where one is moving and the other

        is stationary. We don’t want two moving particles to explode. */

        if ((particleOne.partOfExplosion == false && particleTwo.partOfExplosion == true) ||

        particleOne.partOfExplosion == true && particleTwo.partOfExplosion == false ) { 

                //Calculate the distance using Pythagorean theorem

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

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

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

                /* If the distance is smaller than particle’s width, we have a hit. 

                Note: if the particles were of different size, the calculation would be:

                distance < ((particleOne.width / 2) + (particleTwo.width / 2))

                */

                if (distance < particleOne.width) { 

                        //Set a random tint to the particles that explode

                        var ct:Color = new Color();

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

                        //Create 10 new particles because of an explosion

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

                                var particle:Particle = new Particle(); 

                                particle.speedX = Math.random()*10 - 5 ;

                                particle.speedY = Math.random()*10 - 5; 

                                //Apply tint

                                particle.transform.colorTransform = ct; 

                                //Set the starting position

                                particle.y = particleOne.y;

                                particle.x = particleOne.x; 

                                particle.partOfExplosion = true; 

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

                                addChild (particle);

                                particlesArray.push (particle);

                        } 

                        /* Check which of the two particles was stationary.

                        We’ll remove the one that was stationary.

                        */

                        if (particleOne.partOfExplosion == false) {

                                var temp1 = particlesArray.indexOf(particleOne);

                                particlesArray.splice (temp1,1);

                                removeChild (particleOne);

                        }

                        else {

                                var temp2 = particlesArray.indexOf(particleTwo);

                                particlesArray.splice (temp2,1);

                                removeChild (particleTwo);

                        } 

                }

        }

}

13、代码全部完成,测试你的影片。也可以设置不同背景的舞台,画任意的图形。

最后完整的代码:

//We need few imports for the color

import fl.motion.Color;

import flash.geom.ColorTransform;

/*We want 20 particles at the start

particlesArray is used when we animate each particle */

var numberOfParticles:Number = 20;

var particlesArray:Array = new Array();

//Each time a hit occurs, we want to create 10 new particles

var numberOfExplosionParticles:uint = 10;

//This loop creates the first particles and gives them speed and coordinates

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

        var particle:Particle = new Particle(); 

        //We want the particles to stay at their original position

        particle.speedX = 0;

        particle.speedY = 0; 

        //Set the starting position

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

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

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

        addChild (particle);

        particlesArray.push (particle);

}

//Call for the first explosion

startExplosions ();

/*This function makes a random particle to explode.

From here, the chain reaction begins.*/

function startExplosions ():void { 

        //Select a random particle from an array

        var index = Math.round(Math.random() * (particlesArray.length-1));

        var firstParticle:Particle = particlesArray[index]; 

        //Set a random tint

        var ct:Color = new Color();

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

        //Create 10 new particles because of explosion

        for (var i=0; i < numberOfExplosionParticles; 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 = Math.random()*10 - 5 ;

                particle.speedY = Math.random()*10 - 5; 

                //Apply the randomly selected tint to each particle

                particle.transform.colorTransform = ct; 

                //Set the starting position

                particle.y = firstParticle.y;

                particle.x = firstParticle.x; 

                //Particle is part of an explosion

                particle.partOfExplosion = true; 

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

                addChild (particle);

                particlesArray.push (particle);

        }

        //Let’s remove the particle that exploded (remove from stage and from the array)

        removeChild (firstParticle);

        particlesArray.splice (index,1); 

        addEventListener (Event.ENTER_FRAME, enterFrameHandler);

}

//This function is responsible for the animation

function enterFrameHandler (e:Event):void { 

        //Loop through every particle

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

                var particleOne:Particle = particlesArray[i]; 

                //Update the particle’s coordinates

                particleOne.y += particleOne.speedY;

                particleOne.x += particleOne.speedX; 

                /*This loop calls a checkForHit function to find if the two particles are colliding*/

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

                        var particleTwo:Particle = particlesArray[j]; 

                        /*Make sure the particles are on stage, only then check for hits*/

                        if (contains(particleOne) && contains(particleTwo)) {

                                checkForHit (particleOne, particleTwo);

                        }

                }

        }

}

/*This function checks whether two particles have collided*/

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

        /*Let’s make sure we only check those particles, where one is moving and the other

        is stationary. We don’t want two moving particles to explode. */

        if ((particleOne.partOfExplosion == false && particleTwo.partOfExplosion == true) ||

        particleOne.partOfExplosion == true && particleTwo.partOfExplosion == false ) { 

                //Calculate the distance using Pythagorean theorem

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

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

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

                /* If the distance is smaller than particle’s width, we have a hit. 

                Note: if the particles were of different size, the calculation would be:

                distance < ((particleOne.width / 2) + (particleTwo.width / 2))

                */

                if (distance < particleOne.width) {



                        //Set a random tint to the particles that explode

                        var ct:Color = new Color();

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

                        //Create 10 new particles because of an explosion

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

                                var particle:Particle = new Particle(); 

                                particle.speedX = Math.random()*10 - 5 ;

                                particle.speedY = Math.random()*10 - 5; 

                                //Apply tint

                                particle.transform.colorTransform = ct; 

                                //Set the starting position

                                particle.y = particleOne.y; 

                         particle.x = particleOne.x; 

                            &nbs,p;   particle.partOfExplosion = true; 

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

                                addChild (particle);

                                particlesArray.push (particle);

                        } 

                        /* Check which of the two particles was stationary.

                        We’ll remove the one that was stationary.

                        */

                        if (particleOne.partOfExplosion == false) {

                                var temp1 = particlesArray.indexOf(particleOne);

                                particlesArray.splice (temp1,1);

                                removeChild (particleOne);

                        }

                        else {

                                var temp2 = particlesArray.indexOf(particleTwo);

                                particlesArray.splice (temp2,1);

                                removeChild (particleTwo);

                        } 

                }

        }

}


附件下载:Particle.rar       粒子.rar