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

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基本语法

No. « 5 6 7 8 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2010-03-20   浏览: 153 ::
收藏到网摘: 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