Why use GIF animations?

There are various ways to play movies on a Web Browser, but they usually require extra programs called Plug-Ins to be installed on your computer.  However,

When should GIF animations be used?

• They are good for small image animations on a Web Page
• They are good for short animation sequences

Let's get down to the serious business of making an animation!
There are two kinds of animation:

Or you can use some combination of the above two methods.

My frog movie is an example of the first kind of animation. There are six different drawings of the frog.  The animation at the top of the previous page is an example of the second kind of animation.

You can also add looping to an animation to have it repeat the sequence over and over, but don't overdo this if the animation is agressive or intrusive.

When displaying information on a Web Page, there isn't much space left to work with after the browser has taken up its share of the screen space for menus and buttons, so you will notice that a lot of advertisements on Web Pages are in the form of horizontal banners.  I find that animations also work well in this format, as they wont scroll off the screen so quickly before the user has had time to see them.

Interlacing is used in GIF files to make images appear to download faster on slow browsers.  With interlacing, the display of an image is built up gradually, in several scans over a web page.  However, since an animated GIF cannot start to play until it is fully downloaded, there is not much point in making an animated GIF file interlaced, unless the first frame is worth seeing as it downloads.

Backgrounds for Animation
When you create an animation, you will need to consider what kind of background you want behind your moving objects.

You have several choices:

The last one is the most difficult, since not all web browsers support a cleanup operation after the animation moves on to the next image.  Here is an example of the sort of thing which can happen.  As the construction worker moves the pick down, the animation leaves behind a trail of images showing the pick movement. This animation has a transparent background, allowing the background pattern to show through.

     
You could set the background color inside the animation to the same color as the document background.  However, the safest way is to use a solid background as this will always look good on all Web Browsers.

Here is an animation with a solid blue background.  This is a fairly simple sequence to animate.  It consists of four different drawings which loop, and the sausage image is in a fixed position on the screen, so that you don't have to worry about the position of each frame, and so this animation uses a reasonably small GIF file.

I created these last two animations using GIF Construction Set.  The drawings for the construction worker and for the sausage come from the samples provided with Sausage Software's program, Egor Animator.