Basic HTML: Banners: Animated Images

Joe Burns

(with updates by editorial staff)

Use these to jump around or read it all
Read This First
Create Animation List
Add Change Times
Get Images In Animator

Read the Original Animation Tutorial First!

I should state right up front, that if you haven't yet read the original Goodies Animation Tutorial then you may want to do that. I am going to assume you have read it as you start this tutorial. This primer is for the creation of a banner. Since I have already written a piece on creating animation in general, I won't be going over it again here.

Create Your Animation List

We have all the bricks and mortar. Now, let's build the house. It is my opinion that when you are using a long series of images, it is best to write out what images will be used in the order they will be used. Remember in Banner Primer #1 I said for you to draw out your ideas? This is where you will try to make your vision come true. Here again is the final animation in this series of primers:

You should be quite familiar with the 10 images that will make up the animation. Here they are in the order they will be used:

banner1.gif (full ticket)
banner2.gif (torn ticket)
banner3.gif (torn ticket)
banner4.gif (torn ticket)
banner5.gif (torn ticket)
banner6.gif (most torn ticket)
banner7.gif (Admit)
banner8.gif (One)
banner6.gif (most torn ticket)
banner9.gif (To My Home Page)
banner10.gif (Click Here)
banner6.gif (most torn ticket)
banner10.gif (Click Here)

Add Change Times

Next, take that list and denote how long you want it to be between each animation cell. The Gif Animator program works in 10ths of a second, but since we don't have the cells actually denoted in the animation program, I do it through a simple method of "S", "M", and "L" (meaning short, medium, and long) spans of time. I consider "short" to be around a quarter of a second, "medium" around a half a second, and "long" a full second or more. The time is how long it will be before moving to the next animation cell.

Here's what this banner looks like with times:

banner1.gif (full ticket)
(M)
banner2.gif (torn ticket)
(S)
banner3.gif (torn ticket)
(S)
banner4.gif (torn ticket)
(S)
banner5.gif (torn ticket)
(S)
banner6.gif (most torn ticket)
(M)
banner7.gif (Admit)
(L)
banner8.gif (One)
(L)
banner6.gif (most torn ticket)
(S)
banner9.gif (To My Home Page)
(L)
banner10.gif (Click Here)
(L)
banner6.gif (most torn ticket)
(S)
banner10.gif (Click Here)

Notice that the time is longer when there is text on the screen. I have found that a good second is required. Remember that you know what this says. The person who is seeing it for the first time does not. They have to read it. Give them time. Don't hustle through this.

Get The Images In The Animator -- Then Set Times

I have found that nothing wastes more time than trying to set times as you place each image in the GIF Construction Kit. My suggestion is to get them all in the animator without setting any times. Just remember to have a control before each image and the LOOP command at the beginning. Yes, you want the banner to LOOP. Those that just go through the animation once will not attract as much attention.
Again, don't worry about setting control times yet, just get it all in there. We'll set times after this step. The GIF Construction Kit screen for this banner will look like this after getting all the images in order:

Now that we have the skeleton, we can start to enter actual times. Above, we wrote out all the images with an "S", "M", or "L" in between each image. That's a very close resemblance to what is showing in the GIF Construction Kit. All you need to do is click on each control and enter 20 for the short changes, 50 for the medium changes, and 100 for the long changes. Then run it by hitting the VIEW button.
Watch it run a few times, then go in and jimmie the times that look too long or too short. Believe me, doing an animation following this method will save you a bunch of time. Trying to enter the times while entering the control items to the GIF Construction Kit very seldom works out right. I say to go with the big picture first and whittle away after you have it.

Once you have it set to your liking, save it as banner.gif. Yes, I know that is the name of your original template, but we don't need it anymore and banner.gif is a really good name for a banner.

Now What?

Now you've got this thing. Now what? That's what Banner Primer #7 is all about.

Read This First
Create Animation List
Add Change Times
Get Images In Animator