Creating Fireworks with ActionScript 3

February 6, 2009 by: smonte

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 also be using two external ActionScript 3.0 classes.

Setting up the environment

1. Create a new document of size 300×300.

2. Draw a ball of size 15×15 (you can choose the color as you like).

3. Convert it into a movie clip (registration point in the center).

4. Linkage the 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!

  • Digg
  • Sphinn
  • del.icio.us
  • Mixx

Related tutorials:

  1. Creating a Chain Explosion
  2. Creating a Shake Effect
  3. Snowfall Effect
  4. Advanced Animation with Drawing API
  5. Creating Random Lines with Animation



Filed under: ActionScript 3 Advanced
Tags:

Comments

4 Responses to “Creating Fireworks with ActionScript 3”
  1. John says:

    I’m having the same problem.
    1120: Access of undefined property OxFFFFFF. for ct.setTint(OxFFFFFF * Math.random(),1);

    and

    1180: Call to a possibly undefined method ParticlesArray. for var particle:Particle = ParticlesArray(i);

    Log in to Reply
  2. smonte says:

    Well have you done the following step.

    4. Linkage the movie clip to a class called “Particle”.

    Regards,
    smonte

    Log in to Reply
  3. bloo says:

    hey, i tried the tutorial and am debugging now, i keep getting an error related to the line
    var particle:Particle = new Particle();
    it says that the type is not a compile time constant.
    i fixed this error before by placing import Firework and import Explosion, but there no particle class to import…

    Log in to Reply

Leave a Reply

You must be logged in to post a comment.