How to Make an Animated .Gif With Fireworks

Fly a kite on your site!

Fireworks is an Adobe application used for images. Fireworks has the capabilities to create animations and Flash files that are useful for web design or MySpace pages. Create a homemade animated gif and upload it to your MySpace page, send it in an email or use it to brand your website. Learn how to make an animated .gif with Fireworks and create a personal design suited to your style.

Difficulty:

Moderately Easy

Instructions

Things You'll Need

• Fireworks software

1. Choosing an image

   Create a desktop folder. Find an image to animate and drag it to the folder. Launch the Fireworks application and choose to open the file in the menu panel under file and open in the drop-down menu. You may choose any type of image you desire. For this example, I am going to use a moose.

2. Using layers and frames

   After you have opened the image, the Fireworks application will display windows for properties or you can choose to display them under the menu panel windows. Choose Layers and Frames. A window will open displaying the options available for the layers and frames. Using the lasso tool in the tool panel, select the area that you will be animating. For this example, I am going to make the moose walk across the street, so I will select the entire moose. To make the selection cleaner, zoom the scale up to 150%. Select the area as close as possible.

3. Moose selection

   Copy the selected area and cut it. Open a new document in Fireworks. Choose to have a transparent background and make the new document the same size as your original document. Paste the selected cut image into the document and save it to your folder. Zoom the new image to 150% or larger and clean up the edges by erasing them with the eraser tool. Save the image.

4. Background

   Fill in the area that was cropped using the marque tool copy selections of the background and paste them over the cropped area. Use the Smudge tool to make it appear as if nothing was cut from the background. On the menu, go to the option Modify and choose Flatten Layers in the drop-down menu after you have cleaned up the original document. This document will serve as a backdrop for the entire animation. Save the image.

5. Finished animation

   On the panel area of the Fireworks, add frames. For this example, I used four frames. Copy the background and paste it into each frame. Select the first frame and open the second image made. Copy the image and paste it into frame one. Go to frame two and paste the same image, moving it forward slightly. Repeat this step into each frame. On the frame panel set the time delay and test your animation. Saving your document, use the option export wizard to generate a .gif after it is saved. Choose to browse the new animation in the browser when the animation is displayed. Drag it to the desktop and your .gif is created.

Resources

• Adobe Fireworks