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
the error messages that browsers sometimes generated when a
- This animated image uses the familiar Fireworks application.
- Slideshows take only a few minutes to create.
- These animations are easy to modify: add or remove images, or change the slide order, in just a few minutes.
- Animated GIFs can be used almost anywhere. Treat them just like a regular GIF when inserting into a Web page or PowerPoint.
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:
- Import the images. Each picture will be in its own frame.
- Rename the frames and set the delay time for each slide.
- 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.
STEP 1: Import the Images
- 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 ( ) to select a background color for the slideshow.
- 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).
- Select File > Import... and browse for the first image.
- Put 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.
- 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.
- Save the file as
- Click the New / Duplicate Frame icon ( ), at the bottom of the Frames panel, to create a new frame.
- Repeat steps 3-5 above to insert the second image.
- Continue creating new frames and importing images until all images are inserted -- each image in its own frame.
- Save the file.
Every image must be in its own frame!
STEP 2: Set the Timing for the Slides and Test the Animation
- Rename each frame: double-click on the text
Frame 1 and type in a more descriptive title for
the frame. Repeat for the other frames.
- 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.
- There 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
- 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.
- Save the file.
STEP 3: Export the Finished Project
- Select File > Image Preview (File > Export Preview in other
versions of Fireworks).
- Change the Format: to Animated GIF (red ellipse in image below).
- 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).
- You can also play the animation (dark blue ellipse below).
- Click the [Export] button to save the animated GIF.
Printer-friendly version of this exercise (PDF)