Creating/Editing Animated GIFs
With Macromedia Fireworks

An animated GIF is a GIF file containing multiple images. These images act as successive frames of animation when the GIF is viewed in a web browser.

Most of the animation you see on the Web is accomplished with animated GIFs because all browsers can display them without any additional software (plug-ins) being required. For example, nearly all banner ads (the advertisements at the top of many commercial Web pages) are animated GIFs.

(Like to learn more about animated GIFS? Read this or this!)

In this tutorial we will learn:

1. How an animated GIF works.
2. How to change previously created GIFs.
3. How to create an animated GIF from scratch using Macromedia Fireworks.

Inside an Animated GIF

Let's begin by dissecting an animated GIF with Fireworks.

1. Open Fireworks.
2. Save this animated GIF (from Ulead WebUtilities' collection) to the Desktop. Use the name email.gif.
   
3. Open email.gif in Fireworks. It should look something like this:
   
   If you don't see the window labeled "Layers, Frames" then go to the Window menu and make sure that Frames is checked. This is what Fireworks calls the Layers Panel.
   • Each individual frame of this seven-frame animation may be viewed by clicking on the labels Frame 1, Frame 2, Frame 3, etc. one at a time.
   • Try it yourself! Did you see the yellow, green and purple letters come flying into the mailbox? Now, that's action!
   • A confusing thing about Frames and Layers:
     • Modern image editing (in programs like Photoshop) is based on the notion of layers and Fireworks itself makes extensive use of them.
     • But we won't mess with layers just now. All you have to remember is that:
       • In Fireworks, the individual images in an animated GIF are placed on separate frames.
4. Look at the bottom right of the main Fireworks window, which is called the Document Window, and you'll see VCR-like icons.
   
   Just like a VCR or CD player these buttons will (from left):
   1. Move to the very first frame.
   2. Play the animation.
   3. Move to the next frame.
   4. Show you which frame number is being displayed.
   5. Move to the previous frame.
   6. Move to the very last frame.
5. Click on the Play button to see the e-mail box in action. Try out the other buttons.

Editing an Animated GIF

Now that you've seen "inside" a GIF, let's try editing one. Let's say for some perverse reason we've decided to make the mail flag yellow in the last frame . . .

1. With email.gif opened in Fireworks, click on Frame 7 in the Layers Panel to make it active.
2. This image is mighty small, so increase your view of it by going to the View menu, selecting Magnification, and then selecting 200%.
3. For this exercise we're going to use the Paintbucket Tool . The Paintbucket fills in an area with a color. Click its icon in the Toolbox and the cursor turns into a little paintbucket.
4. Set the color of the paintbucket by clicking on the selector button next to the paintbucket icon at the bottom of the toolbox
   
   You may need to resize the window to be able to see this. Choose a nice yellow.
5. Move the paintbucket cursor over the red mailbox flag and click once. It should look something like this
   
   If it doesn't, then Undo (Control-Z; your best friend!) and try again.
6. Now, play the animation. Did it change the flag to yellow just for an instant? Then it's worked!
   • If you wanted the flag to be yellow for the entire animation, you'd have to color it in each frame one at a time.

Let's use our new version of e-mail.gif to practice exporting a GIF animation.

1. With our new, yellow-flagged mailbox opened in Fireworks, go to the File menu and select Export Preview. You'll see a new way to do exporting!
   
   You can also control the animation using theFrames Panel (below), but the Export Preview is simpler.
   
   
   
2. Note that the format is set to Animated GIF and not plain GIF.
   
3. Click on the Animation tab
   
   in order to control how the animation works.
   When viewing the animation panel, you may click through the animation one frame at a time, or you may run it using the VCR controls in the lower right part of the frame.


4. The options you have include:
   1. Frame Delay. Set the frame delay number to determine how long a frame is displayed.
      • Frame delay is specified in hundredths of a second. For example, Frame 1 in our mailbox example is set to display for 50 hundreds of a second, or half a second. Frames 2-6 display for one tenth of a second and Frame 7 displays for one second.
        • Note: these times are not precise. The speed of one's computer determines how fast the animation will run!
      • To make frames display as quickly as possible, set the frame delay to 0.
      • To enter a frame delay value, choose a frame from the list and then enter a number in the Frame Delay field.
        
      • Try this: set your animation so that Frame 3 displays for 4 seconds.
        • Test the animation. Did the yellow letter frame display for exactly 4 seconds?
      • Note: To select a range of frames, select the first frame, hold down the Shift key, and then select the last frame in the range.
        • To select multiple frames, hold down the Control key (Windows) or Command key (Macintosh) while selecting individual frames.
   2. Disposal method. The disposal method determines how the selected frame is replaced by the next frame.
      • When you click the disposal icon , you are given four choices:
        1. Unspecified. No disposal method is specified. Fireworks automatically selects the disposal method for each frame. Choose Unspecified to create the smallest possible animated GIFs.
        2. None. The frame is not disposed before the new frame is displayed. The next frame appears on top of the current frame. Choose None to add a smaller object to the existing frame.
        3. Restore to Background. Erases the current frame's image and restores the area to the background color or pattern that appears in the Web browser. Choose Restore to Background when moving an object in a transparent animated GIF.
        4. Restore to Previous. Erases the current frame's image and restores that area to the previous frame's image. Choose Restore to Previous to animate objects across a background image.
   3. 
      Looping. Use the Loop settings to determine how many times the animation plays.
      • Click the left button for Play Once.
        • The animation will play only one time and then stop--returning to its first frame.
      • Click the right button for repeated plays.
        • Then set in the window if you want it to loop forever and ever and ever, ad nauseum, or,
        • Set a specific number of loops.
          • Generally, it's best to set a specific number of loops. Looping forever can lock up some browsers.
      • Try this:
        • Set looping to Play Once and then run the animation (use the VCR-controls ).
        • Set looping to four plays and then run the animation. Was it over too quickly, or not?
   4. Auto Crop. Reduce the size of the image.
   • Auto Crop examines the image and if pixels are not being used, it chops them off.
   5. Transparency.
   • We'll discuss transparent GIFs next week.
   • Fireworks exports transparent animated GIFs if the canvas is transparent or if transparency has been defined on the Options panel of the Export Preview.
   • Note: Not all web browsers support transparent animated GIFs
   6. Try this: Once you've noodled around with e-mail.gif's settings and are bored with it, rename it e-mail2.gif, and save it on the Desktop.
      • Start MS IE or Netscape Navigator and open email2.gif in it. (Go to the File menu and choose Open Page. This should let you select email2.gif.)

If you haven't already, show email2.gif to your instructor.

Animated GIFs can be photographs as well as cartoons. Save Doggie Gets a Snack (dog300.gif) to the Desktop and open it in Fireworks. Examine the individual frames.

Animation by Maureen Furniss.

Are finished? No!

Continue . . . to learn how to create an animation from scratch.

Bibliography

1. Jim Frew, "GIF Animation Refresher," WebMonkey, April 9, 1997.
2. Anna McMillan and Emily Hobson, "Animation Tutorial," WebMonkey, August 11, 1998.
3. Macromedia Fireworks Local Help Pages (while using Fireworks, select Fireworks Help from the Help menu).
4. Macromedia Fireworks Online Help Pages: www.macromedia.com/support/fireworks
5. Sandee Cohen, Fireworks for Windows & Macintosh (Berkely, CA: Peachpit, 1999). Companion Website.
6. Ulead WebUtilities' Animated GIF Collection