Friday, March 29, 2024

Basic HTML: Banners: Animated Images

(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


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

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured