Animated GIFs

You know what a GIF is; we created one in the Pictures part of this guide. And you've seen images on web sites that move. Maybe it's a globe spinning, or a ball that rolls across a banner, or a flag that waves. Such images are a special kind of image called an animated GIF (a GIF that moves).

It's not that hard to make a GIF that moves and we're going to learn how.

As you know, TV and movies and cartoons create the illusion of motion by presenting a series of fixed images, called frames, that flash before the audience faster than the eye can see, usually 25-30 frames a second. Since our eyes can only process movement so fast, we don't really see the jumps between frames; to us it's just one smooth motion.

Pictures that move on the Web are created using the same idea. However, they aren't nearly as fancy and they move a lot slower. But they still simulate motion and we can create them.

How Animation Works

Let's say we have a picture of this little wiggling finger:

So how does it work? Well, as you might imagine, the wiggling finger is a series of static images of the finger in it's different poses:

etc . . .

You get the idea. The first image displayed is the finger pointing up. Then it shows a picture of the finger pointing to the left, then up again, then to the right, then up again, and on and on and on.

What do you need to make an animated GIF? You need two things.

A series of pictures (GIFs ) that make up the frames of the animation
A program that will put the GIFs together and display them in the order you specify.

Let's say we already have our three finger pictures. Let's call them:

finger-up.gif
finger-left.gif
finger-right.gif

And let's say we have a program that can put the GIFs together and display them in the order we specify and for how long we specify.

This is what we would tell the program.

display finger-up.gif for a 10th of a second
display finger-left.gif for a 10th of a second
display finger-up.gif for a 10th of a second
display finger-right.gif for a 10th of a second
repeat the above forever.

And the program would do that, over and over, until you clicked out of the site because you got sick of watching a wiggling finger.

Making an Animated GIF

OK let's make an animated GIF. We'll use a Mac freeware program called GifBuilder 0.5 by a fellow named Yves Piguet in Switzerland. You can find this program in many different places on the Web; try http://download.cnet.com/ and do a search on "GifBuilder." Or do a search on the Internet itself for "GifBuilder" to find other sources. Then download it and install it.

There are also animated GIF programs for Windows. Try Animation Shop (shareware) from http://www.jasc.com or do a search on "Windows GIF animation software." Other animated GIF programs may look slightly different, but they will work in essentially the same way; you give the program your pictures and tell them the way you want the frames displayed.

First we need to create the individual GIFs that will become the frames of our animation. We'll make three pictures that when put together show a little fellow waving to us and saying HI.

1
Make the Pictures

We want to create a new image, let's say 100 x 100. (Select New from the File menu; enter 100 for both width and height in the dialog and click OK.)

Let's draw a little fellow with the circle tool.

Remember how? Go back to the Pictures page of Five Easy Pieces for directions.

 
  • Pick the Circle tool (Filled) to draw the circles
    of the face, body, and feet.
  • Make the arms with the Line tool. If you
    mess up, use the Undo or the eraser.
  • Pick the Pencil tool and draw in the eyes,
    nose, and mouth.

Select Save from the File menu and save the image as fellow1.gif.

Now let's make the second picture. Keep fellow1.gif open because we're going to change it.

 
  • With the Eraser tool, erase the little guy's arm from the elbow up.
  • Pick the Line tool and draw a new upper arm in a different position.

Select Save As (very important - you want to keep that first picture around!) from the File menu and save the image as fellow2.gif.

Great. Now you have two files, fellow1.gif and fellow2.gif.

Let's make one more. Keep fellow2.gif open.

 
  • Change both arms again using the Eraser and Line tools.
  • Open up his eyes too, with the Filled Circle tool, first in white and then in dark blue.
  • Use the Alphabet tool to type "HI" in the corner.

Select Save As (very important - you want to keep that second picture around!) from the File menu and save the image as fellow3.gif.

Great. Now you have three files, fellow1.gif, fellow2.gif, and fellow3.gif.

You are ready to animate!

2
Launch GifBuilder

After you download and install it, double-click on its icon:

Then, the program does ... nothing!

You have to select Frames Window and Preview Window from the Window menu. Also, you should open the folder that contains the images of your three fellows.

Then you should have something that looks like this:

3
Drag the GIFs

Now, click on fellow1.gif and drag it into the Frames Window. Then, drag fellow2.gif and fellow3.gif. Finally, drag fellow2.gif again.

Your Frames Window should look like this:

The Preview Window will show the image on which you click in the Frames Window.

Woo-Hoo! You are ready to roll.

4
Save the Animation

To see what the animation looks like, select Start from the Animation menu and watch the fun in the Preview Window. When you're done, select Stop from the Animation menu.

Now save the animated GIF by selecting Save from the File menu. Let's call it fellow.gif.

You can incorporate it in your web page just like any other image:

<IMG SRC="images/fellow.gif">

Congratulations! You've just created your first animated gif.

So what does it look like? Here's the fellow himself to show you!

5
More Tricks

You can create all the frames in the animation yourself, or you can let the animation software do some of the work for you.

Each animation program has its own features, so don't forget to check out the Help files for your program; they contain information explaining how do the things you'll want to do.

GifBuilder lets you control and add to your animation in a number of ways. You can:

  • Tell it whether to play over and over again (loop) or not
  • Tell it how long to display each frame; you might want to show some frames longer than others
  • Select a frame and duplicate it
  • Select a frame and delete it
  • Select a frame and apply or create an effect (e.g., blur, flip)
  • Select a frame and create a transition to it (e.g., dissolve, slide, push, wipe, peel).

And whatever you don't like, you can Undo.

Of course, like all building blocks, the fun begins when you start combining them, mixing up all the images you create with all the features that your animation software offers. You're limited only by your own creativity!

Intro | Comm | Pub | Five Easy | Web Ed | Found | Squeezing | Standards | Animate | Epilogue

 

All contents copyright (C) 1999-2007 Wanda Wigglebits. All rights reserved.