Home >> Software Help >> Fireworks >> Animated GIFs in Fireworks

Animated GIFs in Fireworks

Another nifty feature of GIFs is the ability to string together several images into a frame-by-frame animation. While you can create each individual frame as an individual GIF in Photoshop you cannot create the animated GIF through Photoshop. Third-party software must be used to unite the individual files.Consequently, we'll focus on constructing a very simple, 4-frame animated GIF in Fireworks:

Make a New File
  • Open a new file in Fireworks with File > New. In the dialog box that appears set both the width and height to something like 50 pixels, screen resolution to 72 dpi, and background to white.
  • Make sure the Windows > Frames option is checked. This ensures that the Frames window is visible.
  • Use the rectangle tool: to draw a square of any color in the new canvas.
Set the Animation Options
  • In the Frames window, double-click on Frame 1. In the box that appears, set the desired delay between the display of each frame in 100ths of a second (we used 20). Also, make sure that the 'Include when Exporting' option is checked.
  • In the same Frames window, click on the loop button: and, in the menu that pops up, select Forever (unless you'd prefer something else).
Create the Individual Frames
  • Next, copy this frame by dragging it to the New/Duplicate Frame button: just below.
  • Select the new frame (Frame 2) by clicking on it once so that it becomes blue.
  • Now right click on the square you drew and select Transform > Numeric Transform. In the dialog box that appears, set the main option to Rotate (as opposed to Scale or Resize). Then set the rotation to 22 degrees.
  • Copy Frame 2 to create a Frame 3 and repeat the rotation process. Do this once more to create a similar Frame 4.
Compile the GIF
  • Once you have all 4 frames drawn, go to the Optimize window (if this window is not visible make sure the Window > Optimize option is checked). In the Optimize window set the format to GIF.
  • Then go to File > Export... and name your file. Fireworks will automatically compile your frames into one GIF animation!

Tip: A neat feature of Fireworks is that you can preview your animation before exporting it. At the very bottom-right of the Fireworks window, on the status bar, is a strip of movie controls:. Use these to test your animation.

 

See these tutorials for more:

One-Day Fireworks Tutorial - from WebMonkey, explains how to construct an animated GIF in Fireworks.

Macromedia's Fireworks Tutorial - step by step instructions