Flash AS3 连锁反应的粒子动画

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

演示


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

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

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

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

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

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

package{



importflash.display.MovieClip;



publilassParticleextendsMovieClip{



//Weneeddifferentspeedsfordifferentparticles.

//Thesevariablescanbeaessedfromthemainmovie,becausetheyarepublic.

publicvarspeedX:Number;

publicvarspeedY:Number;

publicvarpartOfExplosion:Boolean=false;



functionParticle():void{



}

}

}

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

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

//Weneedfewimportsforthecolor

importfl.motion.Color;

importflash.geom.ColorTransform;

/Wewant20particlesatthestart

particlesArrayisusedwhenweanimateeachparticle/

varnumberOfParticles:Number=20;

varparticlesArray:Array=newArray();

//Eachtimeahitours,wewanttocreate10newparticles

varnumberOfExplosionParticles:uint=10;

//Thisloopcreatesthefirstparticlesandgivesthemspeedandcoordinates

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

varparticle:Particle=newParticle();

//Wewanttheparticlestostayattheiroriginalposition

particle.speedX=0;

particle.speedY=0;

//Setthestartingposition

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

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

//Addtheparticletothestageandpushittoarrayforlateruse.

addChild(particle);

particlesArray.push(particle);

}

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

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

//Callforthefirstexplosion

startExplosions();

/Thisfunctionmakesarandomparticletoexplode.

Fromhere,thechainreactionbegins./

functionstartExplosions():void{

//Selectarandomparticlefromanarray

varindex=Math.round(Math.random()(particlesArray.length-1));

varfirstParticle:Particle=particlesArray[index];

//Setarandomtint

varct:Color=newColor();

ct.setTint(0xFFFFFFMath.random(),1);

//Create10newparticlesbecauseofexplosion

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

varparticle:Particle=newParticle();

/Giverandomxandyspeedtotheparticle.

Math.randomreturnsarandomnumbern,where0<=n<1./

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

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

//Applytherandomlyselectedtinttoeachparticle

particle.transform.colorTransform=ct;

//Setthestartingposition

particle.y=firstParticle.y;

particle.x=firstParticle.x;

//Particleispartofanexplosion

particle.partOfExplosion=true;

//Addtheparticletothestageandpushittoarrayforlateruse.

addChild(particle);

particlesArray.push(particle);

}

//Let’sremovetheparticlethatexploded(removefromstageandfromthearray)

removeChild(firstParticle);

particlesArray.splice(index,1);

addEventListener(Event.ENTER_FRAME,enterFrameHandler);

}

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

//Thisfunctionisresponsiblefortheanimation

functionenterFrameHandler(e:Event):void{

//Loopthrougheveryparticle

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

varparticleOne:Particle=particlesArray[i];

//Updatetheparticle’scoordinates

particleOne.y+=particleOne.speedY;

particleOne.x+=particleOne.speedX;

/ThisloopcallsacheckForHitfunctiontofindifthetwoparticlesarecolliding/

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

varparticleTwo:Particle=particlesArray[j];

/Makesuretheparticlesareonstage,onlythencheckforhits/

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

checkForHit(particleOne,particleTwo);

}

}

}

}

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

/Thisfunctioncheckswhethertwoparticleshavecollided/

functioncheckForHit(particleOne:Particle,particleTwo:Particle):void{

/Let’smakesureweonlycheckthoseparticles,whereoneismovingandtheother

isstationary.Wedon’twanttwomovingparticlestoexplode./

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

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

//CalculatethedistanceusingPythagoreantheorem

vardistanceX:Number=particleOne.x-particleTwo.x;

vardistanceY:Number=particleOne.y-particleTwo.y;

vardistance:Number=Math.sqrt(distanceXdistanceX+distanceYdistanceY);

/Ifthedistanceissmallerthanparticle’swidth,wehaveahit.

Note:iftheparticleswereofdifferentsize,thecalculationwouldbe:

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

/

if(distance<particleOne.width){

//Setarandomtinttotheparticlesthatexplode

varct:Color=newColor();

ct.setTint(0xFFFFFFMath.random(),1);

//Create10newparticlesbecauseofanexplosion

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

varparticle:Particle=newParticle();

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

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

//Applytint

particle.transform.colorTransform=ct;

//Setthestartingposition

particle.y=particleOne.y;

particle.x=particleOne.x;

particle.partOfExplosion=true;

//Addtheparticletothestageandpushittoarrayforlateruse.

addChild(particle);

particlesArray.push(particle);

}

/Checkwhichofthetwoparticleswasstationary.

We’llremovetheohatwasstationary.

/

if(particleOne.partOfExplosion==false){

vartemp1=particlesArray.indexOf(particleOne);

particlesArray.splice(temp1,1);

removeChild(particleOne);

}

else{

vartemp2=particlesArray.indexOf(particleTwo);

particlesArray.splice(temp2,1);

removeChild(particleTwo);

}

}

}

}

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

