AS3.0粒子效果实例（2）
作者：cao4811 类型:原创 来源:中国教程网论坛
这是一个粒子效果实例教程，学习如何结合基本的动画和 ActionScript 3 绘图API。
演示：
1、新建Flash文件，设置属性：宽、高默认为550*400 ，保存，名称任意。图1：
2、用椭圆工具画一个 10 × 10 大小的球，颜色任意。
3、把球转换成影片剪辑，命名 "Particle "，注册点居中。图2：
4、把球从舞台上删除。
5、打开库面板，右键单击Particle影片剪辑，选择属性。在属性面板中的链接项，为ActionScript导出的复选框打勾。在类的文本输入框中输入" Particle " 。图3：
6、新建一个ActionScript文件，命名为 " Particle "，保存在fla文件相同的目录下。图4：
在编译器中输入代码：
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;
function Particle ():void {
}
}
}7、切换到fla主类。生成粒子实例，显示在舞台上，而且增加一些效果。在第1帧输入代码：
//We need few imports for the filters
import fl.motion.Color;
import flash.geom.ColorTransform;
//Create an array for the particles for later use
var numberOfParticles:Number = 30;
var particlesArray:Array = new Array();
//This loop creates 30 particles that are positioned randomly on the stage.
//We also add some effects to the particles
for (var i=0; i < numberOfParticles; 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 = 2 + Math.random();
particle.speedY = 2 + Math.random();
//Set the starting position
particle.y = Math.random() * stage.stageHeight;
particle.x = Math.random() * stage.stageWidth;
//Set a random tint to the particle, so they will have different colors.
var ct:Color = new Color();
ct.setTint (0xFFFFFF * Math.random(), 0.5);
particle.transform.colorTransform = ct;
//Set random size to the particles, so the particles will differ in size
particle.scaleX = 0.5 + Math.random();
particle.scaleY = particle.scaleX;
//This array is used to store all of the filters
var particleFilters:Array = new Array();
//Create a different blur effect in each particle
var tempBlurAmount = Math.random()*4;
var blur:BlurFilter = new BlurFilter(tempBlurAmount, tempBlurAmount, 1);
particleFilters.push (blur);
//Create a glow effect in each particle
var color:Number = 0x000000;
var alphaValue:Number = 0.5;
var blurX:Number = 20;
var blurY:Number = 20;
var strength:Number = 5;
var glow:GlowFilter = new GlowFilter(color,
alphaValue,
blurX,
blurY,
strength);
particleFilters.push (glow);
//Apply the created filters to the particle (blur & glow)
particle.filters = particleFilters;
//Add the particle to the stage and push it into an array for later use
addChild (particle);
particlesArray.push (particle);
}可能看起来很难的 ，但实际上非常简单。注释应该解释的很充分。测试一下影片剪辑，效果如图。图5：
8、注册Event.ENTER_FRAME事件，随机地移动粒子。接上面输入代码：
addEventListener (Event.ENTER_FRAME, enterFrameHandler);
//This function is responsible for animation
function enterFrameHandler (e:Event):void {
//Let’s loop through the particles
for (i=0; i < particlesArray.length; i++) {
var particleOne:Particle = particlesArray[i];
//Move the particle to a new location
particleOne.x += particleOne.speedX;
particleOne.y += particleOne.speedY;
//Check the boundaries.
//If a hit occurs, multiply the speed by (-1) to reverse the speed.
//Right edge
if (particleOne.x > stage.stageWidth) {
particleOne.x = stage.stageWidth - particleOne.width/2;
particleOne.speedX *= -1;
}
//Left edge
else if (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
else if (particleOne.y < 0) {
particleOne.y = particleOne.width/2;
particleOne.speedY *= -1;
}
}
}测试影片剪辑，观看一下效果。未命名-1.swf：
9、为粒子加入连线，修改 enterFrameHandler，代码如下：
function enterFrameHandler (e:Event):void {
//Clear the previous lines
graphics.clear();
//Let’s loop through the particles
for (i=0; i < particlesArray.length; i++) {
var particleOne:Particle = particlesArray[i];
//Move the particle to a new location
particleOne.x += particleOne.speedX;
particleOne.y += particleOne.speedY;
//Check the boundaries
if (particleOne.x > stage.stageWidth) {
particleOne.x = stage.stageWidth - particleOne.width/2;
particleOne.speedX *= -1;
}
else if (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;
}
else if (particleOne.y < 0) {
particleOne.y = particleOne.width/2;
particleOne.speedY *= -1;
}
//Go through the other particles to check the distance with the first particle
for (var j:uint = i + 1; j < particlesArray.length; j++) {
var particleTwo:Particle = particlesArray[j];
var distanceX:Number = particleOne.x - particleTwo.x;
var distanceY:Number = particleOne.y - particleTwo.y;
//Use Pythagorean theorem (a^2 + b^2 = c^2) to calculate the distance
var distance:Number = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
//If the distance is smaller than 80px, draw a line between the particles
if (distance < 80) {
drawLine (particleOne, particleTwo);
}
}
}
}
在 enterFrameHandler 之后添加方法drawLine实现画线功能。
//This function draws a black line between two particles
function drawLine (particleOne:Particle, particleTwo:Particle):void {
graphics.lineStyle (1, 0x000000);//线为白色，如黑色背景改为0xffffff
graphics.moveTo (particleOne.x, particleOne.y);
graphics.lineTo (particleTwo.x, particleTwo.y);
}10、测试影片剪辑。
完整主类代码：
//We need few imports for the filters
import fl.motion.Color;
import flash.geom.ColorTransform;
//Create an array for the particles for later use
var numberOfParticles:Number = 30;
var particlesArray:Array = new Array();
//This loop creates 30 particles that are positioned randomly on the stage.
//We also add some effects to the particles
for (var i=0; i < numberOfParticles; 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 = 2 + Math.random();
particle.speedY = 2 + Math.random();
//Set the starting position
particle.y = Math.random() * stage.stageHeight;
particle.x = Math.random() * stage.stageWidth;
//Set a random tint to the particle, so they will have different colors.
var ct:Color = new Color();
ct.setTint (0xFFFFFF * Math.random(), 0.5);
particle.transform.colorTransform = ct;
//Set random size to the particles, so the particles will differ in size
particle.scaleX = 0.5 + Math.random();
particle.scaleY = particle.scaleX;
//This array is used to store all of the filters
var particleFilters:Array = new Array();
//Create a different blur effect in each particle
var tempBlurAmount = Math.random()*4;
var blur:BlurFilter = new BlurFilter(tempBlurAmount, tempBlurAmount, 1);
particleFilters.push (blur);
//Create a glow effect in each particle
var color:Number = 0x000000;
var alphaValue:Number = 0.5;
var blurX:Number = 20;
var blurY:Number = 20;
var strength:Number = 5;
var glow:GlowFilter = new GlowFilter(color,
alphaValue,
blurX,
blurY,
strength);
particleFilters.push (glow);
//Apply the created filters to the particle (blur & glow)
particle.filters = particleFilters;
//Add the particle to the stage and push it into an array for later use
addChild (particle);
particlesArray.push (particle);
}
addEventListener (Event.ENTER_FRAME, enterFrameHandler);
//This function is responsible for animation
function enterFrameHandler (e:Event):void {
//Clear the previous lines
graphics.clear();
//Let’s loop through the particles
for (i=0; i < particlesArray.length; i++) {
var particleOne:Particle = particlesArray[i];
//Move the particle to a new location
particleOne.x += particleOne.speedX;
particleOne.y += particleOne.speedY;
//Check the boundaries
if (particleOne.x > stage.stageWidth) {
particleOne.x = stage.stageWidth - particleOne.width/2;
particleOne.speedX *= -1;
}
else if (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;
}
else if (particleOne.y < 0) {
particleOne.y = particleOne.width/2;
particleOne.speedY *= -1;
}
//Go through the other particles to check the distance with the first particle
for (var j:uint = i + 1; j < particlesArray.length; j++) {
var particleTwo:Particle = particlesArray[j];
var distanceX:Number = particleOne.x - particleTwo.x;
var distanceY:Number = particleOne.y - particleTwo.y;
//Use Pythagorean theorem (a^2 + b^2 = c^2) to calculate the distance
var distance:Number = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
//If the distance is smaller than 80px, draw a line between the particles
if (distance < 80) {
drawLine (particleOne, particleTwo);
}
}
}
}
//This function draws a black line between two particles
function drawLine (particleOne:Particle, particleTwo:Particle):void {
graphics.lineStyle (1, 0x000000);
graphics.moveTo (particleOne.x, particleOne.y);
graphics.lineTo (particleTwo.x, particleTwo.y);
}
附件下载：
未命名-2.rar Particle.rar
演示：
1、新建Flash文件，设置属性：宽、高默认为550*400 ，保存，名称任意。图1：
2、用椭圆工具画一个 10 × 10 大小的球，颜色任意。
3、把球转换成影片剪辑，命名 "Particle "，注册点居中。图2：
4、把球从舞台上删除。
5、打开库面板，右键单击Particle影片剪辑，选择属性。在属性面板中的链接项，为ActionScript导出的复选框打勾。在类的文本输入框中输入" Particle " 。图3：
6、新建一个ActionScript文件，命名为 " Particle "，保存在fla文件相同的目录下。图4：
在编译器中输入代码：
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;
function Particle ():void {
}
}
}
//We need few imports for the filters
import fl.motion.Color;
import flash.geom.ColorTransform;
//Create an array for the particles for later use
var numberOfParticles:Number = 30;
var particlesArray:Array = new Array();
//This loop creates 30 particles that are positioned randomly on the stage.
//We also add some effects to the particles
for (var i=0; i < numberOfParticles; 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 = 2 + Math.random();
particle.speedY = 2 + Math.random();
//Set the starting position
particle.y = Math.random() * stage.stageHeight;
particle.x = Math.random() * stage.stageWidth;
//Set a random tint to the particle, so they will have different colors.
var ct:Color = new Color();
ct.setTint (0xFFFFFF * Math.random(), 0.5);
particle.transform.colorTransform = ct;
//Set random size to the particles, so the particles will differ in size
particle.scaleX = 0.5 + Math.random();
particle.scaleY = particle.scaleX;
//This array is used to store all of the filters
var particleFilters:Array = new Array();
//Create a different blur effect in each particle
var tempBlurAmount = Math.random()*4;
var blur:BlurFilter = new BlurFilter(tempBlurAmount, tempBlurAmount, 1);
particleFilters.push (blur);
//Create a glow effect in each particle
var color:Number = 0x000000;
var alphaValue:Number = 0.5;
var blurX:Number = 20;
var blurY:Number = 20;
var strength:Number = 5;
var glow:GlowFilter = new GlowFilter(color,
alphaValue,
blurX,
blurY,
strength);
particleFilters.push (glow);
//Apply the created filters to the particle (blur & glow)
particle.filters = particleFilters;
//Add the particle to the stage and push it into an array for later use
addChild (particle);
particlesArray.push (particle);
}
8、注册Event.ENTER_FRAME事件，随机地移动粒子。接上面输入代码：
addEventListener (Event.ENTER_FRAME, enterFrameHandler);
//This function is responsible for animation
function enterFrameHandler (e:Event):void {
//Let’s loop through the particles
for (i=0; i < particlesArray.length; i++) {
var particleOne:Particle = particlesArray[i];
//Move the particle to a new location
particleOne.x += particleOne.speedX;
particleOne.y += particleOne.speedY;
//Check the boundaries.
//If a hit occurs, multiply the speed by (-1) to reverse the speed.
//Right edge
if (particleOne.x > stage.stageWidth) {
particleOne.x = stage.stageWidth - particleOne.width/2;
particleOne.speedX *= -1;
}
//Left edge
else if (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
else if (particleOne.y < 0) {
particleOne.y = particleOne.width/2;
particleOne.speedY *= -1;
}
}
}
9、为粒子加入连线，修改 enterFrameHandler，代码如下：
function enterFrameHandler (e:Event):void {
//Clear the previous lines
graphics.clear();
//Let’s loop through the particles
for (i=0; i < particlesArray.length; i++) {
var particleOne:Particle = particlesArray[i];
//Move the particle to a new location
particleOne.x += particleOne.speedX;
particleOne.y += particleOne.speedY;
//Check the boundaries
if (particleOne.x > stage.stageWidth) {
particleOne.x = stage.stageWidth - particleOne.width/2;
particleOne.speedX *= -1;
}
else if (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;
}
else if (particleOne.y < 0) {
particleOne.y = particleOne.width/2;
particleOne.speedY *= -1;
}
//Go through the other particles to check the distance with the first particle
for (var j:uint = i + 1; j < particlesArray.length; j++) {
var particleTwo:Particle = particlesArray[j];
var distanceX:Number = particleOne.x - particleTwo.x;
var distanceY:Number = particleOne.y - particleTwo.y;
//Use Pythagorean theorem (a^2 + b^2 = c^2) to calculate the distance
var distance:Number = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
//If the distance is smaller than 80px, draw a line between the particles
if (distance < 80) {
drawLine (particleOne, particleTwo);
}
}
}
}
在 enterFrameHandler 之后添加方法drawLine实现画线功能。
//This function draws a black line between two particles
function drawLine (particleOne:Particle, particleTwo:Particle):void {
graphics.lineStyle (1, 0x000000);//线为白色，如黑色背景改为0xffffff
graphics.moveTo (particleOne.x, particleOne.y);
graphics.lineTo (particleTwo.x, particleTwo.y);
}
完整主类代码：
//We need few imports for the filters
import fl.motion.Color;
import flash.geom.ColorTransform;
//Create an array for the particles for later use
var numberOfParticles:Number = 30;
var particlesArray:Array = new Array();
//This loop creates 30 particles that are positioned randomly on the stage.
//We also add some effects to the particles
for (var i=0; i < numberOfParticles; 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 = 2 + Math.random();
particle.speedY = 2 + Math.random();
//Set the starting position
particle.y = Math.random() * stage.stageHeight;
particle.x = Math.random() * stage.stageWidth;
//Set a random tint to the particle, so they will have different colors.
var ct:Color = new Color();
ct.setTint (0xFFFFFF * Math.random(), 0.5);
particle.transform.colorTransform = ct;
//Set random size to the particles, so the particles will differ in size
particle.scaleX = 0.5 + Math.random();
particle.scaleY = particle.scaleX;
//This array is used to store all of the filters
var particleFilters:Array = new Array();
//Create a different blur effect in each particle
var tempBlurAmount = Math.random()*4;
var blur:BlurFilter = new BlurFilter(tempBlurAmount, tempBlurAmount, 1);
particleFilters.push (blur);
//Create a glow effect in each particle
var color:Number = 0x000000;
var alphaValue:Number = 0.5;
var blurX:Number = 20;
var blurY:Number = 20;
var strength:Number = 5;
var glow:GlowFilter = new GlowFilter(color,
alphaValue,
blurX,
blurY,
strength);
particleFilters.push (glow);
//Apply the created filters to the particle (blur & glow)
particle.filters = particleFilters;
//Add the particle to the stage and push it into an array for later use
addChild (particle);
particlesArray.push (particle);
}
addEventListener (Event.ENTER_FRAME, enterFrameHandler);
//This function is responsible for animation
function enterFrameHandler (e:Event):void {
//Clear the previous lines
graphics.clear();
//Let’s loop through the particles
for (i=0; i < particlesArray.length; i++) {
var particleOne:Particle = particlesArray[i];
//Move the particle to a new location
particleOne.x += particleOne.speedX;
particleOne.y += particleOne.speedY;
//Check the boundaries
if (particleOne.x > stage.stageWidth) {
particleOne.x = stage.stageWidth - particleOne.width/2;
particleOne.speedX *= -1;
}
else if (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;
}
else if (particleOne.y < 0) {
particleOne.y = particleOne.width/2;
particleOne.speedY *= -1;
}
//Go through the other particles to check the distance with the first particle
for (var j:uint = i + 1; j < particlesArray.length; j++) {
var particleTwo:Particle = particlesArray[j];
var distanceX:Number = particleOne.x - particleTwo.x;
var distanceY:Number = particleOne.y - particleTwo.y;
//Use Pythagorean theorem (a^2 + b^2 = c^2) to calculate the distance
var distance:Number = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
//If the distance is smaller than 80px, draw a line between the particles
if (distance < 80) {
drawLine (particleOne, particleTwo);
}
}
}
}
//This function draws a black line between two particles
function drawLine (particleOne:Particle, particleTwo:Particle):void {
graphics.lineStyle (1, 0x000000);
graphics.moveTo (particleOne.x, particleOne.y);
graphics.lineTo (particleTwo.x, particleTwo.y);
}
未命名-2.rar Particle.rar
- 上一篇:
- Photoshop设计有趣可爱的星星文字
- 没有相关教材
- 最近更新