Creating Animated GIFs:
Putting it all Together

First, gather all the frames for your animation into one folder and have it accessible. You can download ready-made frames to use for this exercise.


Next, put the frames together into an animated GIF. Here's how to go about it:

1. Double-click on GifBuilder to start it up.
   If the Frames window does not open, select Frames Window from the Window menu.
   If a window called Untitled.gif does not open, select Preview Window from the Window menu.
   
   
2. Open up the folder where the frames have been saved (the individual gifs that will be combined to create the animation).
   It is easiest to View the folder by Name or as a List.
   Position the folder window so you can also see the Frames and Preview windows.
   
   
3. Drag the first frame in your animation sequence over to the Frames Window and drop it. (click here to see how to do it)
   Notice that the Preview Window shows the picture of the frame that you just dropped.
   
   
4. Drag and drop the rest of the frames in order into the Frames Window.
   
   
5. Once all the frames have been included, choose Start from the Animation menu to see the animation run.
   
   
6. Customize your animation.
   

   • By default, the animation ends after one repetition. To set the number of times the animation loops, choose Loop... from the Options menu. When used in a web page, the animation will begin over again each time the picture (or the page) is reloaded.

     
     

   • The speed of the animation is controlled by the Interframe Delay... in the Options menu. You must first choose which frames to affect. Select a single frame by single-clicking on it. To select additional frames, hold down the Shift key as you click on the other frames. Or choose Select All from the Edit menu to select every frame.

     
     All frames do not have to have the same interframe delay; very nice effects can be achieved by clever use of frame timing.
     
     
     
   • Special effects can be achieved by using filters to change the look of individual frames and transitions to alter the way in the transition from frame to frame takes place. Experiment freely with the Special Effects menu, always remembering that the frames that are currently selected will be the ones affected.
     
     If you don't like a change you made, you can Undo the change, or remove a frame or set of frames from the Frames Window and drag the originals back in.
   
   
   
7. Save your animation, using a name that ends in .gif - this tells the web browser what type of file to expect.

Finally, include your animated gif in a web page the same way you would any other graphic, using the IMG tag. For example, to include the image of the animated book on the right-hand side of the page, use the tag:

<IMG SRC="bookAnimation.gif" ALIGN="RIGHT">.

---

Learner's Guide | Background Reading | Download Frames
Putting Frames Together | Creating GIF Frames