In this tutorial we'll show you how to animate an awesome explosion in Flash, which you could use for an cartoony action game. We take you from conception to completion, then show you how to export it as well as how to import it into other scenes.

Final Result Preview

Let's take a look at the final result we will be working towards:

Step 1: Choose the Type of Explosion You Would Like

Decide what kind of explosion would be best fitting for your scene. Is it a small explosion? A nuke? A 60's Batman-esque, flashy, "WHAM"? In this case we will be doing a smaller explosion, but with experience you could do anything you want.

Step 2: Look for References

Once you know what you want to animate look for reference. The Internet is amazing for this because you can just search for movie clips related to what you'd like to do and carefully study them.

Step 3: Begin to Draw

Once you are ready grab a few pieces of paper and begin to draw your explosion. Animation is planned through keyframes, which are generally the most extreme parts of the animation which tell the rough story of how something is going to move. In this case, the first thing that you should be thinking about is the initial flash of light.

Step 4: Draw All the Keyframes

Next, draw the keys explaining how the smoke and light comes out of the bomb. You will at the very least want one where the smoke is first coming out of the light, then one when the smoke is at its largest and most extreme, and then a frame at the end. Here are our keyframe drawings, which illustrate this process:

Step 5: Draw All the In-Betweens

Draw the in-betweens for these frames. Basically, you are now drawing all of the frames which fit in the middle of these keyframes. We will include our sketches here for reference.

Step 6: Scan Your Drawings

At this point we scan all of our drawings so that we can trace them in Flash.

Step 7: Change the Basic Flash Settings

Open Flash and change your settings to whatever would be the best fit for your current scene. You can see all of your basic settings in the properties panel on the right hand side of the screenshot. In our case, we will be working at 550x500px and 24 frames per second, with a white background.

Step 8: Import Your Drawings

Next you should import all of your line drawings into Flash Pro's Library. The Library is basically a place where all of the files that you are using in your animation are stored for safe-keeping. You can do this by going to File > Import > Import to Stage, then selecting all of your drawings and hitting Open.

After this they will appear all on the same keyframe, but if you select them all, right-click and hit "Distribute to Layers," they will appear as seperate layers, all on the same keyframe. Then you can simply drag and drop individual keys into the right positions, either on their own layers on all on one layer, whichever you'd prefer.

Step 9: Draw Your Initial Lines

Add a new layer to your timeline, then begin to draw over your old lines using the Line tool. We generally do not bother using the brush tool because you end up with too many nodes on the lines which can make things extremely difficult to change in any way later. What you will basically need to do is draw lines using the line tool, then use the selection tool to manipulate the curve between the two points. (More Flash drawing tips are available here.)

Step 10: Convert Lines to Fills

Once the frame has been entirely traced with the line tool we select all of the lines, then go to Modify > Shape > Convert Lines to Fills. Occasionally there will be glitches where bits of the line disappear. If this happens then start off by selecting smaller chunks of the image, then eventually doing the whole graphic together. Once you do this you can then edit the line depth using the selection tool and clicking and dragging on the edges of lines.

Step 11: Color Your Drawings

Color in the lines using the paint bucket tool.

Step 12: Finish All of the Frames of Animation

Repeat Steps 9-11 until all of the frames are finished.

Step 13: Organize Your Animation

Select everything on a frame, hit F8 and turn it into a Symbol. Properly name it and it will appear in your library to be used and re-used at any time. Organization is really important while you're animating. Things can get confusing fast if you don't name and sort everything properly so please do so. You can even create folders in the library.

Step 14: Onion Skinning

One important tool which can really help you animate is the Onion Skin tool. With Onion Skinning you can easily view the frames closest to the one that you are editing so that you can tell right away if a piece of animation is going to work as planned or not. The Onion Skin button is located at the bottom of your timeline.

Step 15: Preview the Animation

To preview your full animation at any time, go to Control > Test Movie > Test. It will preload your whole animation and then show you exactly how it will look once exported.

Step 16: Export the Movie

When you're ready to export just go to File > Export > Export Movie. Name it whatever you'd like, pick .swf from the drop down menu, and then hit save. Depending on the size of your animation you may have to wait a short while.

Step 17: Export as a GIF

Exporting .gif images is nearly the same. When you hit File > Export > Export Movie just pick .gif instead of .swf from the drop-down menu.

Step 18: Import your Animation into an Existing Scene

To import an explosion into an already exisitng scene, first open both scenes. Then, select all of the frames of the explosion animation on the timeline, copy all of the frames, and then hit Ctrl + F8. A dialogue will appear. Name the explosion, then save it as a Graphic. Hit OK. A blank screen should appear with no animation on it. Then click on the first frame of the new timeline and paste all of your frames. After this hit the "Scene 1" button under the timeline but above the animation window to go back to your original timeline. Once you do this your animation should be in the Library. Select your animation in the library, right click and copy it. You will then be able to paste it into the library of any other FLA that you have open.

Step 19: Create a Movie Clip

Making movie clips is almost the same as what we described in the previous step. To create a movie clip, follow the instructions from the last step exactly, but pick "Movie Clip," instead of "Graphic," when you reach the dialogue after hitting Ctrl + F8. The difference between a Graphic and a Movie Clip is that the Movie Clip can be uniquely identified using ActionScript, which is the coding language that Flash uses to make games and interactive media. When the movie is compiled a copy is created from the library and transformed for the animation. The copy can be blurred, scaled, etc., during runtime, without having to create separate animations at design time, thus cutting down on the amount of computer memory needed and keeping the SWF file size small.

Step 20: Create a Sprite Sheet

To create a sprite sheet of your animation, first hit File > Export > Export Movie and select PNG sequence to create a set of PNG graphics, one for each frame. After they are created you can use any image editing software (such as Photoshop) to import them as a batch and then copy/paste them all into one larger image file.

Alternatively, you could make your Flash scene larger, make each frame of animation appear at once, and then move the individual images into place before exporting a single image.

Click to enlarge.

A third option is to use Keith Peters's tool, SWFSheet.

We hope you enjoyed this tutorial! If you make an explosion with it, please share it in the comments :)