AS3.0粒子效果实例(1)

作者:cao4811   类型:原创   来源:中国教程网论坛

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

演示:
/UploadTeach/201001/20100129175748799.swf

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

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

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

4、在ActionScript导出的复选框中打勾 ,做类链接,类名为" Particle " 。图1:
sshot-1.png
5、把圆形从舞台删除,新建ActionScript 3.0文件。图2:
sshot-2.png
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:
sshot-3.png
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:
sshot-4.png

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;

                  &nbs,p;             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
在线投稿和咨询,联系闪吧编辑    责任编辑:silvia    时间:2010年1月29日
  • 最近更新