Animation Library

Animation Tutorial

	Preparing Images
	Creating the Animation
	Transparency
	Saving your completed Animation
	Putting your Animation on the Web

• First thing you need to do is make a series of images that will look like an animation sequence.

           
           

• Each frame of the animation changes just slightly except for the main size of the image. In this case all of the images are 75 in Width and 72 in Height. If you don't use the same size, each frame of your animation will shrink and grow as the image changes.

• You will need to save each frame of the animation into a GIF format. Use a different name for each frame image as this will be necessary when putting the animation together.

• Now you will need to use a Gif Animation program to put all of these images together to make them one file. For this tutorial we will be using the Gif Construction Set .

The code of an animated gif looks like this in the Gif Construction Set
(For this example I'm using the code for the images above)


Code	What this means
HEADER GIF89a Screen (75 * 72)	Specifies the Width and Height of the entire image.
LOOP	This indicates how many times the animation loops around, you can specify from 1 to 1,000 or tell it to repeat forever.
CONTROL	This controls the first image. You can specify a transparent color (In my example I specified a grey transparency) and also give it a delay time. (Say you want a particular part of the animation to stay there longer than the rest, then this is the part to do it in.
IMAGE 75 * 72, 256 colours	The first image in the sequence
CONTROL	Same as above, but for the second image.
IMAGE 75 * 72, 256 colours	The second image in the sequence
CONTROL	Same as above, but for the third image.
IMAGE 75 * 72, 256 colours	The third image in the sequence
CONTROL	Same as above, but for the fourth image.
IMAGE 75 * 72, 256 colours	The fourth image in the sequence
CONTROL	Same as above, but for the fifth image.
IMAGE 75 * 72, 256 colours	The fifth image in the sequence
CONTROL	Same as above, but for the sixth image.
IMAGE 75 * 72, 256 colours	The sixth image in the sequence

• Control Blocks can be inserted into the GIF file. Only one should be inserted before each image. It should be placed immediately before the image it is meant to control. When clicking on the control block another window will appear which will let you set the transparency color
• Click on the check box for transparency. The default transparency color is 0 (usually black).
• Click on the color box beside it and you will see your image
• Select the color that should be transparent.
• Only one color can be transparent per image.
• You must insert a control block with transparency set before every image to get an animation with a consistently transparent background.

• After you have put all of your images into the gif animator you will want to save it. Save it using an original file name (not the same file name you used for the single images just in case you want to change things later).

Example of the finished animation:

• You will want to try and make your animation as small as possible in file size. Not to many people will want to stick around for an animation that is over 100 KB in size.

• First thing you need to do is to upload the Animated Gif into the server that hosts your website.
• Next you will have to put in the HTML coding on the page that you want the graphic to be located in.
  
• The code will look something like this.
  <IMG BORDER=0 SRC="filename.gif" ALT="Description" WIDTH=00 HEIGHT=00>
  
  
• Of course you need to change the Width and Height numbers to specify what it is for your image.
• And then upload the HTML file into your server.

Now everyone who visits your website will be able to see the animation on your site.