Gamersgarden.com - News/blog

As a bit of a treat, I’m going to show you how to make particle “explosions” that will come in handy in games, visulisations or other projects.

Here is what we’ll be making: (click to create an explosion.)

Download .zip source files here (6.83KB)

First of all, create a new Flash document. The width and height you choose doesn’t really matter.

Press ctrl+F8 to create a new Movie Clip. Enter Particle for the name.

What we want to do here is go to the advanced options and tick the box that says Export for ActionScript. This will mean that we can link the graphics of this movie clip to the class that we will create later on.

In the textbox labeled Class, enter Particle.

What the create MovieClip window should look like

After entering these settings, press ok. Create a square that is around 3px wide and 3px height. The colour doesn’t matter as we will change this dynamically later on.

Go back to the main timeline.

Now we have our Particle MovieClip set up. At the moment, this doesn’t do anything at all.

Let’s add some ActionScript.

Press File -> New and create a new ActionScript File (*.as)

Save this file as Particle.as

Make sure that when you save this file, it is in the same folder as your main .fla file.

The ActionScript that we will put into this Particle.as file will control each particle that is on the screen.

class Particle extends MovieClip{
var vx,vy;
var timeToLast,startTimer;
var myColor,rgbValue;
	function onLoad(){
		var angle = Math.random()*360;
		vx = Math.cos(angle)*Math.random()*20+5;
		vy = Math.sin(angle)*Math.random()*20+5;
		timeToLast = Math.random()*500 + 1000;
		startTimer = getTimer();
		myColor = new Color(this);
		myColor.setRGB(rgbValue);
	}
	function onEnterFrame(){
		this._x += vx;
		this._y += vy;
		this._alpha -=2;
		if(getTimer() - startTimer >= timeToLast || this._alpha == 0){
			removeMovieClip(this);
		}
	}
}

It may look confusing, but I’ll take you through it and explain it.

class Particle extends MovieClip{

This just sets Particle up as a class that extends the MovieClip class. This means that the class Particle will inherit features from the MovieClip class.

var vx,vy;
var timeToLast,startTimer;
var myColor,rgbValue;

Here we’re just setting up variables for our Particle. vx, vy (x and y velocities), timeTolast,startTimer (how long the particle lasts and what time the particle is first created at), myColor,rgbValue (for setting our Particle’s colour.)

function onLoad(){
	var angle = Math.random()*360;
	vx = Math.cos(angle)*Math.random()*20+5;
	vy = Math.sin(angle)*Math.random()*20+5;
	timeToLast = Math.random()*500 + 1000;
	startTimer = getTimer();
	myColor = new Color(this);
	myColor.setRGB(rgbValue);
}

When our particle loads we set up the variables for it. Here we are setting it’s x and y velocities and the time it can last on stage.

myColor = new Color(this);
myColor.setRGB(rgbValue);

This is how we change our Particle’s colour. We create a Color object, myColor and assign it to this particle. We then proceed to give it a rgbValue (which will be passed to the particle later on.)

function onEnterFrame(){
	this._x += vx;
	this._y += vy;
	this._alpha -=2;
	if(getTimer() - startTimer >= timeToLast || this._alpha == 0){
		removeMovieClip(this);
	}
}

This is where we decide what the particle will do. What this particle is doing at the moment is just moving in a random direction. Its opacity is lowered and if it’s _alpha reaches 0 (or the particle has been on stage for long enough), the particle is removed to free up the cpu.

This is all we need to manage each particle. Creating the particles is easy. In the main . fla file, enter this code in the timeline (on frame 1.)

var currentParticle = 0;
var colors = new Array("0xFF0000","0x00FF00","0x0000FF","0xFFFF00","0xFF00FF","0x00FFFF");

onEnterFrame = function(){
}

onMouseDown = function(){
	createExplosion(_xmouse,_ymouse,100,Math.round(Math.random()));
}

function createExplosion(x,y,max,sameColor){
	var c;
	if(sameColor){
		c = colors[int(Math.random()*colors.length)];
	}
	for(var i=0; i < max; i++){
		if(!sameColor){
			c = colors[int(Math.random()*colors.length)];
		}
		attachMovie("Particle","P"+currentParticle,getNextHighestDepth(),{_x:x,_y:y,rgbValue:c});
		currentParticle++;
	}

}

The only slightly confusing part of this code is this line:

attachMovie("Particle","P"+currentParticle,getNextHighestDepth(),{_x:x,_y:y,rgbValue:c});

All this does is attaches the MovieClip Particle (which is linked to our Particle.as script) to the movie. It is given the name “P”+currentparticle and is placed at the next highest depth. The last part of this line is where we pass some values to the object (x,y and a colour.)

Thank you for reading and I hope that you have learnt something.

Links: A very nice AS3 particle explosion effect here