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;
publicclassParticleextendsMovieClip{
//Weneeddifferentspeedsfordifferentparticles.
//Thesevariablescanbeaccessedfromthemainmovie,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();
//Eachtimeahitoccurs,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、随机地选择一个粒子产生爆炸效果。爆炸后,生成新的粒子。最后,删除舞台上爆炸的粒子。把下列代码块加入到动作面板:
//CallforthefirstexplosionstartExplosions();
/*Thisfunctionmakesarandomparticletoexplode.
Fromhere,thechainreactionbegins.*/
functionstartExplosions():void{
//Selectarandomparticlefromanarray
varindex=Math.round(Math.random()*(particlesArray.length-1));
varfirstParticle:Particle=particlesArray[index];
//Setarandomtint
varct:Color=newColor();
ct.setTint(0xFFFFFF*Math.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,更新粒子坐标,使粒子动起来。输入下列代码:
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(distanceX*distanceX+distanceY*distanceY);
/*Ifthedistanceissmallerthanparticle’swidth,wehaveahit.
Note:iftheparticleswereofdifferentsize,thecalculationwouldbe:
distance<((particleOne.width/2)+(particleTwo.width/2))
*/
if(distance<particleOne.width){
//Setarandomtinttotheparticlesthatexplode
varct:Color=newColor();
ct.setTint(0xFFFFFF*Math.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’llremovetheonethatwasstationary.
*/
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、代码全部完成,测试你的影片。也可以设置不同背景的舞台,画任意的图形。
最后完整的代码:
importfl.motion.Color;
importflash.geom.ColorTransform;
/*Wewant20particlesatthestart
particlesArrayisusedwhenweanimateeachparticle*/
varnumberOfParticles:Number=20;
varparticlesArray:Array=newArray();
//Eachtimeahitoccurs,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(0xFFFFFF*Math.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(distanceX*distanceX+distanceY*distanceY);
/*Ifthedistanceissmallerthanparticle’swidth,wehaveahit.
Note:iftheparticleswereofdifferentsize,thecalculationwouldbe:
distance<((particleOne.width/2)+(particleTwo.width/2))
*/
if(distance<particleOne.width){
//Setarandomtinttotheparticlesthatexplode
varct:Color=newColor();
ct.setTint(0xFFFFFF*Math.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’llremovetheonethatwasstationary.
*/
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);
}
}
}
}
附件下载: