AS3 結(jié)合基本的動(dòng)畫(huà)和AS3繪圖API

發(fā)布時(shí)間：2010-02-18 15:12:51 作者：佚名

我要評(píng)論

這是一個(gè)粒子效果實(shí)例教程，學(xué)習(xí)如何結(jié)合基本的動(dòng)畫(huà)和 ActionScript 3 繪圖API。

這是一個(gè)粒子效果實(shí)例教程，學(xué)習(xí)如何結(jié)合基本的動(dòng)畫(huà)和 ActionScript 3 繪圖API。

演示：

1、新建Flash文件，設(shè)置屬性：寬、高默認(rèn)為550*400 ，保存，名稱(chēng)任意。圖1：

2、用橢圓工具畫(huà)一個(gè) 10 × 10 大小的球，顏色任意。

3、把球轉(zhuǎn)換成影片剪輯，命名 "Particle "，注冊(cè)點(diǎn)居中。圖2：

4、把球從舞臺(tái)上刪除。

5、打開(kāi)庫(kù)面板，右鍵單擊Particle影片剪輯，選擇屬性。在屬性面板中的鏈接項(xiàng)，為ActionScript導(dǎo)出的復(fù)選框打勾。在類(lèi)的文本輸入框中輸入" Particle " 。圖3：

6、新建一個(gè)ActionScript文件，命名為 " Particle "，保存在fla文件相同的目錄下。圖4：

在編譯器中輸入代碼：

復(fù)制代碼

代碼如下:

package{
importflash.display.MovieClip;
publicclassParticleextendsMovieClip{
//Weneeddifferentspeedsfordifferentparticles.
//Thesevariablescanbeaccessedfromthemainmovie,becausetheyarepublic.
publicvarspeedX:Number;
publicvarspeedY:Number;
functionParticle():void{
}
}
}

7、切換到fla主類(lèi)。生成粒子實(shí)例，顯示在舞臺(tái)上，而且增加一些效果。在第1幀輸入代碼：

復(fù)制代碼

代碼如下:

//Weneedfewimportsforthefilters
importfl.motion.Color;
importflash.geom.ColorTransform;
//Createanarrayfortheparticlesforlateruse
varnumberOfParticles:Number=30;
varparticlesArray:Array=newArray();
//Thisloopcreates30particlesthatarepositionedrandomlyonthestage.
//Wealsoaddsomeeffectstotheparticles
for(vari=0;i<numberOfParticles;i++){
varparticle:Particle=newParticle();
//Giverandomxandyspeedtotheparticle.
//Math.randomreturnsarandomnumbern,where0<=n<1.
particle.speedX=2+Math.random();
particle.speedY=2+Math.random();
//Setthestartingposition
particle.y=Math.random()*stage.stageHeight;
particle.x=Math.random()*stage.stageWidth;
//Setarandomtinttotheparticle,sotheywillhavedifferentcolors.
varct:Color=newColor();
ct.setTint(0xFFFFFF*Math.random(),0.5);
particle.transform.colorTransform=ct;
//Setrandomsizetotheparticles,sotheparticleswilldifferinsize
particle.scaleX=0.5+Math.random();
particle.scaleY=particle.scaleX;
//Thisarrayisusedtostoreallofthefilters
varparticleFilters:Array=newArray();
//Createadifferentblureffectineachparticle
vartempBlurAmount=Math.random()*4;
varblur:BlurFilter=newBlurFilter(tempBlurAmount,tempBlurAmount,1);
particleFilters.push(blur);
//Createagloweffectineachparticle
varcolor:Number=0x000000;
varalphaValue:Number=0.5;
varblurX:Number=20;
varblurY:Number=20;
varstrength:Number=5;
varglow:GlowFilter=newGlowFilter(color,
alphaValue,
blurX,
blurY,
strength);
particleFilters.push(glow);
//Applythecreatedfilterstotheparticle(blur&glow)
particle.filters=particleFilters;
//Addtheparticletothestageandpushitintoanarrayforlateruse
addChild(particle);
particlesArray.push(particle);
}

