GIF Animation - Animated

An animated GIF file is a collection of GIF picture files, called frames,  which reside within what is 'apparently' a single GIF picture file. When these frames are assembled, they are programmed to appear one after the other in a prescribed sequence and for a prescribed duration, usually a small fraction of a second. In addition, it is determined by the designer whether each successive frame completely replaces the previous frame, or overlays it. Considering all this effort, it is amazing how small the animated GIF object is.

Let me take the mystery out of this for you right now by showing you what's going on 'under the covers'. This understanding will put you in a position to modify GIF animations, or even create your own. I'll show you some interesting examples of what you can do, provide a few cautions in the use of these, and mention 3 products you might look into.

It would be good to start with something quite simple like an animated button that flickers just a bit to attract the user's eye. 

The actual object consists of these 2 graphics which are set to each appear for a half second.  Isn't it amazing how useful such a simple thing like this can be ... and you can make them yourself, rather easily.

If you read my topic called CGI/Perl Scripting, you saw the following 3 graphics:
I'm content to show them this way, but under certain circumstances, either to be a bit eye-catching, or perhaps to save screen space if I had 8 or 10 of these logos, I could have created a GIF animation and it would look like this: 

If you're artistic and skilled with drawing and editing programs, you can make your own animations that would be nicer than what's generally available in the various software products. Alas, Sam is 'artistically challenged' and can't get too much more clever than what you've just been shown. Never say die, however! We can always modify or embellish the artwork of others or create useful  animations using software. Let's have a look.

Here's a pretty decent 'under construction' animation I acquired. It was simple, not offensive, and I selected it to place on my pages while this site was being redesigned.
 

 
Unfortunately it had a white background and I felt that if I used it people would think I was a pretty lame web designer. Yet you see examples of this all the time on many web sites.

So ... I broke out my brand new copy of Animation Shop which came at no extra cost with my PaintShop Pro, Version 7. It had the most amazing feature of being able to globally adjust the background of every frame in the animation. I told it my background was white and I wanted it to be light yellow, but I realized that I could also select 'transparent'. I just can't believe how easy this was.

 

Those programmers at Jasc Software sure are a creative bunch!

While I'm on this subject, I don't mind telling you that PaintShop Pro is my graphics editor of choice. I think I made that pretty clear in my Image Editing topic. They've just done something very, very clever starting with Version 7. They enable PaintShop Pro to call Animation Shop, and vice-versa. The 'vice-versa' is what I found intriguing. You can bring an animation into Animation Shop and do quite a few things to it, including changing its images and coloring in many ways. However, if you need more than this, you can export all the frames to PaintShop Pro and make some really sophisticated changes to them. As you close each frame, it is returned to Animation Shop, and when they all come back, you can save the revised animation. Wow!

You should be aware that most GIF editors also provide the ability to create animated banners. This can come in handy in many, many ways and enable you to provide artistic embellishments that you might not normally be capable of (like Sam). Here's an item I created using the GIF Animator product from Ulead. I had a navigation button on the previous version of this site that I wanted to call attention to.

By the way, you never asked me about the banner at the top of this page. I used my standard banner and created a second one in blue lettering. Animation Shop then created two 'transitions' for me so that I could go from one to the other and back. There are many different transitions available between images and it will create text banners as well. An amazing program and a good example of the 'artistically challenged' web designer doing something artistic with software assistance !!

A few words of caution in the use of animations. Just like the use of sound, it is extremely easy to overdo it. One badly placed or inappropriate animation and you've ruined a web page. My own thought on GIF animations is not to use them if you're not sure. It's probably fine if they meet one of the following criteria.

 

They add a certain levity or humor to a topic which would benefit from it. My Biography topic leads with a large, caricature-ish, clip-art type of animation (the worst kind) but I felt it was perfect for that topic and consistent with the tone of my web site.
 

You want to rotate images for an 'eye candy' effect or swap a series of banner advertisements or fit a lot of material into a small space, or something similar. Normally these animations are well received and are easy on the eyes.
 

You have a lot of contiguous text, like parts of my site, and you want to provide some relief for the reader's tired eyes. An attractive graphic, even an animated one can be just what the doctor ordered for that situation.
 

You want to convey a very simple, non-obtrusive message which requires few if any words. Good examples are an 'under construction' symbol and email icons. or

I don't want to name-drop a lot of GIF Editors, but I have used a few. Here are three that I like that you might look into. Their creators are pretty clever and sell other web design products which may be of interest.

Animation Shop - Jasc Software
GIF Animator - Ulead Systems
GIF Construction Set - Alchemy Mindworks