GeoCities.us GeoCities.us » SoHo » Easel Get your FREE home page!

FLIP!
LESSON 2: PUTTING IT TOGETHER
HOME · LESSON 1: DRAWING THE FRAMES · LESSON 2 · WRITE ME

You've got ball1.gif through ball4.gif from Lesson 1. Open your animation program and load them in order. Most of the programs have a wizard that asks for the frames one at a time; use it the first time. Now you have a stack. Here's what to do with it.

1. TIMING
Every frame gets its own delay, measured in hundredths of a second. So 100 is one second, 50 is half a second, 10 is a tenth. This is where an animation comes alive or dies, and most beginners set every frame to the same number and wonder why it looks like a machine.

Think about a real ball. It hangs for a moment at the top, where it's slowest, and it's going fastest when it hits the floor. So give it that:

FrameDelayWhy
1: top25hangs in the air
2: falling10picking up speed
3: squash8a quick smack
4: rising10slowing on the way up

Play with those numbers. Very tiny delays don't play the same in every browser, so I never go under about 5. And a blink is funnier if the eyes stay open for a long 300 and shut for just 15.

2. LOOPING
A plain GIF plays once and stops on the last frame. Netscape came up with a little extra piece of information you can tuck into the file that says "play this again," and now every browser I know of reads it. Your program will call it something like Looping or Repeat. You can choose to loop forever or a certain number of times.

Looping a few times and then stopping is kinder than forever, and when it stops, it stays on the last frame, so make that a good one. Remember too that your visitor can stop every animation on the page by pressing the Stop button or the Esc key, so never put anything important in the middle of the stack where they might not see it.

3. SEE-THROUGH BACKGROUNDS
A GIF can make one color completely see-through, so your ball bounces on your page's background instead of in a white box. Pick a color for the background that appears nowhere in the drawing (I use a hot pink nobody would put in a real picture) and tell the program that's the transparent one.

The dreaded white fuzz. If your paint program smoothed the edges of your drawing (anti-aliasing), those edge pixels are a blend of your ball and whatever color you drew it on. Put a ball drawn on white onto a black page and it'll have a ragged white halo, because only the one pure background color went see-through, not the blended ones. The cure: draw it on a color close to the page it's going on, or turn off the smoothing and draw hard edges.

4. DISPOSAL (THE CONFUSING ONE)
Each frame has a setting that says what to do with it when it's time for the next one. You'll see three choices, under names that vary from program to program:

  • Leave it ("do not dispose"): the next frame is drawn right on top of this one. Good for solid pictures where every frame covers the last.
  • Restore to background: this frame is wiped away before the next is drawn. Use this when your background is see-through and something moves. My first hamster was set to "leave it," and he left a trail of ghost hamsters behind him across the whole picture.
  • Restore to previous: goes back to how things looked before this frame. Not every browser handles this one properly, so I stay away from it.

5. MAKE IT SMALL
Every frame is a whole picture, so an animation adds up fast. Some rules I live by:

  • Fewer frames. Can it be four instead of eight?
  • Fewer colors, and one palette shared by every frame. Most programs have an option to use one palette for the whole animation. Use it.
  • Let the program optimize. A good one will crop each frame down to just the part that changed since the last one, which can cut the size in half or better.
  • Keep an eye on the total. A button should be under 10K. Nothing on a front page should be over 20K. My four-frame ball, done right, is about 1K.

6. PUT IT ON YOUR PAGE
An animated GIF goes on a page exactly like any other picture. Always give the width and height, so the page doesn't jump around while it loads:

<img src="ball.gif" width="32" height="32"
alt="A bouncing red ball">

That's it. Upload it, load your page, and watch the thing you drew move. I've been doing this for two years, and it still makes me grin every single time.

Stuck? Write me and tell me which program you're using and what it's doing. And when you've made your first one, send it to me. I keep a folder of every first animation anybody's sent me, and there are some very fine bouncing balls in it.


Home · Lesson 1
Deb Brodie · [email protected]
Last updated September 20, 1999