可能看起來(lái)很難的，但實(shí)際上非常簡(jiǎn)單。注釋?xiě)?yīng)該解釋的很充分。測(cè)試一下影片剪輯，效果如圖。圖5：

8、注冊(cè)Event.ENTER_FRAME事件，隨機(jī)地移動(dòng)粒子。接上面輸入代碼：

復(fù)制代碼

代碼如下:

addEventListener(Event.ENTER_FRAME,enterFrameHandler);
//Thisfunctionisresponsibleforanimation
functionenterFrameHandler(e:Event):void{
//Let’sloopthroughtheparticles
for(i=0;i<particlesArray.length;i++){
varparticleOne:Particle=particlesArray[i];
//Movetheparticletoanewlocation
particleOne.x+=particleOne.speedX;
particleOne.y+=particleOne.speedY;
//Checktheboundaries.
//Ifahitoccurs,multiplythespeedby(-1)toreversethespeed.
//Rightedge
if(particleOne.x>stage.stageWidth){
particleOne.x=stage.stageWidth-particleOne.width/2;
particleOne.speedX*=-1;
}
//Leftedge
elseif(particleOne.x<0){
particleOne.x=particleOne.width/2;
particleOne.speedX*=-1;
}
//Bottom
if(particleOne.y>stage.stageHeight){
particleOne.y=stage.stageHeight-particleOne.width/2;
particleOne.speedY*=-1;
}
//Top
elseif(particleOne.y<0){
particleOne.y=particleOne.width/2;
particleOne.speedY*=-1;
}
}
}

測(cè)試影片剪輯，觀(guān)看一下效果。未命名-1.swf：

9、為粒子加入連線(xiàn)，修改 enterFrameHandler，代碼如下：

復(fù)制代碼

代碼如下:

