Home > Designing, Webmasters Resources > Create Fireworks in Flash

Create Fireworks in Flash

This article was submitted by Enric Godes, project manager at Vasava, a design studio. Godes and Vasava were commissioned by Adobe Software to create this tutorial.

Today we’re going to develop a virtual fireworks display in Flash.

To follow along, you’ll need:

How to Proceed

Step 1: Change the Flash movie to 800×600 and 65 fps.


Step 2: Draw a 4 px circle and transform it on symbol by pushing F8.

Step 3: Edit the MovieClip and animate it from left to right on a straight line. These are the sparks eminating from the center of the individual fireworks.

We used a shape interpolation for this. Later, you can also try varying animation types and change the timing to create different results. Insert a stop on the last frame.


Step 4: Find the MovieClip on the library and right click to open the properties window on the class field and change it to “Particle"


Step 5: Make a new symbol and put it on the scene. On the properties window, change it to "nightSky." This is where we will put the fireworks.

Step 6: And now the coding. First, import the classes we are going to use

import caurina.transitions.Tweener;
import flash.events.*;

Step 7: Next, define the movie vars.

var fwParticlesCount:uint=200; // particles in each explosion
var fwTimer:uint=2000; // time between explosions
var timer:Timer = new Timer(fwTimer);
// this adds a timer, in each step of the timer it will call fire() function
timer.addEventListener(TimerEvent.TIMER, fire);

Step 8: We want to use a lot of random numbers, so we created the following function to save some time.

function randRange(min:Number, max:Number):Number {var randomNum:Number = Math.random() * (max – min + 1) + min;    return randomNum;}

Step 9: And now the main function, which is putting the particles in a circle, animating them and setting their opacity and position.

function fire(event:TimerEvent){

    // the origin coordinate for the firework
    var x0:uint=randRange(100,700);
    var y0:uint=randRange(100,500);
    // now i’m going to create and define the properties of each particle in the firework
    for(var i:uint=0;i<fw Particles Count;i++){
           var tempParticle:Particle=new Particle();
           //add to the stage
           //the particle is going to start with the animation you prepared on the Movie Clip
           //then with a little delay the Tweener animates the y an opacity,
           //onComplete remove the mc from stage and deletes the particle
    Tweener.addTween(tempParticle,{y:y0+200+randRange(50,50),alpha:0,delay:1,time:2,transition:"easeInSine",onComplete:function(){nightSky.remove Child(this);delete this}});


That’s all you need to do. Now just sit back and enjoy the show!

  Enric Godes is a project manager at Vasava. Started in Barcelona in 1997, Vasava is a   communication studio with 18 young designers who specialize in cross-media projects: print, web, motion, 3D animation, and video. To unleash creativity and meet the deadline-driven demands of clients, Vasava relies on the integrated, cross-discipline tools found in Adobe Creative Suite Master Collection software.

  1. No comments yet.
  1. No trackbacks yet.
You must be logged in to post a comment.