ANIMATION

To find animations that you can use on your web pages search at www.google.com for animations or animated applets.

There are 21 graphics on this page so please be patient while the page loads. Thank You.

Graphic Animation is quite simple if you have three things:

  1. Graphic Program.
  2. Graphics Animation Program.
  3. Artistic Ability.

I can help you with the first two but the last, Artistic Ability, well, you are on your own.

Graphic Program

There are a number of program that can create or edit graphics in various formats such a JPG and GIF, which are the two most widely use graphic formats on the web. Most people are familiar with Paint Shop Pro which I discuss in some detail in its own topic (see menu above). For this discussion on animation I will assume that you have access to such a program.

Graphic Animation Program

A Graphic Animation Program does nothing more than group together, in a specific order, various graphical images and displays them in specific time intervals. Think of this like a file strip, i.e. a movie file. Each frame in the file is one graphic. However, a Graphic Animation Program can vary the time that each segment of frame stays on the screen.

There is a nice free Graphic Animation Program called GIF CONSTRUCTION SET which can be downloaded at: http://www.mindworkshop.com/alchemy/gifcon.html. If this link doesn't work then try at DOWNLOAD.COM.

Below, I will show you how to make an animation using just three frames or graphics.

Using GIF Construction Set

Let's start with the three graphics we will be demonstrating the program with:

SANTA1.GIFSANTA2.GIFSANTA3.GIF

I think that you can see where I am going with this. Now open GIFCS and we see this screen:

Now, click on FILE and get this pull-down menu and then click on NEW (highlighted here):

to bring up the screen where we can begin making an animation.

The main buttons are:

  • VIEW - to view the animated file.
  • INSERT - put an object in the file.
  • EDIT - edit an object in the file.
  • DELETE - delete an object in the file.
  • MANAGE - Advanced details.
  • ABOUT - Show the Shareware Notice.
  • SETUP - More Advanced Features.
  • EXIT - exit GIF Construction Set.

We will only need VIEW, INSERT, EDIT, DELETE, AND EXIT along with the SAVE OPTION which is in the pull-down menu under FILE in the toolbar at the top of the screen.

Every animation is made up of objects:

  • HEADER - Details of the animation file.
  • CONTROL - How to display an image and for how long.
  • IMAGE - What graphic to use.
  • COMMENT - Comment that is not displayed.
  • LOOP - How many times to display the animation.
  • PLAIN TEXT - Text to overlay an image.

In this Santa example we will only use: HEADER, LOOP, CONTROL, and IMAGE.

HEADER

The first thing we have to do is set the size of the animation, which will be the size of the graphic you are using. In the Santa case each graphic is the same same (which is what you generally try to do so I will ignore the case where the graphics are of different size), i.e. 143 X 188 pixels. So, we open up the HEADER by highlighting it and then click on EDIT to access the data there:

Change the width to 143 and the height to 188 and leave everything else alone. Click OK.

LOOP

Now we are ready to add our 2nd object, the LOOP. Click on INSERT to bring up this little window:

and click on LOOP which will add this line to the file:

Now we have to EDIT the loop so, since it is already highlighted, click on EDIT to see:

The number, 1000, represents 1000 iteration. Now this is quite a number of iteration and rarely will a surfer be around for an animation to loop that many times. So, if you want you can reduce this to say 100 or 200 or whatever you wish. Click OK and then it is time to add an image to the animation.

CONTROL

Now we are going to insert a series of two objects: A Control and An Image. First, the control. Click on INSERT and then on CONTROL which will add the CONTROL object just below the LOOP like this:

and we will then EDIT this CONTROL to enter the time or DELAY that the following image or graphic will stay on the screen.

Set the delay to 15 or 15/100 of a second. Next, we have to set the graphic so the background doesn't show on display. So, check the box that say, "TRANSPARENT COLOR" and click on the black colored box next to the eye-dropper.

which will bring up the color palette from which to select the color.

In this case we select the light blue-green color (2nd from left) and see this final CONTROL:

Click OK and we are done with the control.

IMAGE

Now we can add the 1st of our three graphics to the animation, SANTA1.GIF. So, click on INSERT again and select IMAGE. This screen will allow you to select the file anyplace on your computer. I have the files stored in a subdirectory, which is like this:

Click OK. Now each graphic that comes into the animation has to have colors assigned to it from a color palette. Since this is the first graphic, we use its colors as the GLOBAL PALETTE. So, in the palette screen, which appears when we select the graphic we set the color palette to this graphic, Santa1.gif.

and then our animation file will look like this:

The above shows our SANTA1.GIF to the right in a space reserved for displaying the images.

COMPLETE ANIMATION FILE

Now we repeat inserting a CONTROL and IMAGE for SANTA2.GIF and SANTA3.GIF.

NOTE: IN THE CONTROL FOR SANTA2 AND SANTA3 WE CHECK THE "Dither this image to global palette".

The complete file now looks like this:

If you click on VIEW the animation will be display like this but in the full screen. To return to the animation file, press the ESC key when in the program.

I hope that from this simple example you can go on to make your own animations. The graphics you use can be any graphics, even simple text banners.

This program can be use to make you own Photo Album with what ever photos in it you like. Below is an example I made up to illustrate the Photo Album concept: