Flash Tutorials
& Resources
Dreamweaver
Tutorials
Fireworks &
Illustrator Tutorials
Photoshop
Tutorials
Web Design
Tutorials & Resources
CSS
Tutorials
CorelDraw
Tutorials
You are here : : Home > Free Resources > Flash Tutorials & Resources >Particle Effect  

Flash Tutorials

Basics

Animation & Effects

Actionscript

Creating a Website

Miscellaneous

Flash Articles

Free Flash Resources

Other Flash Resources

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:


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


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



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

In the example, I've added a loop, which makes a pretty neat effect, almost like snow.
You can find the source here


Now building a website is as easy as 1-2-3!

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

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.


Looking for high-quality Flash Website Design? Choose from over 6000 templates!

Gorgeous Page Roll Image Transition Effect in Flash

Creating Page Curl Transition

Creating a Rotating 3D Planet in Flash

Creating Realistic 3D Planet

Best Flash Photo Gallery Website Templates

Best Flash Photo Gallery Website Templates

Burning Image Effect in Flash

maskmn_image055

Realistic Rippling Water Animation in Flash

r_water

Awesome 3D Flash Website Templates

Awesome 3D Flash Website Templates

 

Featured Template
Template # 55734
Type: WooCommerce
Price: $114

Flash Photo Galleries