GIF Animation A good GIF animation program to use is the GIF Construction set from Alchemy Mindworks. Their program is simple to use and has a great tutorial called the Animation Wizard which will take your through each step. The program can be downloaded and used for a short time and the cost of registering is well worth what you get. But don't let the fee fool you, this is one powerful (but oh so simple to use) application.

Some of the things you need to keep in mind before starting are image size (actual size and the file size) and placement of objects in the image.

The image size (height and width size) should be the same for each graphic you are using. The file size for each should be relatively small for each so the final file size of your animation isn't too high. The smaller the file size of the images and the number of images you are using to make the animation will determine the actual file size of the finished product.

The ball images below can be used to make a simple animation. Each image is the same size and the ball is placed in the exact spot. The file size is very small which will allow you to add more graphics to the animation without creating something too large for a web page.

This is the end product you will get when you run the above colored balls through your animation program and make it transparent.

Making That GIF Animation

2. Go to the Insert button. When you click on it, a menu will pop up. If you are planning on looping your animation (and for this tutorial we will loop it) go ahead and click on Loop. After you have added your loop, you can double click on it to select how many times you want your animation to repeat itself.

3. The next thing you want to do is add in a Control from under the Insert button. Once this has been added you can change the transparency, how long of a delay between each image you have and if you want previous images removed (which helps in your transparent animations). You don't have to change these flags for your animation to work, this just comes in handy for some fine tuning of your images. The delay selection depends on you image itself. 1/100 of a second is the fastest setting and the higher you go the slower it gets. I tend to use 20/100 of a second but it is all up to you. You can change this in each Control if you want to keep it all at the same speed.

4. Now you are ready to add your first image. It is easy to remember what sequence you want your images to run if you number them 1, 2, 3, ... in the image name. So go back to that Insert button and click on Image. Choose the first graphic you want to begin your animation (or whatever comes next if you are repeating these steps). You may get a menu box which asks about a palette. I use "Use this image as the global palette" and then hit ok.

5. Now just do back and repeat steps 3 and 4 until you have selected all of your images you are using for the animation.

6. Now that you have all your images chosen test it out by clicking on the View button.

	Clicking on this image will take you back to the index page of the HTML Tutorial.
	This button will take you back to the index page of the Graphics Tutorial.