What do "fantastic," "fabulous," and "fun" have in common? All three of these words describe the creative work you can do with Flash, Fireworks, and FreeHand. The Macromedia MX2004 Studio "Fab Three" together give you the tools to create art and animations for the web and other media. Combine these with Dreamweaver and you have a dynamic set of tools.

Did you know that all three - Flash, Fireworks, and FreeHand - can create animations? Of course, Flash is the most well known and the most powerful tool for web animations. Fireworks and FreeHand can create the graphics for simple animations to use in Flash and export in the SWF format. Fireworks is quite unique because it can create graphics, open and import vector art from FreeHand, create animated GIFs, and open animated GIFs created in other applications for enhancing.

Why would you want to create an animated GIF when it is an old technology dating back to the late 1980s? Answer: because an animated GIF might just be the perfect solution to fit a particular client's needs.

What is an animated GIF and what are the advantages or disadvantages? An animated GIF contains multiple images encoded in one single file. The advantages are: browser support without any additional plug-in or players, transparency, and a good choice for very simple animations. Some of the disadvantages are: 256 colors, a large file size, and that an animated GIF is limited to simple animations.

Why would you choose Fireworks to create your animated GIF? Fireworks' ability to create artwork, superior GIF optimization, and the use of layers and frames allow you to make a simple animation with a minimum number of steps. Add, to this, the compatibility with the vector illustration power of FreeHand and you have a winning combination.

What are the general steps to create an animated GIF with Fireworks and FreeHand?

• Create the artwork in FreeHand, Fireworks, or a combination of both.
• Use the features in both products that distribute objects to layers and frames.
• Set the frame rate and how many times the animation will play.
• Optimize to reduce file size.
• Export as an animated GIF.

Animated GIF Example
What is a specific example of an animated GIF and what are a few of the important steps to make one? The example for this article is a simple animation to promote a fictitious Flower and Garden show on a web site.

The animation is on the first page of the promotion and on each subsequent web page there would be a still graphic with one of the floral images. The animation will be a simple stylized flower with the petals dropping off one by one to reveal theme-related pictures with a hand-painted look (see Figures 1 and 2). The purpose of the example presented in this article is to serve as a starting point and to help generate ideas that you can use to create one of your own GIF animations. It is only one method to create the animation. There are many different ways of achieving the same end result.

Artwork in FreeHand
FreeHand is used in the example to develop the artwork to take advantage of the power duplicating feature to create the flower, to use the color tracing feature to create the hand-painted look for the photographs, to attach text to a spiral path, to use the release to layers to separate each object on a layer, and the compatibility with Fireworks. Note: You can also use Fireworks to create the artwork and use the distribute layers to frames feature.

1. In the FreeHand document set the unit of measurement to pixels and set the document size to custom. Type in the pixel size width and height for your animation. For example 200 x 200.
2. Create one petal shape using the Pen tool or modify a circle. Add a small circle to use as the center of rotation for the flower petals.
3. Rotate the petal shape as necessary and place in position close to the circle. For this example, you will want to place the first petal where you want the animation to begin. Place the petal at the top for the animation to start at the top and go in a clockwise direction (see Figure 3).
4. Choose Edit > Clone to make an exact copy of the petal on top of the existing one.
5. Be sure the clone is selected. Select the Rotate tool from the Toolbox. Click the center of the circle to establish the center of rotation. Press Alt + Shift and drag the mouse to make a rotated copy constrained to and an angle of 45 degrees (see Figure 4).
6. Choose Edit > Duplicate or use the keyboard shortcut. Repeat the duplicate command as many times as necessary to complete the petals around the circle.
7. Delete the center circle used for the center of rotation. Choose Window > Toolbar > Xtra Tools and select the Spiral Tool. Make a spiral in the center of the petals.
8. Using the Type tool, type a block of text and attach it to the path.
9. View the completed steps (see Figure 5).
10. Save two copies of the file using Save As and a different file name.

One of the files is used for the animation so that the flower petals one by one disappear. The other file is used for the image you see when the flower petal drops off. You will want these two files to be an exact duplicate as the bottom one with the images will be opened in Fireworks and shared across layers. The top one will be imported into the same Fireworks file converting the layers to frames and will be positioned exactly on top of the other one for the animation.

Prepare the FreeHand Art for Animation

