Planning Animation 4

1 2 3 4 5 7
8 9 10 11 12 13

A.

2185 bytes

This technique has become more of a standard post-production technique, as many second and third generation GIF editing packages have incorporated it as an auotmatic feature.

Planning ahead is not an integral part of this method, but I will include it here just to keep the concepts together.

In the "Flipbook" model imagine frames 1 and then 2 (examples A & B). The difference between frame 1 (A) and frame 2 (B) is that shown in C. It contains the new image information and position of the disc, and enough of the background material (to the left) to cover the previous image of the disc in frame 1 (A).

An exact difference would be a more complex shape that would exactly obliterate (mask) the disk image in frame 1 (A), and not bother with any of the background pixels common to both frames 1 & 2.

Many of the programs which do this differentiation don't bother with that precise of a difference, and simply slice the image vertically , producing a mask to cover the information that came before, plus the information that is new.

B.

2169 bytes

. C.

585 bytes

... D.

597 bytes

......... next

558 bytes

E.

8327 bytes

F..

4264 bytes

Summary: The original "Flipbook animation" was 28,948 bytes, the best "Overlay animation" (F) is 4,264 bytes, and "Differential animation" (E) is 8,327 bytes. The examples in this section demonstrate the wide variety of techniques that can be used to decrease the size of a GIF animation, when the animation is planned in advance, any one or multiple techniques can be combined to optimize the animated output.

The "differential animation" is the easiest to apply as many of the newer animation programs have this feature built-in via button or checkbox. The Overlay technique produces the smallest result, but it is also the most work, and time consuming.

Both of the above animations look about the same in Explorer, but the first (E) looks proper in Netscape and not the second (F), because of the disposal method employed.

The remaining sections in this "GIFOLOGY"

An OFFSET is then used to place this "partial image" in the correct position relative to the first frame. Frame 1 (A) is placed first in the animation, then covered with a difference frame (C in this case). The next difference frame is then placed over this combination (D next difference). It overwrites the portion recently created by C and adds to it the new information. The process continues (next) adding difference frames one on top of the other. The entire set of "difference frames" are shown at the top of the page.

The final animation is made up of the entirel frame 1, and then each of the differences with their respective offsets. The advantage of this method is that no special disposal methods are needed, the frames are not disposed, they are simply added to the previous. Hence it works properly in both Netscape and Explorer.

The disadvantage is that it is not as compact as the previous method. Example E represents the "difference method", and example F shows the background with overlay developed on the previous page. See their respective sizes.