Home | Courses | Web Design | Office | Client-Side Scripting | Server-Side Scripting | About Me
Creating Animated Gifs with Fireworks
An animated gif shows a succession of images over time where the image remains in a fixed position on the page. (It is therefore different from the animation one can achieve through DHTML where JavaScript is used to change the CSS positioning attributes of an image over time.) The HTML to put the animated gif on the page is the same as for other images; there is nothing in the HTML that indicates it is an animated gif. When the animated gif is created in a graphics program such as Photoshop or Fireworks, each image is first put in a separate "frame", and one sets the delay between various frames (the delay can be uniform across frames, or vary) as well as the number of times the animated gif will loop through the frames. This delay and looping information is therefore contained in the image file, and is not controlled by HTML.
However, in this exercise, we will assume we already have the image for each frame. We will simply bring these images into Fireworks, putting each in a separate frame, set the delay and looping, and export the file as an animated gif.
For example, here are three image files that we will make into the animated gif on the right
The steps in Fireworks are as follows:
1) Create a new file -- make the dimensions of it big enough to accommodate the image
2) If the Frames palette isn't showing, select Window, Frames to display it.
3) File>Import and find the image file you want to insert. The cursor will then change to a right angle and a left mouse click will then insert the image with the upper left hand corner of the image at the cursor location.
4) At the bottom of the frames palette, click the icon second from the right (New/Duplicate Frame)
5) Repeat step 3 to insert the second image into the second frame and step 4 to create another frame, and continue inserting pictures into frames till all the pictures have been inserted.
6) To select a uniform delay between frames, select the first frame and the last frame while holding down the shift key. Then at the right of the frames palette, click the Arrow and then select Properties to set the delay, enter a number and then hit Enter.. To create a nonuniform delay between frames, select the desired frames (using the Shift key for contiguous frames and the Cntrl key for non-contiguous frames) and then click the arrow, and select Properties, enter a number and hit Enter.
7) Select File>Export Wizard (alternatively, you can click on the arrow at the right of the Optimize palette to select the wizard).
8) In the Export Wizard, you select Animated Gif as the file format and click the Animation tab to set the number of times it will loop. To change the delay for a given frame, click the frame. To remove a frame from the file to be exported, click the eye the first column.
9) Click the Export button and choose the filename for the new file.
Additional notes and more advanced techniques:
1) Rename frames - to rename a frame, double click it in the Frames palette
2) Reorder frames - select one or more frames and then click drag them to their new positions in the frame sequence. If you have renamed the frames, they will retain these names; if you haven't, the frames will be renamed to reflect their new order in the sequence
3) To step through frames or preview an animation, use the controls in the workspace below the Canvas.
4) To set the delay for an individual frame, you can also double click the right column of a frame's row.
5) To set the looping, one can click the GIF Animation Looping button at the bottom left of the Frames palette; however changes made there are not picked up on the Animation Tab of the Export Wizard, thus I find it better just to set the looping in the latter way.
6) You can set a color to be transparent using the Index Transparency option in the Export Wizard.
7) Sometimes you want artwork to appear in each frame and remain unchanged from frame to frame, whereas other parts of the image will change (be animated). While you could paste the unchanged object into each frame, the better way to do this is to put the unchanged object in a separate layer and share the layer across frames. Once the layer has been shared, you can modify the objects in that layer from any frame, and all the frames will be updated. To share a layer, double click the name of the layer in the Layers panel and check the Share Across Frames box. Sharing a layer after you have already created some frames will delete other objects in that layer in the already-created frames.
8) If you wish to animate an object, you can make copies of the object by selecting the object and then choosing Edit>Duplicate repeatedly (or Edit>Repeat Duplicate repeatedly). This will place all these copies in the same layer as the original objects. You then position the copies where you want them, and then Shift click each of them to select them all, and then choose Distribute to Frames on the Frames panel. Each one of the copies will be placed in its own layer, with the first copy placed in the first new layer. Thus the stacking order of the objects in the layer determines the placement of the objects into the layers.
9) Another technique to do frame-by-frame animation is onion skinning, whereby you can see the outlines of other frames. On the Frames palette, click Onion Skinning button at lower left. You can choose whether you want no onion skinning or whether you want to see only the next frame, the frames before and after, or all frames. Selecting Custom will bring up the Onion Skinning Dialog box which allow you to specify the number of frames you want to see before and after the selected frame and the opacity at which they will be displayed. In this dialog box, you can also check the box for Multi-Frame editing which allows you to select objects displayed as onion skins using the Pointer tool and edit them, even if they aren't on the active frame. The frame range markers will be in the left column of the Frames panel and you can click and change these as well to change which frames appear (all frames are exported however unless the Eye is clicked in the Animation Panel for that frame).
10) If you just want to make an object move across the canvas, there is an easier way than the frame-by-frame animation techniques described above. With the object selected, in the menu choose Modify>Animation>Animate Selection. The dialog box will allow you to specify the number of frames, how far something moves, the direction, the opacity, and the rotation.
11) Converting Objects into Symbols and Using Tweening (similar to tweening in Flash) - With an object selected, Modify>Symbol>Convert to Symbol. You can then name the symbol and choose from graphic, animation, or button. For a motion tween, convert to a symbol and choose graphic. Edit>Duplicate will create a copy and then select the copy and drag it to the desired location. You can also use the Transform tools (Modify>Transform) to transform the copy and you can set its opacity in the property inspector. You then select both objects by shift-clicking them, and then choose Modify>Symbol>Tween Instances will then create a motion tween where one can specify the number of steps. If you check the "Distribute to Frames" checkbox, each step will be distributed to its own frame; if the box is not checked, then all instances of the symbol are in the same frame; there is thus no animation but you can get interesting visual effects.
12) Importing existing animated gifs into Fireworks - you see all the detail, all the frames, so it's a good way to learn and you can also modify existing gifs. You can find free ones by doing a search.
-------------------
The concepts of frame-by-frame animation, layers, tweening, symbols, and onion skinning are present in Flash as well.
Revised June 11, 2008. Comments to William Pegram, bill@billpegram.com