Creating Animated GIFs

Creating an Animation From the Get-Go

Creating an animation in Fireworks is not too difficult, but it does involve learning about Symbols and Instances and other concepts that are probably foreign to you. So, let's take it step-by-step . . .

1. Open Fireworks (if it's not already). Go to the File menu and select New.
2. When the New Document window pops up, set Width to 300 pixels, Height to 300, Resolution to 72, and Canvas Color to White:
   
   This should give us enough space to play around with.
3. You should now be looking at a blank, untitled document. Save it to the Desktop as test.png, which will be in the Fireworks File Format (that is, not a GIF or a JPEG yet).
4. You're almost ready to create your first Symbol and Instance.
   • Symbol
     • In Fireworks, an Object is any visual element in your document. Thus a circle could be an object and so could a line of text. Just about everything in Fireworks is an object.
     • A Symbol is an object that has been given the power to control copies of itself.
   • Instance
     • A copy of a symbol. There can be many copies or instances of a single symbol.
     • Thus, the symbol is sort of like the parent and the instance is its child--sharing its characteristics (its DNA, if you will!)
5. Create a symbol.
   1. Go to the Insert menu and select New Symbol.
   2. Title it "circle" when prompted for a name in the Symbol Properties dialog box and click Okay.
   3. You're now in the symbol creation window.
      
      (The red circle will not appear in yours yet.)
   4. 
      Select the Circle tool from the Toolbox.
      If you can't see the Circle tool, it's probably hiding behind the Rectangle tool . Press and hold the Rectangle tool and the Circle tool will appear. (If the whole Toolbox is not visible, go to the Window menu and select Toolbox). Your cursor will turn into a little cross.
      
      The color inside the circle you're about to draw is determined by the color next to the paintbucket at the bottom of the toolbox. Click its selector button (the little triangle) and choose a nice red.
      
   5. Drag the cursor. A colored circle will form. Make it about the size of the red circle above.
   
   
   6. Close the Symbol creation window and a copy or what Fireworks calls an instance of your circle symbol will now appear in the document.
      
      
      
6. Create a second instance.
   1. With the circle instance selected, go to the Edit menu and choose Copy (keyboard shortcut: Cmd/Ctrl-C).
   2. Go to the Edit menu again and choose Paste (keyboard shortcut: Cmd/Ctrl-V). A second instance of the circle appears
   3. It will appear that the first circle instance has disappeared, but it hasn't!
      • This instance is just on top of the other one, concealing it. See for yourself: drag the second circle instance to the top of the document. The symbol should appear from behind it.
   4. You now have two instances of circles in your document.
7. Let the Tweening commence!
   1. Tweening is a process by which the images in between two images are automatically generated.
   2. Fireworks accomplishes this by inserting images between two instances. It then places those images on individual frames.
   3. Let's tween our two circles and thereby create an animation of it rising from bottom to top.
      1. Select both circle instances by dragging a rectangle over the two of them.
         
         Note the blue rectangles around both circles.
      2. Go to the Modify menu, choose Symbols and then choose Tween Instances.
      3. In the Tween Instances dialog box, the Steps setting determines how many new images will be created. And Distribute to Frames must be checked so that the new images are put on their own frames.
         
         10 steps is probably enough for our rising circle. Click OK once you've made the adjustments.
      4. You've just tweened! You're an animator now!
         1. Prove it to yourself:
            1. Click the Play button in the document's VCR controls.
               
               It'll continue to loop until you hit the stop button.
            2. Check the Frames Panel (if it's not visible: Window menu, Frames selection). You should have 12 frames of a rising circle.
               1. Frame 1 is the first circle instance.
               2. Frame 12 is the second circle instance.
               3. Frames 2-11 are the tweened images, which are also instances of the symbol.
8. Time to save test.png again.
9. Export your new animated GIF as mycircle.gif--using the directions from part one of this tutorial. Then show your rising circle to your instructor.

More information on working with animation frames in Fireworks is available.

Creating an Animation Using Images in Another Program

Fireworks can create an animation based on a group of image files--for example, a group of GIF files such as these five frogs:

frog1.gif	frog2.gif	frog3.gif

frog4.gif	frog5.gif

Save all of them to the Desktop and use them in the next section.

1. Choose File menu, and select Open Multiple.
   The Open Multiple Files dialog box appears.
2. Browse to the Desktop, locate frog1.gif through frog5.gif.
   

   Click Add to add a file to the list. Click Add All to add all files in the current folder to the list.

3. Check Open as Animation and click OK.
   Fireworks opens the frog files into a single document, each file placed on a separate frame in the order they were chosen in the Open Multiple Files dialog box.
4. Export the new frog animation file to the Desktop as FrogAni.gif--after setting various options in the Export Preview window.
5. Open FrogAni.gif in your browser and show it to your instructor.

If time remains, another tutorial on fading text in is available.

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