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:
Now all are downloaded. Let's make the animation. Follow the instructions straightaway:
- Get out of your browser and open the gif Construction program you downloaded.
- 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.
- Go under the FILE menu and choose NEW.
- 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."
- This is not the correct size. The four arrows that you
downloaded are only 30x30 pixels. Click twice on the highlighted HEADER gif89a line.
- 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.
- 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.
- 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.
- 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.
- Now it's time to start placing images. Remember this: All images must have a CONTROL command before them. Always... no exceptions.
- Click on INSERT and choose CONTROL. CONTROL
should now be on the screen.
- Click on the highlighted CONTROL. Another box should
appear. It should look like this:
- 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.
- Click again on INSERT and choose IMAGE.
- 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.
- Choose INSERT again and select CONTROL.
- Click twice on the line and again change the 100ths of a
second to 15. Click OK.
- Choose INSERT again and choose IMAGE.
- When the box pops up, find "arrow3.gif" and choose it.
- Follow the format above again and place another
CONTROL, changing it to 15 100ths of a second.
- Again, choose INSERT and IMAGE and place
- Place another CONTROL, changing the 100ths of a second to 15 again.
- Place the last image "arrow4.gif."
(See, you're doing the same thing again and again... control, image, control, image, control, image, etc., etc.)
- This is what should be written in front of you:
HEADER gif89a SCREEN 40x40
IMAGE ARROW1.gif 30X30,256
IMAGE ARROW3.gif 30X30,256
IMAGE ARROW2.gif 30X30,256
IMAGE ARROW4.gif 30X30,256
- Want to see it? Click on VIEW. The screen will go
black and the arrow will spin around.
- To get back, hit the ESC key.
- Save the image animation by choosing SAVE AS under the FILE menu.
- 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
- 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:
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]
[Making the Images]
[Making the Animated gif]
[Placing It on a Page]
[Its Not Working!]
[Back to the HTML Home Page]