Particles in Flash

This tutorial will teach you the basics of fast particles in Flash. Learn how to create a cool particle effect using actionscript in Flash.

Tutorial Details

• Program: Flash CS5
• Difficulty: Advanced
• Estimated Completion Time: 30 Minutes
  

The Basics

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.

The Particle Class

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:

• position
• velocity
• acceleration
• damping

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:

All these number look confusing, but it's all physics. I'll clear them up after I go through the renderer. With a renderer, you will be able to see how particle physics is applied graphically.

The Renderer

To recap what a renderer does, is that it stores all the particles you want to render and draw them out with an iterative method. Start a new class call renderer:


package
{
class Renderer
{
public function Renderer():void
{

}
}
}


The renderer should have some sort of collection data structure to hold the particles. For this example, I will use Vector (you can use arrays or linked lists as will, but remember that array is slower than vector is slower than linked lists).


package
{

public class Renderer
{
private var particles:Vector. ;

public function Renderer()
{
particles = new Vector. ();
}


}

}


Next, we need a method to add particles to the particle class:


public function addParicle(p:Particle):void
{
particle.push(p);
}


The Renderer needs  render function, obviously, so lets go ahead and add that. The API for the particle we want it to be able to render onto any bitmap that we want, so add the following function:


public function render(target:BitmapData):void
{
var i:int = particles.length;
while(i--)
{
target.setPixel(particles[i].x,particles[i].y,0xffffff);
}
}


Now we can actually draw something onto the screen. Add this code to your first frame:


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


this code create a black bitmap and adds it to the display list.
next, create some particles and use Renderer to draw them to the 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);


If you have done everything right, you should see a black background and many white dots.


I have the stage size set to 800 x 600, buts that's highly up to you.

Particle Physics

So we have rendering set up, now it's time to move on to some particle physics. For a start, lets do some gravity simulation.

It's actually very easy, what we do is apply a vertical acceleration to the velocity of the particle, and apply the resulting velocity to the particle, every frame. To do this efficiently, go back to the particle class and add an update function.


public function update():void
{
velX += accX;
velY += accY;
velX *= dampX;
velY *= dampY;
x+=velX;
y+=velY;
}


You will also need to modify your Renderer a little bit; remember, we are rendering every frame now. What we need to do is :
1 clear the screen
2 call the particles' update function
3 draw the particles



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

in  your first frame, add an EventListener and give the particles some random velocities. Your first frame should now look like this:



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


Right now, the particles are moving in uniform motion. If you want to give them some gravity, change the "velY = Math.random() * 10 - 5" to accY = 1, simple as



You can find the source here

---