Chloe's Animation Project

Step 2

Now that you have your images stored separately, use the the GIF Construction Set to put them together. This program has a construction wizard which can build the animation for you. However, as this method uses a global pallet for its colors, the colors of your Catz might shift.

Create a "New" animation under the "File" pull-down menu. The program automatically inserts header information for you. The default size is shown, but it will adjust itself to the proper dimensions after all your images are in place.

Next, use "Insert" to insert your first element. The first thing to insert is the LOOP function. Leave out LOOP if you do not intend your animation to loop continuously on the web page.

The next insertion should be CONTROL. This is an embedding of the commands on how to treat the next image. You will be editing this command later after all controls and images are loaded.

Finally, "Insert" IMAGE. The program will show you your directories to pick an image. Locate the image you saved previously and click on "OK". The first image will prompt you for a color palate. Always use the first image as basis for the color palate. This will prevent shifting of the colors on your web page.

Repeat the process of inserting CONTROL and IMAGE until the final image has been loaded.

Go back to the first CONTROL you inserted. You now need to "Edit" the information in the CONTROL. A dialogue box will show you the various things you can control with the image. If you are using a transparent color, checkmark the transparent color box. A black button with the number 0 will become active. You can either click on this button or on the eyedropper button next to it to pick the color in the image which needs to be set to transparent.

Still inside the CONTROL edit, you need to determine how long the image will be on screen. Currently, the number is set to 1. You need to increase that number. The number represents 1/100ths of a second on the screen. A good time for a web animation is 50, making the time 50/100ths of a second (or half a second) of the image appearing on screen. You can adjust this number higher or lower later to make the animation speed up or slow down.

Finally, you need to determine what will replace the image before the next image appears in the animation. When using transparent backgrounds in the animation, you need to replace the image with "background." Anything else will make multiple images appear. If you are using a solid image with no transparencies, replacing the image with "nothing" is acceptable as the next image will replace the one on the screen.

Once all the CONTROLs have been edited, "Save" your animation. You can "View" the animation in the program, or use your web browser. Note that the animation program shows the animation much slower than your web browser will, and transparent animations will seem to "blink" at you as each frame is replaced by the background color. The best test for an animated image is on a web page. Check for drastic color shifts and fluidity of movement.

Don't be afraid of going back into the animated image and deleting or inserting images into the frames. Just remember -- for every image, there MUST be a CONTROL!

* Continue the project
* Return to animation project
* Return to AJ's Catz


Lisa D. Jenkins / ajscatz@bigfoot.com