You are here : : Home > Free Resources > Flash Tutorials & Resources >Particle Effect |
Basics
Animation & Effects
Actionscript
Miscellaneous
Flash Articles
Free Flash Resources
Other Flash Resources
This tutorial will teach you the basics of fast particles in Flash. Learn how to create a cool particle effect using actionscript in Flash.
Your particle system basically consists of two parts: the particle object, and the renderer object. The idea is that you have a number of abstract particles that get fed into the renderer, which renders them in different ways. Abstract means that the particle is very generic, and does not extends anything; you can not add the object to a display list, you do not have preset hitTest functions, etc.
The renderer should use an iterative method to through the particles and render them one by one, or apply some other effect on them.
As I have mentioned, there are many different particle effects that you can apply, but for the simplicity of this first tutorial, we will have the renderer draw out a single white pixel.
We will need a particle class to store all the information regarding the position, velocity, acceleration, as well as damping of the particle. If you studied harmonic motion in physics, you should know what damping means. If you have not, damping simply means applying a loss of force to the object over time.
Your particle should have the following properties:
With all that cleared up, lets write the particle class.
Start up your Flash and create a new Actionscipt file:
package
{
public class Particle
{
public function Particle()
{
}
}
}
To begin with, fill in the properties of the particle, as mentioned above:
package
{
public class Particle
{
public var x:Number;
public var y:Number;
public var velX:Number;
public var velY:Number;
public var accX:Number;
public var accY:Number;
public var dampX:Number;
public var dampY:Number;
public function Particle()
{
}
}
}
the default value for the data type Number in Flash is NaN, so you need to initialize their values in the
Constructor:
package
{
public class Particle
{
public var x:Number;
public var y:Number;
public var velX:Number;
public var velY:Number;
public var accX:Number;
public var accY:Number;
public var dampX:Number;
public var dampY:Number;
public function Particle()
{
x = y = velX = velY = accX = accY = 0;
dampX = dampY = 1;
}
}
}
package
{
class Renderer
{
public function Renderer():void
{
}
}
}
package
{
public class Renderer
{
private var particles:Vector.
;
public function Renderer()
{
particles = new Vector.
();
}
}
}
public function addParicle(p:Particle):void
{
particle.push(p);
}
public function render(target:BitmapData):void
{
var i:int = particles.length;
while(i--)
{
target.setPixel(particles[i].x,particles[i].y,0xffffff);
}
}
import flash.display.BitmapData;
import flash.display.Bitmap;
var data:BitmapData = new BitmapData(800,600,false,0x000000);
var bitmap:Bitmap = new Bitmap(data);
bitmap.scaleX = bitmap.scaleY = 4;
addChild(bitmap);
var render:Renderer = new Renderer();
var i:int = 100;
while(i--)
{
var p:Particle = new Particle();
p.x = Math.random() * 800;
p.y = Math.random() * 600;
render.addParicle(p);
}
render.render(data);
public function update():void
{
velX += accX;
velY += accY;
velX *= dampX;
velY *= dampY;
x+=velX;
y+=velY;
}
public function render(target:BitmapData):void
{
var i:int = particles.length;
target.fillRect(target.rect,0x000000);
while(i--)
{
particles[i].update();
target.setPixel(particles[i].x,particles[i].y,0xffffff);
}
}
import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.events.Event;
var data:BitmapData = new BitmapData(200,150,false,0x000000);
var bitmap:Bitmap = new Bitmap(data);
bitmap.scaleX = bitmap.scaleY = 4;
addChild(bitmap);
var render:Renderer = new Renderer();
var i:int = 10;
while(i--)
{
var p:Particle = new Particle();
p.x = Math.random() * 200;
p.y = Math.random() * 150;
p.velX = Math.random()*10-5
p.velY = Math.random()*10-5;
render.addParicle(p);
}
addEventListener(Event.ENTER_FRAME, update);
function update(e:Event):void
{
render.render(data);
}
while(i--)
{
var p:Particle = new Particle();
p.x = Math.random() * 200;
p.y = Math.random() * 150;
p.velX = Math.random()*10-5
p.accY = 1;
render.addParicle(p);
}
No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.