Sky’s the Limit: Vasava Shows the Possibilities with Flash CS4 (Part 1 of 3)

NOTE: This is one of three articles commissioned by Adobe and written by separate design agencies to demonstrate the variety of techniques available in Flash CS4 Professional. In these examples, three techniques are shown for creating realistic fireworks effects; all require intermediate to advanced ActionScript 3 skills. Enjoy! —Jeremy Schultz

Introduction by Kristan Jiles, Senior Product Marketing Manager, Adobe Systems Incorporated

Three design agencies that are given an identical initial directive, using the same tool, will return with very different project results. The creative process is essential in determining the end result; it’s how professionals use their tools to bring their work to life. We asked design agencies AgencyNet, AKQA and Vasava to develop a tutorial on how to create a fireworks display using Adobe Flash CS4 Professional to demonstrate how the same tool used to design the same project can yield such unique and differing results. At Adobe, we’re inspired by seeing how each creative uses their knowledge of the product to create amazing and fun projects that can be shared with others. Flash was developed to provide a variety of design and development options for any project and this is only one example. With animation, 3D transformation, rich drawing capabilities, and ActionScript development, we encourage designers and developers to continue experimenting with Flash to produce amazing work!

Tutorial by Enric Godes, project manager, Vasava

To develop the fireworks we used the Tweener caurina Stable version 1.33.74, ActionScript 3 (Flash 9+) library. This library can be downloaded from http://code.google.com/p/tweener/downloads/list. And, of course, we used Adobe Flash CS4 Professional.

1. Change the flash movie to 800×600 and 65 FPS (see below).

vasava-image-1

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

3. Edit the MovieClip and animate it from left to right on a straight line: These are the sprinkles going away from the center of the firework. We used a shape interpolation; later you can try some different animation types and change the timing to see new results. Insert a stop on the last frame (see below).

vasava-image-3

4. Find the MovieClip on the library and use the right button to open the properties window on the class field and change it to “Particle.” (See below).

vasava-image-4

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.

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

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

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();

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;
}

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 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}});}
}

See the final result!

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.