How Web Animation Works

By: Tom Harris

Flash and Shockwave

Macromedia has had a great deal of success with two closely related formats, Flash and Shockwave. Flash is now the standard format for rich animation on the Web, and Shockwave is a very popular format for presenting more complex animated content. Unlike Real Player and QuickTime files, Flash and Shockwave movies actually appear as part of the Web page and include a high level of interactivity, just like a straightforward HTML page. The Shockwave player not only plays animation, but also recognizes user input and then controls how the browser responds.



An interactive Flash movie from our submarine article. Click on the buttons to make the sub surface and submerge.

An interactive Flash movie from our submarine article. Click on the buttons to make the sub surface and submerge.

Flash and Shockwave are not the only formats for this sort of animation, but they have caught on more than any other similar format. Flash in particular has been successful because it comes bundled with most browsers and can transmit fluid, attractive animation very quickly.

Quick Download Time

There are a couple of different factors that make quick download time possible. First, there is the nature of many Flash files and Shockwave files. Unlike GIF animation, Flash and Shockwave files are largely vector-based. This means that instead of saving the picture as a series of pixel values, the authorware program describes the image as a series of lines and shapes, which it records as mathematical values. A straight line, for example, is described by the angle of its ascent, its coordinate position in relation to the other shapes and its length in relation to the other shapes. Describing images this way allows the program to save wide sections of an image -- sections that might consist of hundreds of pixels in a bitmap file -- as a couple of figures. Both Shockwave and Flash can also use bitmap images, which webmasters can condense and scale down to keep file sizes small. These bitmap pictures can also be moved around the screen by paths, much like still images moving around in dHTML animation, which helps keep the total file size down. Most Flash files are completely vector based, however, which makes them especially quick to load.

When your images are produced this way, it decreases the number of frames the animator has to create. Flash and Shockwave technology can create tween frames very easily between vector-based key frames, by calculating the change in geometric information between the two images. This takes up a lot less space than straight bitmap animation, which has to store every frame as a unique image.

The other chief innovation is the way in which the files are actually transmitted. Flash and Shockwave files are streamed over the Internet so that the browser can begin playing the "movie" before the entire file has downloaded. Just as a server sends the text of a Web page first and then any picture files, a Flash site can be configured to send an introduction movie while the rest of the Flash content is loading. Webmasters can code the file so that a browser will start playing the movie once a certain amount of the file is downloaded. This is timed so that each part of the file is transmitted before the movie plays to that point. This is also the way streaming video works.


Flash and Shockwave have caught on with so many Web users and Web designers largely because of Macromedia's dissemination strategy. These days, the plug-ins come packaged with the major Internet browsers and computer operating systems, and it's very easy to get the free plug-in if you don't already have it. All installation procedures occur in the background, so the user doesn't have to exit the browser program for a lengthy download process. The authorware is expensive, but it is readily available.

It's also easy to update the plug-ins, allowing Macromedia to continually develop and then distribute new technology. The company intentionally designed the Flash and Shockwave players to adapt to future modifications, so the user doesn't have to do anything to update the player but download the file. And since these files are fairly small in size, it doesn't take much time to do this. Additionally, if a site detects that you don't have the newest version of the plug-in, your browser will tell you, and direct you to the Macromedia site to download the update.

The different animation formats on the Web all have particular strengths and weaknesses. But many webmasters end up using Flash, even when another format might be better suited to their needs, simply because they know that most Web users already have Flash capability; and if they don't, it's really easy for them to get it. The universality of Flash and Shockwave leads more webmasters to include Flash content, which further spreads the acceptance of the formats.