Animation Basics

Animation is the illusion of motion created by viewing a sequence of pictures in rapid succession. Each picture is slightly different than the previous one, and when viewed quickly it appears to be moving. Just like your Saturday morning cartoons, or stop motion special effects used in Godzilla or the original King Kong.

Making an animation for the computer is just the same. You're making a series of pictures to be viewed one after the other to simulate motion. The one difference being the animation is usually looped, so it plays over and over. If you can use Microsoft® Paint, you can make an animation. More advanced software will, of course, let you make more professional looking animations.

Each individual picture in an animation is called a Frame. A frame can be composed of pictures, text, or a combination thereof. Once you have created all your frames, you're ready for the next step - animating them.

Of course, to put it all together you need a gif animator program. There is no shortage of those on the marketplace. Just type "gif animator" into a search engine and you'll see what I mean.

The various animation programs each have their good points and bad. Some have snazzy bells and whistles to make cool effects, some require an IQ of no less than 150 and a PhD in Computer Science to figure out. Which one you choose is up to you. Most software vendors will offer a free trial. With any luck you'll figure out how to use it before the trial expires! Once you find one that's easy to use, buy it. The enjoyment you'll have will be worth the price.


Below is a short series of pictures or frames you could easily make with MS Paint...

Smiley Smiley Smiley Smiley Smiley
Smiley Smiley Smiley Smiley Smiley

When we use our gif animation software to put them together, we get this:

Finished Smiley

The software will allow you to set the duration of each frame, also known as frame delay. This is how long a frame is visible before the next frame is displayed. By changing a frame's duration, you can make the smile last longer, or roll the eyes slower or faster. This animation has a duration of 0.5 seconds for the first frame, 0.1 seconds for frames 2 to 9, and 1.25 seconds for the smile.

As mentioned before, each program has it's own way of doing things. An example follows...

With Ulead Systems® latest software, Ulead GIF Animator 5 (UGA 5), you make animations with Objects. The following are the objects used to make the frames above.

Smiley Object: FaceSmiley Object: EyeSmiley Object: EyeSmiley Object: Smile

These objects are simple enough to create in Microsoft Paint. In this instance, UGA 5 was used, as it has a nice set of paintbrush tools similar to Paint.

It may be of interest to note that UGA 5 will let you edit the objects with an external image editor. Supported image editors are Adobe® Photoshop®, Jasc® Paint Shop Pro, or Ulead PhotoImpact. Any program that will save in either Photoshop's ".psd" format or Ulead's ".ufo" format can be used.

UGA 5 will also let you use most Photoshop-compatible filters (.8bf extension) as plug-ins. Smiley Guy 3DWith an external editor or a plug-in filter, our Smiley Guy above can become a more visually appealing animation. The Smiley Guy version on the right used Photoshop 5.5 with the Extensis PhotoBevel 2.0 Solo plug-in filter... Unfortunately, PhotoBevel 2.0 is not compatible with anything except Photoshop.

UGA 5 imports Photoshop's ".psd" format of layers as objects. This means that each layer of a Photoshop image will be opened as an object by GIF Animator 5. These objects can be positioned where you want in each frame, or hidden in a frame if desired.

With UGA 5, you create the number of frames you'll need, then in each frame you position the objects where you want them to be. The screen shot below shows 10 frames along the top. At the bottom left is the Object Manager, which lets you select objects, arrange the layering order, make an object visible in a frame (or remove it from a frame), move or lock an object's position, delete or duplicate, and more.

Ulead GA 5 Screen Shot

For my tutorial on Ulead GIF Animator 5's basics, click the following banner...

Ulead GIF Animator 5 banner


Whatever software you decide to use to create and animate your frames, the old saying, "practice makes perfect" is the key. Don't give up, just keep trying. If you're stuck, read the software's Help files. If you're still confused, try the vendor's web site.

Valid HTML 4.01 Transitional  Valid CSS!