Animations are made with a sequence of images, called frames. Images persist on the eye’s retina, especially when there is a strong contrast between light and dark (as in a movie theater), so when images are displayed in quick succession, they appear to be a continuous animation.

Currently, the standard frame frequency is 24 frames per second. Hand-drawn cartoons were usually filmed at 12 frames per second, and each frame was photographed twice. But in the earliest movies, the frequency was only 20 frames per second, which is why actors appear to move too fast in very old films.

Television is different from movies projected in a theater. Because the contrast between the screen and the surroundings is generally less than in a movie theater, the image persistence is shorter, so frames must be shown at a higher frequency. Usually only every other line is drawn on each screen refresh, so at a rate of 60 refreshes per second, the full image is redrawn only 30 times per second.

The refresh frequency may be even higher for digital animation viewed on a monitor, thanks to the capabilities of the screen and the computer itself. Because people use computers in bright offices and even outside, the contrast with the environment is often weak, so a (in animation) minimum of 60 frames per second is necessary.

If you were to view the frames independently, you would see motion blur on fast-moving objects, but when you watch the video, everything looks sharp because the visual centers in the brain process the blurry frames into a moving object. The ability to create a sharp image from blurred frames depends on the image’s persistence. If persistence is too short due to low contrast between the room and the screen, then the motion blur can become visible. Because of this, computer games with very quick movement often need a frame frequency greater than 60 frames per second.

Depending on the tool used, frames in GIMP can either be layers in one image or separate image files. When stored as layers, frames cannot include multiple layers, but when stored as multiple images, they can.

To use layers as frames, you have to give each layer a duration and replacement mode. You do this by editing the layer name itself, by double-clicking it in the Layers dialog, by selecting Layers: right-click > Edit Layer Attributes, or by pressing when the mouse pointer is in the Layers dialog. The frame duration is specified in milliseconds and within parentheses, as in (200ms), and the replacement mode is also designated in parentheses, as in (replace). The order in which the layers appear on the screen is from bottom to top.

When frames are independent images, they’re all stored in one folder and named in order. The names are something like name_00001.xcf, name_00002.xcf, and so on (where name is whatever you designate). The frames’ duration cannot be changed, so to slow down part of the animation, you must duplicate the frames, and to speed it up, you delete frames. Because frames are images and not layers, no replacement mode is available. Every new frame replaces the preceding one.

Figure 18-1. The GIF Export File dialog

Simple animations are represented in GIF encoding, and the GIF Export File dialog (shown in Figure 18-1) can be set to save the frames as an animation instead of being set to flatten the image. When you choose to export as an animated GIF, you can also choose

The default delay of 100 milliseconds per frame results in only 10 frames per second. This delay is fine for a slow animation, but the frame frequency should be much higher if the animation has fast movements or else it will look jerky. To increase the frame frequency, reduce the frame duration, for example, to 40 milliseconds to obtain a frequency of 25 frames per second.

Using GIF for animation has all the drawbacks of this encoding, the biggest of which is the indexed representation, explained more thoroughly in Chapter 20. Basically, GIF can represent at most only 256 different colors, which is fine for a cartoon or logo but not for a home movie.

GIF animations can be viewed on any graphical web browser, so they’re popular on web pages. You can use the <img> HTML tag to display an image inside a page. It has to be loaded in full before the animation begins, so keep animations to a few hundred KB maximum, and avoid using more than one animation on a page.

JPEG encoding can’t be used for animations, but the corresponding MPEG encoding can. According to the official MPEG website (http://mpeg.chiariglione.org/), MPEG-1 was established in 1988 and is the standard on which Video CD and MP3 are based. DVDs are based on MPEG-2, and MPEG-4 is the multimedia standard. Other versions, like MPEG-7 and MPEG-21, also have modern applications.

An MPEG is a video made of JPEG frames. When the difference between successive frames is small (as when only a person’s mouth is moving), you don’t need to represent the entire frame again, reducing the video file size and increasing the feasible frame frequency and definition.

So an MPEG video comprises several frame types: complete JPEG images, frames of the differences between the current and the previous frame, and frames of the differences between the current and the next frame. The video recorder must save three different frames at the same time, including full JPEG frames at regular intervals.

The MPEG format also encodes the audio, as most video formats do. The GAP plug-in set generates MPEG-1 and MPEG-2 formats.

Similar to JPEG, PNG has a corresponding encoding for animations, called MNG. Unfortunately, this format is not supported by some web browsers, so it’s not a viable replacement for animated GIFs. For this reason, we won’t cover it, but GIMP can work with MNG animation.

Although they can use indexed representation, PNG and MNG generally use RGB, whereas GIF always uses indexed representation. Converting to indexed representation inevitably results in a loss in quality, and the loss is even worse when working with animation. If the MNG format were supported by more browsers, it would be much better than GIF for web animations.

Some proprietary formats are also supported by GIMP with GAP, but we won’t cover those either, except to say that GAP can generate the Apple QuickTime format and read other proprietary formats like Microsoft AVI.

Because animations can be represented as layers or images, using several different formats, you’ll find conversion tools handy. GAP provides tools to

An animation is generally a huge file. For example, if one JPEG is 33KB and you build an animation with a total of 21 frames (about 2 seconds!), the resulting animation will be 1.8MB. You can easily extrapolate that a one-minute animation using similar photos will be more than 54MB, which is far too large for a web page.

Fortunately, animation size can be reduced via optimization. For example, GIMP has a tool for optimizing animated GIFs. If only a small area in the animation is changing (a hand moves, a person smiles), then the parts of the image that don’t change from frame to frame are represented only once in the background layer. Subsequent layers are transparent except when things change, leading to a much smaller file size.

When we applied this tool to the 1.8MB animation, we reduced its size to 337KB (one-fifth the original size). This reduction is significant, but the 54MB one-minute animation would still be too large for a web page because it would reduce only to about 10MB, and a nonstreaming video on a web page should probably be 2MB maximum. The MPEG format can reduce the size of a video more than GIF optimization can; therefore, it is the standard for video on the Web.