Generating an Animated GIF File in Adobe ImageReady
CS 142: The Mathematics of Computer Graphics, Spring 2007

Once you have generated the animation frames, you need to generate the animation from these files. One way to do this, is to use Adobe ImageReady to create an animated gif file. Note that Adobe ImageReady is available on the five computers in Collins 412. This room is typically locked, however, in class I will tell you how you can get in.

Directions for Creating the Animated GIF

• Keeping files organized is very important when you are dealing with large numbers of animation frames. Create a Lab7 folder on your H-drive and make sure that your animation frames are in a subfolder of Lab7 called something like "frames". For Adobe Ready to work properly, you must have nothing else in the folder that contains your images.

• Open up ImageReady, and select the menu File; Import; Folder as Frames..., Navigate to your "frames" folder, and then click the "OK" button.

• You should see a window labeled "Animation" that contains a strip of your images.

  Select all of the images (click, shift-click). Put the cursor over one of the "0 sec" labels, right-click, and choose "0.1 seconds". This will slow the animation down by making each frame last 1/10th of a second.

• To save the animated Gif file, click on the window labeled "Original". Then go to the menu and choose File; Save Optimized As... Navigate to where you want to save your animated Gif, enter a name for your file, and click save. Exit ImageReady (you don't need to save the ImageReady file if you don't think you will use it again.)

• In Windows, go to the folder containing the animated Gif file, double click on it, to watch it run.

• To place the file on your webpage, move the animation file over to your public_html folder. Also, move one of the png files from the animation (or even better, generate a new 160x120 png file for some clock value). The png file will appear on your webpage. When it is clicked, it should link the animation file. To get this all to work, place the following line in your html document: <a href="myfile.gif"><img src="myfile.png"></a> where myfile.gif is the name of your animated file.