So, You Want An Animated gif, Huh?

Use these to jump around, or read it all...
[The gif Compiler] [The gifs]
[Making the Images] [Making the Animated gif]
[Placing It on a Page] [Its Not Working!]

     Ah, the animated gif. Or as I call it, the anti-java. The thing above is an animated gif. It should be moving, at least. As far as I know, animated gifs will run on all levels of browsers. The reason is the way the animation is created. This is not something created by a CGI or a JavaScript. What is actually happening is that the browser (like Netscape) is simply placing one gif after another into that same space. Your eye just perceives it as a fluid movement, kind of like a movie.

     If you're interested in creating an animated banner, go here.

The gif Compiler

     Before we go any further, you must first go and get a program. You will need the gif Construction Set for Windows and W95 by Alchemy Mindworks Inc. It is (at the moment, at least) a shareware program. That means it's free, but if you like it, you are requested to send in a few bucks. You need this to complete this tutorial. So go get it and install it on your computer. Here are a few links I know of that offer the Construction Set:

[W3.x 16-Bit Version: gcs16n.zip] [W95 32-Bit Version: gifcon32.exe]

If you have trouble using these links try Alchemy Mind Works.
     The links above send you to the main page offering downloading and downloading mirror sites.

     MAC users should try here for Animated gif Kits.

The gifs

     Did you go and get the gif Construction Set yet? Did you install it on your computer? Okay, good. Now, on to the hard part. No, not the creation of the animation, but rather the pictures that you will animate.

     I know you've seen a flip book. It's one of the books that have a little picture up in the right-hand corner of each page and if you flip the pages quickly enough it appears as if the little pictures are moving. It's the same principle as a movie or video tape. A bunch of still pictures roll past rather quickly (24 a second for film, 30 a second for video tape) and your eye sees it as movement.

