Animated gifs actually contain a series of images (or frames) that are displayed one after the other and give a semblance of animation, just as in traditional animation techniques. Also, in animated gifs you can control the time for which each frame is displayed.
On this page, I shall dissect an animated gif so that you can understand them better. One important point though. As I mentioned above, the gif consist of static images and “appears” to be animated. Animation is just a semblance of motion. The display time for frames (you can set this up individually) decides how the animation will finally look.
Sponsored Links
The image consists of 8 frames each playing for 10 milliseconds each.
Frame 1 : 10 milliseconds
Frame 2 : 10 milliseconds
Frame 3 : 10 milliseconds
Frame 4 : 10 milliseconds
Frame 5 : 10 milliseconds
Frame 6 : 10 milliseconds
Frame 7 : 10 milliseconds
Frame 8 : 10 milliseconds
Our animated gif of a running dog (above) starts at frame no. 1 which plays for 10 milliseconds and then frame no. 2 is displayed and so on. When the last frame (no. 8) is reached, the image loops and displays frame no. 1 once again. You can specify the number of loops you want in the animated gif or you can set it to loop indefinitely.
In the above animated gif example, each frame is played for 10 milliseconds. Now, let us change this to 25 milliseconds as in the image below.
You will notice that the dog has started to run slowly and its motion is jerky because the frames in the animated gif are displayed for a longer period (25 milliseconds instead of the 10 milliseconds like in the original). If you want to create a slow running dog but with smoother motion you would have to create many more frames especially those that go in-between the start and the end frames.
How to create animated gifs
Animated gifs can be created or modified using any of the freeware or shareware available. I’m particularly fond of Animation Shop from Jasc (www.jasc.com). The program comes bundled with Paint Shop Pro. Most animation programs have many built in effects for images. Here is the Explode image effect from Animation Shop.
Let us now see how we can create a simple animated Gif file using Animation Shop. By the by, you can use your favorite animated gif creator – Though the tools might change, the logic of creating animated gifs is the same.
