Creating Animation By VIRAF MOHTA Author, The World Wide Web for Kids and Families.

Viraf Mohta

Saturday mornings! What does that remind you of? Mowing the lawn? Cleaning the garage? Well, put your mind into reverse gear, and go back to the time you were a kid. Now once again...what does it remind you of? Cartoons, right? Or as we refer to them in technospeak - animation.

If you've been cruising the Web for a while, you've surely come across those blinking, whirling, zooming, color-changing pictures or messages like the ones shown on this page. These pictures or banners are nothing but crude versions of those Saturday morning cartoons. They're not much fun to watch, and get boring after a while. But you have to admit that they do add a little pizzazz to a Web page which would look really bland without them. Have you wondered how one creates these animation? Or have you been too technophobic to follow that train of thought? In this article, I'll give you a little insight into the creation of simple animation. I won't delve into the specifics of creating one, but will give you enough information to get you started.

Trust me, animation is very easy to create. You don't need to be a rocket scientist to make one. But if you're like millions of others who'd rather use the ones created by some one else, read no more. SSAnimation has a collection of animated stuff which you can download and use for free, including some which appear on this page. If you do decide to use some of their animation - or for that matter, anybody's creation - please get permission to do so, or at least give the creator due credit, like I've done below. But I hope that by the time you're at the end of this piece, I'll have sparked enough interest in you to create your own stuff.

How Animation Works

Have you ever seen those picture books which have a photograph on every page, and when you fan through the pages real fast, you see a sort of 'movie'? You know what I'm talking about, right? Now, if you were to slowly go through every page in that book, one by one, do you think you'd see get that movie effect. Nope. Well, animation works in much the same way. An animation is like that picture book, and it's made up of a whole bunch of individual pictures (just like those individual pages in the picture book). Each picture when viewed by itself, is just that - a static picture. All the pictures which make up the animation, are put together in a single file, just like the pages which make up the book, using special animation software. Microsoft GIF animator is just one of many animation creation software packages, and it's free! Once the animation is put together and inserted in your Web page, the browser does the rest. The browser (e.g. Netscape Navigator or Internet Explorer) plays back the animation and brings the picture to life. In case you need software for creating pictures before putting them in the animation creator software, you can use Microsoft Image Composer which too is a free product.

For the purpose of this discussion, we will look into the creation of GIF89a animation. GIF89a is widely used format for animation, invented in - you guessed it - 1989. If you're not familiar with GIF formats, suffice it to know that it is one of the two most popular formats of pictures used on the Internet; the other format being the JPEG format. A GIF file can be either a static picture or an animation. An animated GIF file is nothing but a collection of static GIF pictures assembled together and packaged as a single GIF file.

I could go into an extensive discussion of the exact procedure to create an animation, but I'd bore you to death. Instead, I'll give an overview of what goes into the creation of an animation.

This simple light bulb animation is a made up of just two static images: one shows the bulb in the on position and the other, in the off position. When they're packaged together within a file and played back within a browser, you get the on/off animation sequence. Using Microsoft's GIF Animator is an excellent package to create such an animation. Here's an example of what the screen looks like within the GIF animator, as you're creating your animation. Note that Frame #1 and Frame #3 are the same picture. Frame #2 is a different picture. Since they're arranged in that particular sequence, the resulting animation makes the bulb blink on an off alternately.

As you can see, creating an animation is no biggie. Start small till you understand the fundamentals. Once you have a good grasp on the basics, you can proceed to create complex animation using twenty or more frames.

Here are a few points to remember:

• Make sure that the individual files which will make up your animation aren't too big. The larger the individual files, the larger the resulting animation. Remember, no matter how cool your animation, if it takes forever to download, it'll lose its appeal. Keep the files small.
• Maintain the same color format (black-n-white, gray scale, 16 color, 256 color, etc.) for all the individual pictures. Be uniform in your approach. Also make sure that all the files you use are of the GIF format.
• Going back to the picture book example discussed above, you know that all the pages in the picture book are of the same size, correct? So also the individual pictures you select should all have the same dimensions if possible.
• Your images should have a smooth transition between them. They shouldn't result in jerky animation, unless that's exactly what you're shooting for.
• Animation which repeat endlessly could get annoying, like the swinging monkey above. Sometimes you might want to have them loop only a few times and then stop. Look again at the GIF Animator screen shot above. Do you see a checkbox next to Repeat Forever? That's where you specify if you want the animation to play continuously.

Now that you have some idea of know how animation works, you might want to try your hand at it. Hey, who knows, you might get so good, you'll end up working with Steve (that's Mr. Spielberg to you) on Lost World - Part Deux.

Animation courtesy SSANIMATION and Microsoft Corporation.

Viraf D. Mohta, Hamilton, NJ 
http://www.geocities.com/colosseum/2106/
vmohta@hotmail.com 

Viraf Mohta is the author of the recently published book - The World Wide Web for Kids and Parents. Published by IDG Books Worldwide, it is part of the Dummies Guide To Family Computing and has been awarded the Family Channel Seal of Quality. Viraf works at Merrill Lynch and holds an MBA in Management Information Systems. He is also an entrepreneur, marathoner, and the 1992 World Champion in Full-Contact Stickfighting.

© 1997