Where do I get the pictures?
     You make them! (I wish you hadn't said that.) Well, you could go out into the world of cyberspace and find them. People are now offering pics and animated gifs. But what fun would that be?

I don't have a program that makes gifs!
     Why not? It's free. Go to that shareware.com I spoke of above and get a program called PaintShop Pro. It's really easy to use and makes really nice pics out of nothing. It's also a good program to run a scanner from and to manipulate the images you create. The best endorsement I could give is that it's what I use to run my Logitech scanner. So go get it.

Making the Images

     You're not going to send me away again, are you? No. You have everything you need now. Plus you've probably filled a good 12 Megabytes of space on your hard drive. (You are sure you want these animated gifs, aren't you?)

     When you create the gifs you need to follow a few guidelines. These aren't my guidelines, either. These are the specs the gif Construction program requires:

    • You must save the images in gif (Compuserve) format.
    • You must save the image at the 256 color level.
    • All the images you use must be the same size.

Why?

     The easy answer is that the gif Construction program requires it. Actually, the reason is that you are literally creating a little movie frame by frame. All the frames must be the same size, they must all be in the same format, and all saved at the same color level.

Here are a few tips...
     1. Create a template for your images.

     Remember the clock animation I did above? I created a white square using PaintShop Pro. I then drew a circle in the middle of the square and saved it, at the 256 color level, as "clock.gif". I was then able to bring that template up, draw a line to one o'clock, and save it under another name. Ditto for two o'clock, three o'clock, four o'clock, etc., etc., until I went the whole way around the dial. That way I was sure the circle would remain stable through the complete animation. With me still?

     2. Do each of the animations on its own disc. (You'll thank me for this later.)

     3. Make your gifs as small as you can.

     4. Make your gifs with the fewest number of bits possible.

     The reasoning for #3 and #4 is obvious. Remember that the browser will load one gif after another giving the impression of movement. If the gifs are huge, it's slow. If the gifs are small and made up of fewer bits, they will load faster and look better.

Making the Animated gif

     By the way, you may want to print this page now. It'll make it so much easier to animate the gif if you have the instructions right in front of you.

     First you're going to need some gifs to animate. I shall give you four from my collection for you to use. These are four arrows, all the same size, all saved at the 256 color level. What we will make is a four-panel animation of an arrow spinning to the right, round and round. Dull yes, but good for your first shot at the process. Download all four and place them all in a directory. Do not change the names of the images. Also, don't worry that the numbers appear to be out of order. I'll fix that when we make the animation. My suggestion is to place them all in an empty directory like TEMP. It'll just make it easier.

Click to Download each:
[Left Arrow] [Right Arrow] [Up Arrow] [Down Arrow]

     Now all are downloaded. Let's make the animation. Follow the instructions straightaway:

  1. Get out of your browser and open the gif Construction program you downloaded.
  2. A box will open with some buttons along the top. The buttons read "VIEW, INSERT, EDIT, DELETE, etc., etc. It looks like this:

    If what you have is close to this, you're ready to go.

  3. Go under the FILE menu and choose NEW.
  4. A highlighted line will appear that states HEADER gif89a SCREEN 640x480. 640x480 deals with the number of pixels that make up the image. Remember, this is a computer image. It is made up of little dots of color. Those little dots are called "pixels," short for "picture elements."
  5. This is not the correct size. The four arrows that you downloaded are only 30x30 pixels. Click twice on the highlighted HEADER gif89a line.
  6. A box should pop up where you will again see the numbers 640 and 480. It looks like this:

    Change those numbers to 30 and 30 and click OK.

  7. You're back to the original screen and the line should now read 30x30. Does it? If not, try again to change the numbers. These numbers will denote the size of the images you are using.
  8. You must now tell the system what you want to happen regarding the movement of the gifs. You can do other things, and you can learn them on your own, but for now we are going to LOOP the animation, meaning the pictures will continue to go one after the other at all times. The gif above is looped.
  9. Click on the button marked INSERT. A box will pop up. It looks like this:

    Choose LOOP. Poof! It should now say LOOP under the HEADER line.

  10. Now it's time to start placing images. Remember this: All images must have a CONTROL command before them. Always... no exceptions.
  11. Click on INSERT and choose CONTROL. CONTROL should now be on the screen.
  12. Click on the highlighted CONTROL. Another box should appear. It should look like this:

  13. See in the box where it says 1/100th of a second? That's the time span between the current gif and when the next one will load. More 100ths to make it slower, less to make it faster. For now, insert "15" 100ths of a second. Choose OK.
  14. Click again on INSERT and choose IMAGE.
  15. Another box will pop up giving you the ability to find and choose the images you downloaded from me. Find "arrow1.gif" and choose it. It should appear on the screen.
  16. Choose INSERT again and select CONTROL.
  17. Click twice on the line and again change the 100ths of a second to 15. Click OK.
  18. Choose INSERT again and choose IMAGE.
  19. When the box pops up, find "arrow3.gif" and choose it.
  20. Follow the format above again and place another CONTROL, changing it to 15 100ths of a second.
  21. Again, choose INSERT and IMAGE and place "arrow2.gif."
  22. Place another CONTROL, changing the 100ths of a second to 15 again.
  23. Place the last image "arrow4.gif."
    (See, you're doing the same thing again and again... control, image, control, image, control, image, etc., etc.)
  24. This is what should be written in front of you:

    HEADER gif89a SCREEN 40x40
    LOOP
    CONTROL
    IMAGE ARROW1.gif 30X30,256
    CONTROL
    IMAGE ARROW3.gif 30X30,256
    CONTROL
    IMAGE ARROW2.gif 30X30,256
    CONTROL
    IMAGE ARROW4.gif 30X30,256

  25. Want to see it? Click on VIEW. The screen will go black and the arrow will spin around.
  26. To get back, hit the ESC key.
  27. Save the image animation by choosing SAVE AS under the FILE menu.
  28. If you have any problems, you will now get a warning and what to fix. If not, good job. Save it under a name you can remember.
  29. The program will undergo a long list of movements for your entertainment while it compiles your animation. Then it's done... nothing to it.

Placing It on a Page

Place the animation (the last name you gave it) just as you would any image. Use the Image Command format:

<IMG SRC="animation.gif">

Don't try changing the size or anything else. Let it be just as you saved it.

It's Not Working!

     Strange, huh? But did it work when you clicked on the VIEW button? Yeah, I have found that, too. Try FTP-ing the animation and all the little images you used to make it onto your server and then go and look at it. I'll bet it works.

     These things are really touchy. I have found my 486 Netscape 1.1 will only run them when they are loaded on the server. 2.02b will run it off of the hard drive. My W95 computer will run it all straightaway. Weird, huh?

     I hope this helps. It really is easier than it may seem at first. Good Luck.

[The gif Compiler] [The gifs]
[Making the Images] [Making the Animated gif]
[Placing It on a Page] [Its Not Working!]

 

[Back to the HTML Home Page]