FYI: More like a miniature filmstrip than a movie, animated GIFs can create the illusion of movement or perform other animation tricks such as having different objects fade in or out of an image. Animated GIFs are the most common files in use on the Web where the illusion of movement is needed, because of one factor—they are widely supported by all common browsers without the need for a plug-in.

Let us start by opening a new document. You can make the file size 400 by 400. The background color can be any of your choice. Open the Frames panel by choosing "Windows" and then select "Frames". As you can see, your new file has exactly one frame, called Frame 1, in the Frames panel. To create an animation, the first step is to add frames to the file. To do this, click the expansion arrow and choose the option to Add Frames, which will open the Add Frames dialog box. Add four frames to the file after the current frame and click OK.

The Frames panel now contains five frames, and the process of creating your first animation can begin. Select Frame 1 by clicking its name in the Frames panel, and draw a simple vector object on your canvas in the upper-left corner, as you see here. With the shape selected, Copy or press Ctrl+C to copy the image. Complete this process by copying the same shape into Frames 2 through 5 as well, dropping each shape a little lower on your canvas.

Once you have a object in each frame, you can use a nice feature that Fireworks provides for positioning the different objects. Onion Skinning will create semitransparent versions of each object in the animation sequence and allow you to position or modify them as you wish. To turn on Onion Skinning, locate the button in the bottom of the Frames panel, click it, and select the option Show All Frames from the menu that appears. Once Onion Skinning is enabled, your image will appear as you see here, with the object on the selected frame at full opacity, and the objects on the other frames shown semitransparently.

Besides its use as a layout tool, Onion Skinning also allows you to work on multiple frames at once. Try this by selecting Multi-Frame editing from the Onion skin options and then using the pointer to move the circles into different positions on the canvas. Notice that when you work in a frame other than the one that is selected, a small blue square appears next to the name of the frame.

To see your animation in action, use the Play/Stop button at the bottom of the Document window. Just like the buttons on a VCR or CD player, you can play or stop a preview of your animation by using these controls. As each frame plays in sequence, the object appears to move on the canvas, and your first animation is complete.

Use the 2-Up preview panel to check the file size of this simple animation and to see a preview of how it will look in the animated GIF format.

To save the file and allow to use in Dreamweaver, refer to Christine Russell's page or the previous Fireworks tutorial.