functionenterFrameHandler(e:Event):void{
//Clearthepreviouslines
graphics.clear();
//Let’sloopthroughtheparticles
for(i=0;i<particlesArray.length;i++){
varparticleOne:Particle=particlesArray[i];
//Movetheparticletoanewlocation
particleOne.x+=particleOne.speedX;
particleOne.y+=particleOne.speedY;
//Checktheboundaries
if(particleOne.x>stage.stageWidth){
particleOne.x=stage.stageWidth-particleOne.width/2;
particleOne.speedX*=-1;
}
elseif(particleOne.x<0){
particleOne.x=particleOne.width/2;
particleOne.speedX*=-1;
}
if(particleOne.y>stage.stageHeight){
particleOne.y=stage.stageHeight-particleOne.width/2;
particleOne.speedY*=-1;
}
elseif(particleOne.y<0){
particleOne.y=particleOne.width/2;
particleOne.speedY*=-1;
}
//Gothroughtheotherparticlestocheckthedistancewiththefirstparticle
for(varj:uint=i+1;j<particlesArray.length;j++){
varparticleTwo:Particle=particlesArray[j];
vardistanceX:Number=particleOne.x-particleTwo.x;
vardistanceY:Number=particleOne.y-particleTwo.y;
//UsePythagoreantheorem(a^2+b^2=c^2)tocalculatethedistance
vardistance:Number=Math.sqrt(distanceX*distanceX+distanceY*distanceY);
//Ifthedistanceissmallerthan80px,drawalinebetweentheparticles
if(distance<80){
drawLine(particleOne,particleTwo);
}
}
}
}
在enterFrameHandler之后添加方法drawLine實(shí)現(xiàn)畫(huà)線(xiàn)功能。
//Thisfunctiondrawsablacklinebetweentwoparticles
functiondrawLine(particleOne:Particle,particleTwo:Particle):void{
graphics.lineStyle(1,0x000000);//線(xiàn)為白色，如黑色背景改為0xffffff
graphics.moveTo(particleOne.x,particleOne.y);
graphics.lineTo(particleTwo.x,particleTwo.y);
} 10、測(cè)試影片剪輯。
完整主類(lèi)代碼：
//Weneedfewimportsforthefilters
importfl.motion.Color;
importflash.geom.ColorTransform;
//Createanarrayfortheparticlesforlateruse
varnumberOfParticles:Number=30;
varparticlesArray:Array=newArray();
//Thisloopcreates30particlesthatarepositionedrandomlyonthestage.
//Wealsoaddsomeeffectstotheparticles
for(vari=0;i<numberOfParticles;i++){
varparticle:Particle=newParticle();
//Giverandomxandyspeedtotheparticle.
//Math.randomreturnsarandomnumbern,where0<=n<1.
particle.speedX=2+Math.random();
particle.speedY=2+Math.random();
//Setthestartingposition
particle.y=Math.random()*stage.stageHeight;
particle.x=Math.random()*stage.stageWidth;
//Setarandomtinttotheparticle,sotheywillhavedifferentcolors.
varct:Color=newColor();
ct.setTint(0xFFFFFF*Math.random(),0.5);
particle.transform.colorTransform=ct;
//Setrandomsizetotheparticles,sotheparticleswilldifferinsize
particle.scaleX=0.5+Math.random();
particle.scaleY=particle.scaleX;
//Thisarrayisusedtostoreallofthefilters
varparticleFilters:Array=newArray();
//Createadifferentblureffectineachparticle
vartempBlurAmount=Math.random()*4;
varblur:BlurFilter=newBlurFilter(tempBlurAmount,tempBlurAmount,1);
particleFilters.push(blur);
//Createagloweffectineachparticle
varcolor:Number=0x000000;
varalphaValue:Number=0.5;
varblurX:Number=20;
varblurY:Number=20;
varstrength:Number=5;
varglow:GlowFilter=newGlowFilter(color,
alphaValue,
blurX,
blurY,
strength);
particleFilters.push(glow);
//Applythecreatedfilterstotheparticle(blur&glow)
particle.filters=particleFilters;
//Addtheparticletothestageandpushitintoanarrayforlateruse
addChild(particle);
particlesArray.push(particle);
}
addEventListener(Event.ENTER_FRAME,enterFrameHandler);
//Thisfunctionisresponsibleforanimation
functionenterFrameHandler(e:Event):void{
//Clearthepreviouslines
graphics.clear();
//Let’sloopthroughtheparticles
for(i=0;i<particlesArray.length;i++){
varparticleOne:Particle=particlesArray[i];
//Movetheparticletoanewlocation
particleOne.x+=particleOne.speedX;
particleOne.y+=particleOne.speedY;
//Checktheboundaries
if(particleOne.x>stage.stageWidth){
particleOne.x=stage.stageWidth-particleOne.width/2;
particleOne.speedX*=-1;
}
elseif(particleOne.x<0){
particleOne.x=particleOne.width/2;
particleOne.speedX*=-1;
}
if(particleOne.y>stage.stageHeight){
particleOne.y=stage.stageHeight-particleOne.width/2;
particleOne.speedY*=-1;
}
elseif(particleOne.y<0){
particleOne.y=particleOne.width/2;
particleOne.speedY*=-1;
}
//Gothroughtheotherparticlestocheckthedistancewiththefirstparticle
for(varj:uint=i+1;j<particlesArray.length;j++){
varparticleTwo:Particle=particlesArray[j];
vardistanceX:Number=particleOne.x-particleTwo.x;
vardistanceY:Number=particleOne.y-particleTwo.y;
//UsePythagoreantheorem(a^2+b^2=c^2)tocalculatethedistance
vardistance:Number=Math.sqrt(distanceX*distanceX+distanceY*distanceY);
//Ifthedistanceissmallerthan80px,drawalinebetweentheparticles
if(distance<80){
drawLine(particleOne,particleTwo);
}
}
}
}
//Thisfunctiondrawsablacklinebetweentwoparticles
functiondrawLine(particleOne:Particle,particleTwo:Particle):void{
graphics.lineStyle(1,0x000000);
graphics.moveTo(particleOne.x,particleOne.y);
graphics.lineTo(particleTwo.x,particleTwo.y);
}