Web Design II: Dreamweaver and Fireworks

Lesson 2: Using Frames in Fireworks to create a simple animation and export as a GIF image

In this lesson we learn how to create simple animations similar to what is possible using more advanced tools like Flash. Fireworks can export in a variety of formats. In this lesson we will export in a simple format called Graphics Interchange Format (GIF). GIF was the first image format to be used on the web 15 years ago.

We begin by launching Fireworks.

Create a new document that is 400 pixels wide and 300 pixels high.

From the Edit menu, select Insert >> New Symbol (Note: to insert a new symbol you may also hit the Control-F8 keys or select New Symbol from the Assets window menu):

A Symbol Properties dialog box appears. Enter the word "Box" into the Name text area, be sure to select the Animation radio button, and click OK:

The Fireworks file changes the existing document window into a 'sub-window' for editing our new symbol. Notice the new informatio in the upper left corner of the document window:

This means we are only editing our symbol and not the entire document.

Next, we will draw a rectangle in the center of our new symbol. Select the Rectangle tool from the Tools Palette and click and drag to create a rectangle that is approximately centered in the window.

When you are happy with your rectangle, click 'Done' in the upper left corner of the window.

Choose the Selection arrow from the Tools Palette and click and drag your new symbol to the lower left corner of your document. Locate the Library window in the panel on the right. If you do not see it, choose Library from the Windows menu, or hit the F11 key. Notice there is a new symbol in your document Library called 'Box'. You should be able to see a small thumbnail image of the symbol at the top of the Library window

Click and drag this thumbnail image to the upper right corner of your document window. You will be creating a second instance of your Box. The first instance is the symbol in the lower left corner.

Next, select one or the other instance of Box, then shift-click the second instance to have both instances selected at the same time (note: you may also choose Select All from the Selection menu, or simply hit the Control-A keys, or click and drag a rectangle around both instances at once).

Right-click one of the instances and choose Symbol >> Tween Instances (or hit the Control-Alt-Shift-T keys). A dialog box appears:

Enter 10 into the Steps text area and be sure that you check "Distribute to frames", then click OK. Open your Frames window in the panel on the right (or hit Shift-F2). Notice you now have a total of 12 Frames.

Play your new animation by clicking the white play button along the bottom of your document window. Save your file as box.png and export it as a GIF animation. It should look something like this:

See a slightly more advanced animation created using Fireworks.

That's it. Now let's get creative!!