pages (2): 1 [2]

Step 8: Select the Brush Tool and use it to individually draw the fireworks. Your stroke selection won’t matter because the Brush Tool draws fills without line strokes. Use a small brush, and leave it set to the default circular shape. Leave the Brush mode to 'Paint Normal'. If you use a pressure-sensitive graphics tablet there is a small flourish to the right of the Brush mode that will allow you to choose Use Pressure button. Just as a note, Flash tends to make brush lines kind of jittery, so you may want to do without the pressure-sensitive selection.

Step 9: Open the Color Mixer, select Radial, click marker #1 and select a red/ Now click the last marker and select a golden-orange, then click just below the gradient line to create a stop about half-way between the first and last stop. Select a violet color. You have just set a three-color radial gradient fill for your first fireworks burst. There is no one way to draw the fireworks bursts. so experiment until you develop a method you think is the most attractive. The ones I have drawn are a series of overlapping, downward-cascading arcs - the gradient is applied to each of the arcs individually... not as a group. This gives the burst a more realistic appearance.

Go ahead and create your burst with the brush. Later we will want to convert our burst to a symbol BUT NOT NOW - For the time being, leave them as individual shapes. Select the Arrow tool, select your fireworks and then select Edit > Copy (Ctrl+C). This will copy the entire set of arcs. LOCK THIS LAYER. Create a New Layer, paste the shapes onto the new layer using Edit > Paste or Ctrl+V. Rename this layer Fireworks2. Why are we pasting this onto a separate layer? Fireworks are not all the same color and we will want to change the color of the fill. So, be sure to keep this layer unlocked for now.

Step 10: You should now be on the Fireworks2 layer with the burst still selected. We will change the swatch colors in the Color Mixer panel and the changes will be reflected on this layer. How about #33cc00, #00ccff, and #ffff33? Make a few more copies and change the colors - You could even make some different shape bursts if you desire. We now have the basic scene set. Save this file so that you can work on it again.

Step 11: We are ready to convert one of our fireworks bursts to a symbol. But this will be different from the ones we have created previously.

Select the Arrow tool and use it to select all fireworks bursts on a layer. Just as a reminder, ALL layers except the one you are working on should be locked.

Go to Insert > Convert to Symbol (F8). Now when the dialog open we will select Movie Clip as the type, name the symbol (I named mine Fireworks1), and click OK. Did you notice something different with this symbol? The shape now has a blue outline. This marks it as a symbol and you will no longer be able to edit the individual pieces.

We have to get inside the fireworks symbol to animate it. We can do that by right-clicking on the fireworks and selecting Edit. Your screen will change and you should have a blank stage. The area above your stage is now titled Scene1 and Fireworks1. This lets you know that you are one level deeper and you are now on the stage for your symbol only.

Step 12: The timeline should have only one layer. On the timeline, select the keyframe in frame 1, right-click, and select “copy frame”. Go to frame 12, right-click, and select “paste frame”. Paste the keyframe again on frame 13. This makes it easier to do the second half of our shape tween.

Go back to frame 1. Click on the frame, use the Arrow tool and select all of the shapes/fills on the stage.
 

Use the Free Transform Tool and scale the fireworks in the first frame down until it is almost invisible. Select frames 1-12, go to the Properties panel, select Tween > Shape from the dropdown.

Go to frame 1, copy the frame. Go to frame 24, paste the frame. Repeat this process and select frames 13-24, DO NOT SELECT FRAME 12. Apply a shape tween as before.

Save your work. Click on the blue arrow in the upper left hand corner of the stage and you will return to the main working area.

Step 13: We need to extend the length of the animation. So go to each layer, copy the first frame and then paste it in frame 48.

Step 14: After this simple step you need to animate the opacity of the fireworks burst, so that it will fade in and out as it grows and shrinks at the same time. To do this we will want to extend the timeline on the first fireworks layer, copy frame 1 to frame 24, and copy it to frames 12 and 13.

Step 15: Go back to frame 1 and select the symbol for the fireworks burst. Since the burst is so small the easiest thing to do is to make certain that all layers EXCEPT the active layer are on is locked, and then drag your arrow tool across the entire canvas. With the symbol selected look at the Properties tab. There is a dropdown menu called “Color” and by default it should show “None”. Select “Alpha”, before doing this make certain that you are in frame 1. A percentage slider should now be visible. Move the slider to 0%.

Step 16: Go to frame 24, on Properties tab select Color > Alpha, 0%. Do the same thing for frames 12 and 13 BUT NOW set the sliders back to 100%. Right-click between frames 1 and 12 and choose “Create Motion Tween”. Do the same for frames 13 to 24.

Step 17: Copy the entire set of 24 frames, and paste in the same layer  after the first to extend it to fill all 48 frames. Now go back and take care of the other fireworks symbols that you made. Experiment with them, making some of them with quicker bursts, some starting a few frames later than the original, etc. You don’t want them to all explode at the same time!

As a final touch, go to the Properties tab and, in the Color dropdown menu, find a section called “Advanced”. Using this you can adjust the color of the bursts without your having to make a whole set of new symbols. Just play and see what happens!

And there we go!  One scene with repeating fireworks!   This is a basic approach to a simple animation, but it works every time and by following the tutorial to this point you will have learned a great deal about scene construction in Flash.   Keep practicing and even try making your own scenes... then progress onto more intermediate tutorials.

view all