Actionscript 3 Fireworks
Intro
This tutorial teaches you how to create random fireworks via Actionscript 3.0. There is quite a bit of code here, but it's all really simple, if you just think about it for a while. For this tutorial, we'll be using two external actionscript 3.0 classes and the main movie.
Setting up the environment
1. Create a new document of size 300x300.
2. Draw a ball of size 15x15 (you can choose the color as you like).
3. Convert it into a movie clip (registration point in the center).
4. Linkage to movie clip to a class called "Particle".
5. Remove the Particle from the stage.
Moving into Actionscript 3.0
First, let's set up the main movie. Type the following in the actions panel (in the first frame).
/*
This timer runs 2000 times every 0.5 seconds.
*/
var myTimer:Timer = new Timer(500, 2000);
myTimer.addEventListener (TimerEvent.TIMER, timerHandler);
myTimer.start ();
/*
This function is called every 0.5 seconds.
*/
function timerHandler (event:TimerEvent):void {
//Create a new firework
var firework:Firework = new Firework();
//Set a random x position
firework.x = Math.random() * stage.stageWidth;
//Set it to be at the bottom of the stage.
firework.y = stage.stageHeight;
//Add it to the stage
addChild (firework);
}
Now let's create the firework class. Create a new actionscript 3.0 file (.as) and name it "Firework". In the file, type the following.
package {
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.display.MovieClip;
import flash.events.*;
/*
This class represents one firework that starts to move upwards
and then explodes.
*/
public class Firework extends MovieClip {
//Each firework has its own speed
private var speedY:Number = 0;
private var timer:Timer;
function Firework ():void {
//Assign a random y speed
speedY = (-1) * Math.random() * 2 - 2;
//Draw the firework (you could also use an image or something more fancy)
graphics.beginFill (0xffffff);
graphics.drawCircle (0, 0, 2);
graphics.endFill ();
//We want the firework to immediately start moving upwards
takeOff();
}
//This function adds event listeners for the animation
private function takeOff ():void {
addEventListener (Event.ENTER_FRAME, takeOffEnterFrame);
/*
Add a timer so we know when to make an explosion.
In this case the firework explodes after 2 seconds.
*/
timer = new Timer(2000,1);
timer.start ();
timer.addEventListener (TimerEvent.TIMER_COMPLETE, explode);
}
//Firework moves up...
private function takeOffEnterFrame (e:Event):void {
this.y += speedY;
}
/*
This function is called when the timer is finished.
That's when we want to explode the firework.
*/
private function explode (e:Event):void {
//Remove the take off animation
removeEventListener (Event.ENTER_FRAME, takeOffEnterFrame);
//Create an explosion to the same position as where this firework is
var explosion:Explosion = new Explosion();
explosion.x = this.x;
explosion.y = this.y;
//Add the explosion to stage
stage.addChild (explosion);
//Make the firework invisible, we don't want to show it when the explosion starts
this.visible = false;
}
}
}
We are almost done. We still need to create the Explosion class, which will be responsible for the whole explosion animation.
Create a new actionscript file and name it "Explosion". Type the following.
package {
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.display.MovieClip;
import flash.events.*;
import fl.motion.Color;
import flash.geom.ColorTransform;
/*
This class represents the explosion that starts from the firework.
*/
public class Explosion extends MovieClip {
private var particlesArray:Array;
private var numberOfParticles:uint = 0;
function Explosion ():void {
//Create a new array where to put all the exploded particles
particlesArray = new Array();
//Explosions have a random number of particles (10-40 particles)
numberOfParticles = Math.floor(Math.random() * 30) + 10;
//Assign a random color for explosion
var ct:Color = new Color();
ct.setTint (0xFFFFFF * Math.random(),1);
//We use the scale to make the particles of different size
var scale:Number = Math.random();
/*
We want the particles to explode in circle.
We calculate the angle difference between the particles.
*/
var angleDifference:Number = 360 / numberOfParticles;
var angle = 0;
for (var i = 0; i < numberOfParticles; i++) {
var particle:Particle = new Particle();
//Each particle gets exploded into the direction specified by the angle
particle.speedY = Math.sin(angle * Math.PI/180)*3;
particle.speedX = Math.cos(angle * Math.PI/180)*3;
//Assign the scale to change the particle's size
particle.scaleX = scale;
particle.scaleY = scale;
particlesArray.push (particle);
//Assign the color
particle.transform.colorTransform = ct;
addChild (particle);
//Update the angle for the next particle
angle += angleDifference;
}
addEventListener (Event.ENTER_FRAME, enterFrameHandler);
}
function enterFrameHandler (e:Event):void {
for (var i = 0; i < particlesArray.length; i++) {
var particle:Particle = particlesArray[i];
//Update y and x coordinates
particle.y += particle.speedY;
particle.x += particle.speedX;
//Fade away the particle
particle.alpha -= 0.02;
//Remove the explosion animation when all the particles are invisible
if (particle.alpha < -0.1) {
removeEventListener (Event.ENTER_FRAME, enterFrameHandler);
}
}
}
}
}
You're done, test your movie! Feel free the copy this code and modify it to your own needs. You might for example change the boring white dots to something more interesting. I hope you found this tutorial useful!