完整的代码

//Weneedfewimportsforthecolor

importfl.motion.Color;

importflash.geom.ColorTransform;

/Wewant20particlesatthestart

particlesArrayisusedwhenweanimateeachparticle/

varnumberOfParticles:Number=20;

varparticlesArray:Array=newArray();

//Eachtimeahitours,wewanttocreate10newparticles

varnumberOfExplosionParticles:uint=10;

//Thisloopcreatesthefirstparticlesandgivesthemspeedandcoordinates

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

varparticle:Particle=newParticle();

//Wewanttheparticlestostayattheiroriginalposition

particle.speedX=0;

particle.speedY=0;

//Setthestartingposition

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

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

//Addtheparticletothestageandpushittoarrayforlateruse.

addChild(particle);

particlesArray.push(particle);

}

//Callforthefirstexplosion

startExplosions();

/Thisfunctionmakesarandomparticletoexplode.

Fromhere,thechainreactionbegins./

functionstartExplosions():void{

//Selectarandomparticlefromanarray

varindex=Math.round(Math.random()(particlesArray.length-1));

varfirstParticle:Particle=particlesArray[index];

//Setarandomtint

varct:Color=newColor();

ct.setTint(0xFFFFFFMath.random(),1);

//Create10newparticlesbecauseofexplosion

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

varparticle:Particle=newParticle();

/Giverandomxandyspeedtotheparticle.

Math.randomreturnsarandomnumbern,where0<=n<1./

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

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

//Applytherandomlyselectedtinttoeachparticle

particle.transform.colorTransform=ct;

//Setthestartingposition

particle.y=firstParticle.y;

particle.x=firstParticle.x;

//Particleispartofanexplosion

particle.partOfExplosion=true;

//Addtheparticletothestageandpushittoarrayforlateruse.

addChild(particle);

particlesArray.push(particle);

}

//Let’sremovetheparticlethatexploded(removefromstageandfromthearray)

removeChild(firstParticle);

particlesArray.splice(index,1);

addEventListener(Event.ENTER_FRAME,enterFrameHandler);

}

//Thisfunctionisresponsiblefortheanimation

functionenterFrameHandler(e:Event):void{

//Loopthrougheveryparticle

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

varparticleOne:Particle=particlesArray[i];

//Updatetheparticle’scoordinates

particleOne.y+=particleOne.speedY;

particleOne.x+=particleOne.speedX;

/ThisloopcallsacheckForHitfunctiontofindifthetwoparticlesarecolliding/

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

varparticleTwo:Particle=particlesArray[j];

/Makesuretheparticlesareonstage,onlythencheckforhits/

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

checkForHit(particleOne,particleTwo);

}

}

}

}

/Thisfunctioncheckswhethertwoparticleshavecollided/

functioncheckForHit(particleOne:Particle,particleTwo:Particle):void{

/Let’smakesureweonlycheckthoseparticles,whereoneismovingandtheother

isstationary.Wedon’twanttwomovingparticlestoexplode./

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

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

//CalculatethedistanceusingPythagoreantheorem

vardistanceX:Number=particleOne.x-particleTwo.x;

vardistanceY:Number=particleOne.y-particleTwo.y;

vardistance:Number=Math.sqrt(distanceXdistanceX+distanceYdistanceY);

/Ifthedistanceissmallerthanparticle’swidth,wehaveahit.

Note:iftheparticleswereofdifferentsize,thecalculationwouldbe:

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

/

if(distance<particleOne.width){



//Setarandomtinttotheparticlesthatexplode

varct:Color=newColor();

ct.setTint(0xFFFFFFMath.random(),1);

//Create10newparticlesbecauseofanexplosion

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

varparticle:Particle=newParticle();

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

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

//Applytint

particle.transform.colorTransform=ct;

//Setthestartingposition

particle.y=particleOne.y;

particle.x=particleOne.x;

&nbs,p;particle.partOfExplosion=true;

//Addtheparticletothestageandpushittoarrayforlateruse.

addChild(particle);

particlesArray.push(particle);

}

/Checkwhichofthetwoparticleswasstationary.

We’llremovetheohatwasstationary.

/

if(particleOne.partOfExplosion==false){

vartemp1=particlesArray.indexOf(particleOne);

particlesArray.splice(temp1,1);

removeChild(particleOne);

}

else{

vartemp2=particlesArray.indexOf(particleTwo);

particlesArray.splice(temp2,1);

removeChild(particleTwo);

}

}

}

}

附件下载