When to Gif. When to Shock.

GIF Animation rules the Web, but Director's Cast and Score scheme creates complex animations in much smaller files.

By Bob Schmitt
March 28, 1997

This column is an excerpt from the book, Shockwave Studio: Designing Multimedia for the Web, available now from O'Reilly & Associates.

In the old days, Web pages were static — filled only with text and boring still images. That all changed last year when GIF animation burst into popular use. Now it seems every page has some sort of dancing, jiggling, pulsating object. Some nicely done, others not so nice. GIF animation has many advantages, including ease of use, cheap/free authoring software, and streaming (it displays as it downloads instead of waiting until it is completely downloaded before starting). There's no need for users to download a plug-in or helper application, and no need for designers to configure the server.

Shockwave offers none of these advantages, but it does offer many more attractive features, including the ability to bring full CD-ROM-quality multimedia to a Web page. Shockwave provides an authoring language, Lingo, which enables virtually unlimited interactivity, complex logic functions, branching, rollover effects, and the use of sound — essential to creating a compelling experience. But what advantages does Shockwave offer for linear animations?

If you are creating small, simple animations (i.e., spinning bullets or other decorative features) that you want a broad audience to see, and the content isn't important enough to make them download a plug-in, then by all means use GIF animation. However, for more complex animations, Shockwave can be a very useful tool for creating a more user-friendly file size.

Shockwave offers several unique features. First, Shockwave's compression scheme can make graphics as small or smaller than GIF compression. In fact, Shockwave compression is comparable to the type one would get with a program such as Stuffit or PKZip — somewhere between 40 and 80 percent, depending on the file. More interesting though is the Cast and Score scheme of Shockwave authoring program, Macromedia Director. Unlike GIF animation which must contain a separate GIF for each frame of the animation — even if the GIF is the same as one used previously — Director reuses cast members within an animation, enabling Shockwave movies to have a much smaller file size than equivalent GIF animations.

The Shockwave Difference

To illustrate the Shockwave advantage over GIF animation for certain kinds of animations, let's look at an example called Hare Krishna Cyclotron created by World-renowned illustrator Henrik Drescher. Henrik chose to use GIF animation as the format for the animation, which resulted in a final file size of just over 123K (note: this comparison uses file sizes from the original 640 x 480 version, not the smaller sample linked to here). I wanted to see what the result would be if we used the same art and created the animation in Shockwave. First let's take a look at the frames of the existing GIF animation as shown in the window of the popular Mac GIF animation program, GIF Builder:

Figure 1: GIF animation frame list.

Figure 1: Frame list of the existing GIF
animation for Hare Krishna Cyclotron.

As you can see, the GIF animation is made up of 26 individual GIFs. Now let's look at the cast window of the same animation as created in Director:

Figure 2: Director's Internal Cast for Hare Krishna Cyclotron.

Here we see that the animation actually uses only 18 unique images, the other eight, used in the GIF animation, are repeats. Because of Director's superior cast and score structure, those eight repeats are reused in the score of the Shockwave movie rather than repeated in the cast. This arrangement allows the designer to reuse cast members endlessly with little to no addition in the file size of the final animation. In fact, the final size of our Shockwave movie is just under 84K, a full 40K less than the GIF animation.

To further illustrate this point, I wanted to see what would happen to the respective file sizes of the GIF animation and the Shockwave movie if I reversed the sequence of the animation and added it to the end of the existing animation. So, after the baby leaves the womb, grows to manhood and crumbles into dust, the animation will reverse going from the skeleton, to manhood and finally back into the womb. When I constructed this in GIF animation format, the final animation contained 51 layers of GIFs, and the file size rose to a whopping 241K! I did the same thing with the Shockwave movie, duplicating frames two through 14 and reversing the sequence (see below). And the result? The file size rose a mere 101 bytes — one-tenth of a kilobyte. This is a significant advantage over GIF animation, especially with complex or large animations such as this:

Director's Score.

Figure 3: Director's Score for Hare Krishna Cyclotron.

While GIF animation is clearly the better tool for small animation tricks, Shockwave offers many advantages for more complex animation. Shockwave's compression coupled with its superior Cast and Score structure, makes it an excellent choice for the serious animator. In our next Studio column we'll look at several other Shockwave features which can be used to create even more elaborate animations.