|
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:
| Frame | Delay | Why |
| 1: top | 25 | hangs in the air |
| 2: falling | 10 | picking up speed |
| 3: squash | 8 | a quick smack |
| 4: rising | 10 | slowing 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.
|