MOVEMENT IS THE DIFFERENCE
Here's the thing nobody tells beginners. You don't animate a picture. You animate the difference between two pictures. Your eye fills in everything in between. So the question for every frame isn't "what does this look like?" It's "what changed since the last one?"

KEYS FIRST, THEN IN-BETWEENS
Draw the extremes first: the two or three moments that tell the whole story. For a bouncing ball, that's the ball at the very top and the ball at the very bottom. The old animation studios called those the key poses. Then you draw the frames that get you from one to the other, the in-betweens. For a little web animation, two keys and two in-betweens are often plenty.

TONIGHT'S HOMEWORK: THE BALL
Here is a four-frame bouncing ball, drawn the way I'd sketch it on the back of an envelope. Each box is one frame. The line at the bottom is the floor.

  O
 
 
 
_____

 
  0
 
 
_____

 
 
 
 (=)
_____

 
  0
 
 
_____

Frame 1 is the top of the bounce. Frame 2 is the ball on its way down, drawn a little taller and thinner than round (that's the zero instead of the letter O), because a fast-moving thing looks stretched to the eye. Frame 3 is the ball hitting the floor, and it's squashed flat and wide. Frame 4 is on its way back up, stretched again. Then it loops back to frame 1.

That squash is the whole secret. Without it, the ball looks like a ping-pong ball on a string. With it, it looks like it has weight and bounce, like it's made of rubber. The studios called it squash and stretch, and it works on everything: a hopping bunny, a jumping kid, a head nodding yes.

KEEP EVERY FRAME LINED UP
When I drew on paper, every sheet went on the same pegs so the drawings stayed in register. On the computer, the pegs are the canvas size. Every frame must be exactly the same size, width and height, down to the pixel, and the floor must be in exactly the same place in each one. If frame 3 is one pixel wider than the others, your whole ball will jump sideways every time it lands.

The easy way: draw frame 1 completely. Then make a copy of the whole picture (in Paint Shop Pro, Edit, Copy, then Edit, Paste As New Image), save it as frame 2, and change only the part that moves. Copy that for frame 3. And so on. Everything that doesn't move stays exactly put, because you never touched it.

NAME YOUR FILES IN ORDER
ball1.gif, ball2.gif, ball3.gif, ball4.gif. You will thank me when you have twelve of them.

MAKE THE LOOP MEET
If your animation repeats, the last frame has to lead naturally back into the first, the way frame 4 of the ball rises back up to frame 1. A good test: flip back and forth between your last frame and your first in the paint program. If there's a jump, you'll see it.

FEW COLORS, FLAT COLORS
A GIF can have up to 256 colors, but every one you use makes the file bigger, and soft shading turns into speckles when the colors get cut down. Cartoonists have always known that flat colors with a good outline read best at a small size. Pick your handful of colors before you start and use the very same ones in every frame.

HOW MANY FRAMES?
Two frames make a blink, a wink or a wag. Four to eight will do nearly anything a home page needs. Past twelve, stop and ask yourself whether anybody on a modem is going to wait for it. The flag in the clip art library does its whole wave in six.

Draw your four balls at 32 by 32 pixels, save them, and then go on to Lesson 2 to make them bounce.