Request a meeting room reservation at Northside Learning Center
Making Simple Animated GIFs with Fireworks
 

Introduction

San Jose Mission slideshow
San José Mission
Animated GIFs are the easiest type of animation to use in Web pages, CMS Outreach pages, PowerPoints, and a variety of other places. The following shows how to use Fireworks to make a simple animated GIF that displays a series of images as a slideshow. This is faster and easier than doing it in Flash or Javascript, and it avoids the error messages that browsers sometimes generated when a page with Javascript is loaded.

Why bother?

  1. This animated image uses the familiar Fireworks application.
  2. Slideshows take only a few minutes to create.
  3. These animations are easy to modify: add or remove images, or change the slide order, in just a few minutes.
  4. Animated GIFs can be used almost anywhere. Treat them just like a regular GIF when inserting into a Web page or PowerPoint.

Getting Started

For this project, you need two or more images for the slideshow. They don't have to be the same size, but the finished slideshow looks better if the pictures are all the same size.

There are three steps in this project:

  1. Import the images. Each picture will be in its own frame.
  2. Rename the frames and set the delay time for each slide.
  3. Save the project and Export the animated GIF.

Pictures for the project:

It's a very good idea to resize/crop the images to the same size.

For your convenience while learning this, here are four images, all resized to the same size. Click each GIF below to see the full-size 250x188 JPG image.

palm trees
palm_trees.gif
flower
flower.gif
sunrise
sunrise.gif
ocean sunset
ocean_sunset.gif

STEP 1: Import the Images

  1. Go to File > New to create a new image. Set the Width: and Height: of the new image to match the width of your widest image and the height of your tallest image. A White Canvas color is a good choice, or use the color picker ( color picker ) to select a background color for the slideshow.
  2. In the menu at the top of the screen, select Window > Frames to bring up the Frames panel (in Adobe Fireworks CS4, it is called the States panel).
  3. Select File > Import... and browse for the first image.
  4. image positionPut your cursor on the canvas, and you should see that it has changed to an upside-down "L" shape. Place it on the upper-left corner of the canvas and click to place the image.
  5. With the image selected, check to make sure that its position on the canvas is correct. If all images are the same size, the X: and Y: values in the Properties should both be zero (0). If not, change the X: and Y: to zero. This is the distance of the upper-left corner of the images -- in pixels -- from the upper-left corner of the canvas.
  6. Frames panelSave the file as slides.png.
  7. Click the New / Duplicate Frame icon ( New / Duplicate Frame ), at the bottom of the Frames panel, to create a new frame.
  8. Repeat steps 3-5 above to insert the second image.
  9. Continue creating new frames and importing images until all images are inserted -- each image in its own frame.
  10. Save the file.

Note:
Every image must be in its own frame!

STEP 2: Set the Timing for the Slides and Test the Animation

  1. Rename a frameRename each frame: double-click on the text Frame 1 and type in a more descriptive title for the frame. Repeat for the other frames.
  2. Test your new animation by clicking the Play button at the bottom of the Fireworks editing window (above the Properties). Click again to stop the animation.

    Frames play controls

  3. Frame timingThere is a number to the right of each frame name. This is the frame delay of the slide in 1/100 of a second. The default is generally 7/100 of a second for each frame. Double-click the numbers to change the timing of each frame.
  4. Make sure that the box next to Include when exporting is checked, to make sure the timing that you set will be in effect in the finished animated GIF.
  5. Save the file.

STEP 3: Export the Finished Project

  1. Select File > Image Preview (File > Export Preview in other versions of Fireworks).
  2. Change the Format: to Animated GIF (red ellipse in image below).
  3. Check the number of colors available, and the number of colors in the animated GIF (maroon circle below). Adjusting the number of colors available -- via the drop-down -- may affect both how the image looks in the preview and the file size of the finished animated GIF (pink ellipse below).
  4. You can also play the animation (dark blue ellipse below).
  5. Click the [Export] button to save the animated GIF.

Image Preview for animated GIF


Printer-friendly version of this exercise (PDF)