Flash AS3 连锁反应的粒子动画

所属分类: 媒体动画 / Flash教程 阅读数: 42
收藏 0 赞 0 分享
这是一个粒子效果实例教程,将学习如何创建粒子并产生一个连锁反应。

演示:


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、随机地选择一个粒子产生爆炸效果。爆炸后,生成新的粒子。最后,删除舞台上爆炸的粒子。把下列代码块加入到动作面板:

//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);

}

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(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、代码全部完成,测试你的影片。也可以设置不同背景的舞台,画任意的图形。

最后完整的代码:

//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);

}

//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);

}

}

}

}


附件下载:Particle.rar      粒子.rar

更多精彩内容其他人还在看

Flash cs3绘制人物高级行走动画教程

本教程向大家介绍Flash cs3绘制人物高级行走动画效果,教程难度不是很大,绘制方法及过程介绍的也非常详细,教程很实用,转发过来,希望大家喜欢
收藏 0 赞 0 分享

Flash CS4来制作漂亮的气泡动画教程

本教程向脚本之家的朋友介绍用Flash CS4来制作漂亮的气泡动画,制作出来气泡真的很好看,制作效果是采用代码形式实现,觉得很不错,转发过来,感兴趣的朋友可以一起来学习
收藏 0 赞 0 分享

flash基础教程:帧、关键帧、空白帧概念及区别介绍

动画的产生是帧来实现的,那什么是帧?帧、关键帧和空白帧之间又有什么区别?本文就为大家介绍一下三者之间的关系
收藏 0 赞 0 分享

Flash教程:动画背景的绘制方法之透视篇(给新手)

Flash动画在网络上的广泛传播,已经成为上网一族喜闻乐见的一种艺术形式。动画背景的绘制方法有很多,也有很多表现方法。这里将结合透视学的基础知识向大家简单的介绍一下动画背景的绘制。
收藏 0 赞 0 分享

Flash AS入门教程:Flash AS3.0制作有年份有日期的时钟

本教程是向大家介绍利用Flash AS3.0制作有年份有日期的时钟,虽然制作时钟老套了点,但它确可以较全面地应用到时间日期和间隔等知识,仍不失为较好的入门练习,转发给大家,希望对大家有所帮助
收藏 0 赞 0 分享

Flash相册制作大师具体该如何使用 Flash相册制作大师使用教程

在本文中我们将会看到的是Flash相册制作大师的具体使用的方法
收藏 0 赞 0 分享

flash基础教程:混色器面板图文介绍

混色器面板是Flash中用于色彩处理的一个重要面板,熟练地使用该面板,可以帮助用户快速地完成色彩的填充,编辑出色彩丰富的图形。本教程为大家详细介绍一下混色器面板,希望对大家有所帮助
收藏 0 赞 0 分享

25个绝对让你应接不暇的Flash网站创意

在Web设计过程中,运用成熟的Flash技术可以把你任意想到的idea表现到产品页面中。这里为你整理发现了25个绝对让你应接不暇的 Flash网站创意,更好地体现网站的互动应用,同时可以让你大饱眼福,一起来欣赏吧
收藏 0 赞 0 分享

教你用Flash制作非常酷的二进制时钟动画

今天在这个教程中我们将学习用Flash做一个不同寻常的,但非常酷的时钟:一个二进制时钟,中间用到了代码,但介绍地很详细,相信很值得大家学习
收藏 0 赞 0 分享

Flash动画特效制作技巧:制作超酷的文字炸开动画效果

本教程向大家介绍Flash动画特效制作技巧,本实例是制作文字炸开的动画效果,制作效果非常酷,制作过程也比较简单,喜欢的朋友可以过来学习一下这种制作方法
收藏 0 赞 0 分享
查看更多