Move your mouse over her.
Then, click the picture.
To stop, move your mouse
out of the picture.

The above GIF animation consists of the following three transparent GIF images.

To create a transparent GIF animation, you need a Graphics program that allows you to do just that.

My favorite program is JASC Paint Shop Pro. You can download it from this site:

http://jasc.com/

You can use its trial version free of charge for 60 days.

If you don’t know how to create a transparent GIF image, please visit this page: How to Create a Transparent GIF Image.

Once you come up with a set of transparent GIF images such as the three images above, you now start to create a GIF animation. You need an animation construction program. My favorite is JASC Animation Shop. You can also download its trial version from the above JASC site.

First, you click the animation wizard icon as shown as above. Once a dialog box appears, check the radio button for “transparent”.

Because the size of each picture is different, you have to instruct where to place each picture. In this case, check the radio button for “Upper left corner of the frame”.

Since the second and third pictures are much smaller than the first frame, you also have to instruct how to fill the rest of each frame.

Choose “With the perceding frame's contents”.

In the above dialog box, you can set up how many times the animation will be looped. You also have to instruct the program how long you want each frame to be displayed. In this case, I’ve chosen 0.6 second.

Now, you select images. Once you are finished, click the next button. The program will create an animation and display each frame as shown below:

When you want to change the duration of each frame, you can do it on this screen. If you like, you can also add special effects such as wipe, disolve, split, mozaic, and so on.

To preview your animation, click the icon as shown above. A preview window will pop up.

By the way, the checker-board pattern in the background means that the frame is tramsparent.

How to set up the animation as shown at top

I will explain it in the next page. Click the following link:

How to present a GIF animation

Related Links

• Optimize Your Animation!
  
  
• How to Use an IMG Tag
  
  
• Javascript Animation with Some Tricks
  
  
• How To Handle Multiple GIF Animation Presentation
  
  
• Dramatize your Pictures with Event Handlers!