RIAEYE

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:

• Tweener caurina Stable version 1.33.74, ActionScript 3 (Flash 9+) library. This library can be downloaded from Google Code: http://code.google.com/p/tweener/downloads/list

• Adobe Flash CS4 Professional.

• Also, you can grab the finished project to check your work (SWF download)

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);
timer.start();

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<fwParticlesCount;i++){
           var tempParticle:Particle=new Particle();
           tempParticle.x=x0;
           tempParticle.y=y0;
           tempParticle.rotation=randRange(0,360)

           tempParticle.scaleX=tempParticle.scaleY=randRange(.3,1)

           //add to the stage
           nightSky.addChild(tempParticle)

           //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.removeChild(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.