1. In one of the two saved FreeHand files, delete the center as it will not be animated.
2. Select all the petals and use the Fill Bucket on the Toolbox to fill them with a Hexadecimal color of your choice. The example uses FFFF00.
3. Select all the petals and group them. It is important to group the objects in order to release them to layers.
4. Deselect the group as you will need to add a duplicate layer.

   In this example, the petals will all be visible before the animation starts. If you do not make an extra duplicate layer, FreeHand will drop the first object on the first layer. This would show your GIF with one petal missing before the animation starts.

    

5. In the Layers Panel select Duplicate.
6. Be sure you are on the duplicate layer and select the grouped petals.
7. Choose Xtras > Animate > Release to Layers. Select Drop from the pop-up menuand check Use Existing Layers.

The Drop selection for the example animation copies the objects to one layer except for one petal and continues to add as many layers as needed. In the example there will be eight layers one for each of the dropped petals and the duplicate with all the petals for a total of nine layers excluding the Guides and Background layers(see Figure 6).

Although you are going to Fireworks to make this an animated Gif, you can test the animation using the SWF test movie feature in FreeHand (Window > Movie > Test) to see if the animation is working as expected. If not, correct any steps before going to Fireworks.

Prepare the FreeHand Art for the Base

1. Open the other saved FreeHand file. This is the one with the text spiraled in the center.
2. Import each prepared photograph that is already sized to be slightly larger than the flower petal.
3. Place the photograph on an area of the pasteboard (blank area outside the borders of the document). Previously to import the photograph at its original size.
4. Double-click the Trace tool and use settings that will be appropriate for the final GIF art from Fireworks. For example 256 colors, RGB, High resolution, and Tight trace conformity.
5. Using the Trace tool, draw a rectangular marquee around the photograph and without deselecting, immediately group the traced image. This is very important as the new image contains numerous separate vector paths.
6. To decrease the number of vector paths, choose Modify > Alter Path > Simplify and type a number or use the slider. The number 2 is used for the example.
7. Move the traced art and place on top of one of the petals. Choose Modify > Arrange > Bring to Front to make sure the photo art is at the top of the stacking order (see Figure 7).
8. Cut the image.
9. Select the flower petal and choose Edit > Paste contents.

   This creates a clipping path. To reposition the picture inside the petal, select the petal and in the Object properties select Contents located below Clipping path. Use the pointer tool and move the paste contents handle to reposition the picture.

10. Repeat for all the flower petals and delete the original photographs from the pasteboard area (see Figure 8).

Fireworks
Open the FreeHand File

1. Launch Fireworks and open the file with the floral images (see Figure 8). In the sample figure the canvas is set to white for illustration purposes only.
2. Leave all the default settings in the Vector File Options. Be sure that Remember Layers is selected in the second pop-up menu under File conversion.
3. In the Layers, panel collapse the Foreground layer which contains the objects from FreeHand.
4. Double-click the layer name and check Share across frames.

This will allow the flower with the art images to be on every frame and visible when a petal is dropped (see Figure 9).

Import the Second FreeHand File

1. Choose File > Import and locate the FreeHand file with the animation.
2. In the Vector File Options window, select convert layers to frames in the second pop-up menu under File conversions. Click the Fireworks canvas in the upper left corner.
3. Open the Frames panel. Set the number of loop times from the Looping pop-up menu at the bottom of the Frames panel.

   If you only want the animation to play once and you want it to end showing all the yellow petals, duplicate frame one and select at the end position.

4. Double-click the column containing the frame rates and set the desired rates (see Figure 10).

   You can Shift select the Frames to apply a new rate to all the selected frames at once. You can also set the looping and frame rates in the export preview window.

5. Open the Optimize panel. It is extremely important to select the Animated GIF option in this panel even though you might not change any optimization settings. Setting the format here gives you the multimage GIF in one file when you export (see Figure 11).
6. Click the 2 up or 4 up tab in the Fireworks window to preview your different optimization settings to create a smaller file size.

   For further information on optimization, please refer to a previous article by Joyce Evans, "Fireworks Image Optimization Basics" (MXDJ vol. 2 issue 10).

7. Choose File > Export and you can either export only the animated GIF or you can export the image and the HTML page from Fireworks.
8. Test the animation in the browser.

The completed animation is now ready and you have another solution to fit a particular client's needs. It is fantastic, fabulous, and fun to turn your creative ideas into animations with the "Fab Three": Fireworks, FreeHand, and Flash.

• Figure 1
• Figure 10
• Figure 11
• Figure 2
• Figure 3
• Figure 4
• Figure 5
• Figure 6
• Figure 7
• Figure 8
• Figure 9