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:
- 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.
