| Fleeting Glimpse > GIF Animation Instructions > Plan | |
|
Spending a little time upfront planning your animation will save you a lot of time during the drawing phase.
Select something to animate
|
 For your first animation start with something simple like this bouncing ball or a simple text animation where the words moves across the page or each leter appears one at a time. That way you can get through the whole process without getting bogged down with complex images.
|
| Plan |
step2 |
|
Select the number of images The number of frames comprising the animation has an impact on the smoothness of the animation, on size of the file, and how much work you have to do. Too many frames make the file bigger and slower to download, plus requires more work making the drawings. Too few frames make the animation appear rough and jumpy. The goal is to pick the minimum number of images necesssary to accomplish the desired motion. |
|
|
See what others do -- download good animations & use Gifcon to analyze their timing
|
Selecting the right number of frames takes some experience and mental visualization. I usually envision the animation playing as separate images, with a rhythm or a beat (each image being a beat) -- sometimes faster with more beats, sometimes slower with less beats. I do this until I feel the rhythm of the animation is right. (I know this sounds a bit vague but it works for me). I then count the number of images for the animation - the bouncing ball seemed right at 8 beats or images. I then count how many seconds the animation should last - for the bouncing ball about 2 1/2 seconds seemed good. For many of the animations I've made, 2 to 4 images per second seemed about right. For other, more fluid animations, 10 frames per second may be appropriate. For the Home animation, 2 frames per second seemed about right. The timing does not have to be uniform; you have the freedom to set each frame independently -- for example one frame may display for only a quarter of a second, the next to 5 seconds. The right number of frames and timing will depend a lot on what you are animating. At this point I make a rough sketch of each image -- a storyboard of the animation. Don't worry about getting the number of frames and timing exactly right -- you can add or subtract frames later.
Some tips
|
|
You can make an animation disappear at the end of the cycle (or for a brief time in the middle) by including a blank, fully transparent image.
Consider what other graphics and colors will be on your page before you finalize the selection of colors for your animation.
|
|
Intro < Ready < Plan > Draw > Assemble > Compress > Place > More Info > Inspiration
|