An animation is a sequence of pictures which are flashed quickly in front of your eyes, in order to simulate real motion. Our Communications Technology class experimented with simple animated sequences using several computer programs. The most important program is the gif animator; we used Gif Construction Set.

A series of small drawings are first made using a graphics program. The sequence includes elements which slowly change their position or shape from frame to frame. Here are the drawn frames from a sample animation:



Each one is identically sized at 200 by 111 pixels. In the example shown here, every frame includes the background. The object to be moved is selected, including a piece of the background behind the object. When it is pasted to the right, the background that came with it automatically covers the old image.
This method is easiest, but won't work as easily if the object moves over a differing background; you might have to paint out the old image each time.

A variation on this method is to make a single background, and add the 'moving' object in each of the remaining frames. Here's an example:


A background frame was drawn, as well as a separate frame containing just the object to be moved.



The object was then selected, and pasted into the original frame in the correct position and orientation to make new frames. The advantage of this method is that you get more precise control of the object's position, and don't have to worry about changing background colours. Each frame contains the entire drawing.

Animations were tested using Irfanviewer, an incredibly versatile graphics viewer and editor. The sequence of files was played rapidly to test for the smoothness of the animation.

[File naming is important. In order to play the frames in the correct sequence, they must be named in aphabetical order, This is easiest if you number them. However, Windows will mess this up if you're not careful. For example, if you name your frames pic1, pic2, pic3 ... etc, as soon as you get to pic 10 and beyond, they will be alphabetized. Suppose you have 12 frames. They will be alphabetized this way: pic1, pic10, pic11, pic12, pic2, pic3, pic4, pic5, pic6, pic7, pic8, pic9.
The solution is to name them with two digits ... pic01, pic02, ... etc.
If you have more than 99 frames, use three digits ... pic013].


Next we used Gif Construction Set to combine the frames into a single gif file, and set the timing between frames.

Let's look at some student work to see what kind of results you can get.

A student prepared a total of 15 background images of a basketball player making a shot, changing the player and ball position with each frame. Here are some selected frames:


These are frames 1, 3, and 7. See the final animation of all 15 frames here


Another technique for animating a subject that will keep the result small in file size involves cutting the picture into pieces, and only animating the required portion. Here is a sample of that technique


GIF Animations


HTML, graphics & design by Bill Willis 2023