Our
previous Night Lights tutorial
created a pretty basic scene that used graphics to depict the individual fireworks.
This approach works, but far more spectacular results are obtainable using a combination of
both animation and ActionScript programming. There are a lot of steps, but none
of them are difficult.
Let’s start by opening the file that we created at the end of the
original Night Lights tutorial. If you have not completed
that tutorial, just download the completed source file from
here, and open it up in Flash.
Our previous graphics-based scene.
Creating Our Beam Step 1: Delete the fireworks, fireworks2, fireworks3
layers from your document. In my example I created three fireworks layers,
but if you forged on yourself and made more, then delete these too, as we won’t need them.
Step
2: Choose
Insert > New Symbol from the main menu (Ctrl+F8), select a 'movie clip'
behaviour, name it myBeam,
and click OK. You should no longer be working on the main timeline but
in a totally separate area just with your new symbol. Change the
zoom factor to 800% and create a small black
circle (approximately 7 pixels across) with no stroke (just fill) on the
registration point. Use the horizontal scrollbar to scroll to the
registration point and adjust it so it is to the left side of your screen.
Select the circle and choose Insert > Convert to Symbol (F8). Name it
Dot.
The Behavior type should be Movie Clip. Click OK.
Step 3: Insert a keyframe (F6) in Frame 4. Click Frame 4 and move Dot about 6
pixels to the right. Select Frames 1 through 4 and choose Motion from the
Tween drop-down list of the Property Inspector (Window > Properties).
Step 4: Insert a keyframe in Frame 5. Delete Dot. In its place, draw a rectangle
with a fill only, about 16 pixels wide and 2 pixels high. Choose
Insert > Convert to Symbol and name it Ray. Set the Behavior type
to Movie Clip,
and click OK.
Step 5: Insert a keyframe in Frame 12. Click Frame 12 and move Ray almost to the
right side of the screen (at 800% zoom). Use the Free Transform Tool to make
the rectangle narrower, about 9 pixels. Select Frames 5 through 12 and click
Motion from the Tween drop-down list of the Property inspector.
Step 6: Insert a keyframe in Frame 13, move Ray 15 pixels right and make it 4
pixels narrower. Insert keyframe in Frame 14, move Ray 30 pixels right and
make it 2 pixels narrower. You should now be at about the middle of your
screen. Don’t worry if you aren’t at the middle, this is just an
approximation.
Step 7: Insert a keyframe at Frame 15. Delete the rectangle and in its place
draw a “sparkle”. To draw a “sparkle” create two rectangles, no stroke, any color. We will
align these rectangles at 45 degree angles to each other choosing
Modify > Transform > Scale and Rotate. Select one rectangle and rotate 45
degrees, select the second rectangle and rotate -45 degrees. Now place one
on top of the other and choose Insert > Convert to Symbol and call it
Sparkle.
The behavior type is Movie Clip. Click OK.
Step 8: Insert a keyframe at Frame 50. Click Frame 50 and move “Sparkle”
horizontally to the right side of your screen. Select the frames and from
the Property inspector choose Motion Tween. Click Scene 1 at the
bottom of the timeline to return to the main Timeline.
Adding ActionScript
ActionScript will control the colors, beam length, and overall size of the
firework. It will also make the fireworks twinkle and fade out.
Step 9: Choose Insert > New Symbol. Make it a movie clip, name it
firework, and
click OK. From the Library (Window > Library), drag in an instance of
myBeam. In the
Property inspector, type myBeam1 in the Instance Name text box.
Step 10: Open your Actions panel (F9). On the right hand side of the panel is a
blue arrow that appears to be on top of a sheet of paper. Click and make
certain you have selected Expert Mode for your viewing choice. Now insert a
layer named actions in the timeline. Add a keyframe in Frames 2 and 3. In the
first keyframe, type or paste in the following ActionScript. You can find
a copy of this in Frame 1 of the firework symbol of the
source .fla
I have provided:
//This action script duplicates the symbol instance myBeam1
//and rotates it to appear as the firework. It randomizes the
//overall size of the firework, as well as the individual beam
//lengths. It also randomizes the color of each firework.
//Initialize variables
i=0;
//Cf is the variable that counts the frame and aids in setting
//the alpha value so that the fireworks twinkle.
cf=0;
//Number of beams regulates the fullness of each firework.
numberOfBeams=40;
// Random sizes are set for a single firework on the screen
myScale = 20 + Random(80);
//Make the instance, myBeam1, visible. This is necessary because
//myBeam1 gets set to invisible below.
setProperty("myBeam1",_visible,true);
// A maximum random sizes is set for the next firework on the screen
// The following lines create the firework from a single beam
// and give each beam a random length which does not excede the maximum size
// set by the variable xyscalevar above
do {
duplicateMovieClip("myBeam1","beam" add i,i);
setProperty("beam" + i,_rotation,random(360));
setProperty("beam" + i,_xscale,myScale+random(myScale));
setProperty("beam" + i,_yscale,myScale+random(myScale));
i = Number(i) + 1;
}
while (Number(i)<=numberOfBeams
)
//Make the instance, myBeam1, invisible. This is necessary
//because myBeam1 was never resized for this particular
//firework and it would look odd if it were visible.
setProperty("myBeam1",_visible,false);
Step 11: In Frame 2, type or paste in the following ActionScript. It is
also located
in Frame 2 of the firework symbol of my source .FLA:
//This action script assigns the alpha value so that the
//fireworks twinkle. It counts the frames and assigns
//new alpha values depending on which frame the movie is in.
//Some beams do not twinkle at all.
//increment the frame counter.
cf=cf+2;
//When the frame counter = 80, start a new firework.
if(cf>=80) {gotoAndPlay(1);}
//Set the new alphas for the twinkle. Don't twinkle until after
//the tenth frame.
//Gradually fade the firework out in the last twenty frames.
//Initialize ii.
ii=0;
if (cf>=61) {
myAlpha=100-((cf-61)*4);
do {
if(getProperty("beam"+ii,_alpha)>=myAlpha) {
setProperty("beam" + ii,_alpha,myAlpha);
}
ii = Number(ii) + 1;
}
while (Number(ii)<=numberOfBeams
)
}
Step 12: In Frame 3, type or paste in the following ActionScript.
It is located
in Frame 3 of the firework symbol.
gotoAndPlay(2);
Positioning the Fireworks Step 13: Click Scene 1 to return to the main timeline. Insert a new layer and
call it actions. Add one more layer and name it fireworks.
Step 14: Before going any further, let’s adjust our layer order. The 1st layer is
fireworks; 2nd is windows; 3rd silhouettes; 4th moon; 5th
stars; 6th
background; and 7th actions. On the fireworks layer, click Frame 1. Drag in an instance of
firework
from the Library onto the stage.
Step 15: We now want to place keyframes in the timeline for every burst of fireworks
that we want in our animation. Insert keyframes in Frames 8, 14, 24, and 36
(the exact frame numbers are not important). Click each keyframe and drag in
an instance of firework to a different location on the Stage. On the actions layer, insert a keyframe in Frame 38 (the same last frame
number of the fireworks layer). Type or paste in the following ActionScript:
gotoAndPlay(37);
Step 16: Choose Edit > Document. Change the frame rate to 24 frames per second.
And there we go! One scene with more advanced fireworks!
This is a simple scene, and as such can be easily understood and
manipulated. Keep practicing and playing with the actionscript to
learn how it works. Its completely logical, although its depth can be
as confounding as any other programming language. That said, you have
made your first footsteps into more advanced subjects. Well done!
Step
2: Choose
Insert > New Symbol from the main menu (Ctrl+F8), select a 'movie clip'
behaviour, name it myBeam,
and click OK. You should no longer be working on the main timeline but
in a totally separate area just with your new symbol. Change the
zoom factor to 800% and create a small black
circle (approximately 7 pixels across) with no stroke (just fill) on the
registration point. Use the horizontal scrollbar to scroll to the
registration point and adjust it so it is to the left side of your screen.
