To Temple College Class logo R. Craig Collins > Web Page Design > Gif animation

GIF Animation © R. Craig Collins, 2005/6

Creating an animated .gif file is actually a pretty straight forward proposition, requiring just three basic steps: create the original images, import the images into an assembly program (such as Gifcon32 or unFREEz), then optionally add controls.

An important note is that many graphic programs cannot display the resulting animation... you may need to use your browser to view any animation you create. (Right click the file, Choose View With and choose your browser)

Note: If you don't want to create animations, many are available online, just be careful that you don't violate a copyright.

Creating .gif's

Create a new image, defined at 256 colors, in the size desired. The smaller the better. For this example, an image, below, was defined about 100 by 100 pixels.
New Picture dialog box

If using Microsoft Paint
Click here is using Windows 7 version of Paint

Paint Options --> Paint Image Attributes

If you are using Paint to create your .gif file, you may want step by step directions.

When complete, save as a .gif file.

Repeat the creation process, making sure that the images are the same size. Below, all the images use the same default palette of colors, and are the same size, in this case 50 X 50.

Sample Image 1 Sample Image 2 Sample Image 3 Sample Image 4 Sample animation

Animating .gif's

There are many tools that you may choose to animate the above files. A simple, free program, is unFREEz, available at
http://www.whitsoftdev.com/unfreez/

You simply drag your .gif files in, and set the frame delay between the images.
Unfreez screen shot

View a video on using unFREEz

An important note is that many graphic programs cannot display the resulting animation... you may need to use your browser to view any animation you create. (Right click the file, Choose View With and choose your browser)

Another project, using small insertions ...
THIS ANIMATION MAY NOT WORK CORRECTLY WITH NETSCAPE NAVIGATOR;
a new, cross-platform version is under construction.
Navigator does not implement the standard 'replace by previous' attribute, forcing me to cover the final movement with a static shot using the 'remove by nothing' attribute...
Complex Animation

OPTIONAL: Getting More Control out of Animated .gif's
Open a program similar to Gifcon32, a .gif construction tool. Download a copy of gifcon from Alchemy Mindworks here.
You would then either use File/Animation Wizard, or proceed as follows:
  1. Open a new container by selecting File/New
  2. Insert the files, in sequence
  3. Insert a loop, if desired, and finally
  4. Insert a Control for each image.
Gifcon animation control screen

You may be prompted to use the global palette of 216 colors; this is highly recommended to allow display without color shifts on systems using 256 colors.

Editing the controls

Edit each control and set the delay; 30-70 is a good range that works well on most computers. Do NOT use 0, or the .gif will misbehave! Then set the replacement to Replace by Background, NOT Replace by Image as it again will misbehave on some browsers.

Creating transparent backgrounds

You may also set the background to be transparent here. To do this, click on the dropper tool, then click on the color to be transparent when the image is displayed. You are now ready to save the new 'package' (using a name not used by one of the single images is preferred).
Gifcon dropper control

You may set a single image to have a transparent background here, simply by inserting the image, insert the control, set the color to be replaced, then save.