Animation means well. It wants to enhance, to excite, to illustrate. But so often it is misunderstood, exploited, and embarrassed. Please feel its pain and use it wisely. Otherwise you can send people running with disgust, spreading bad rumors about our friend the animation.
Why this plea, you ask? It is simple. We are given tools. Tools that facilitate, clarify and impress. But so often we forget the purpose of these tools and their power is diminished or even turned against them. This is true of animation.
At first you might be excited to see how easy it is to animate. You begin with a simple drawing and see it come to life. Then before you know it your website is flickering, pulsing, and causing seizures left and right. That's just plain wrong.
So before you even decide on an animation, figure out what its purpose is. Even if it just functions as an eye grabber, make sure it is tolerable. Any moving object will draw attention and if you have ten blinking, slurping, burping mailboxes on your screen, you will also soon have some enemies.
Animations are great for:
Animation is bad when:
*Disclaimer: It may now be apparent that the author has a thing against the animated mailbox. Not really, this is just to see if you're paying attention. It's your site.
You have most likely seen a flip book at some point. It is a collection of pages with a drawing on each page that, when flipped, creates an animation. All the creator does is draw an image and then alter it slightly on each page so that when viewed in succession it appears to have movement. This is the same procedure you will use for the Web.
Let's say you want to illustrate the moves used to create an origami frog. Your first step would be to choose the size of your animation. Each image should line up so that the finished product does not appear jumpy. Some programs allow you to import a layered file with each layer being a separate frame. Other programs only allow you to import flat images. If this is the case, you will need to make sure your images are in the correct place within each frame.
Begin with your first image. In the case of the origami frog, your image would be a square. The next image would be the same square, but with dotted lines in the place of the first fold. The following image would show the fold and so forth.
When the images are imported or dragged and dropped into the animation program, you will see them in a row. The frames can then be manipulated, moved around, and given special effects. Most programs have swanky fades and transitions, control over how many times you want the animation to loop, and time delays so you can slow down or speed up each frame, or the entire animation. Playing around with these features is the best way to understand them, but keep these points in mind:
Just as there are many animation programs, there are many tutorials. Two of the best resources are Hotwired's Webmonkey and ZDNet's Devhead. Both sites offer instructions for various animation programs as well as useful information on what to consider when animating.
Devhead's Animation 101 takes you through the basics of constructing Web animation, from creating your images to optimizing them.
Webmonkey's GIF Animation Refresher helps you think about planning your animation. When you're ready to tackle more advanced animation, check out the Animation Tutorial by Anna McMillan and Emily Hobson.
|Home||Information Page||HTML Lessons||Java Script Lessons|