注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

清风的博客

我为人人,人人为我。

 
 
 

日志

 
 

AS3.0粒子效果实例  

2014-01-14 17:41:33|  分类: 【flash教程】 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

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

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);
}
复制代码
测试你的影片,效果如图。图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;
                                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);
                        }
                }
        }
}


  评论这张
 
阅读(112)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017