How Web Animation Works

In its brief history, the Internet has been constantly and rapidly evolving. Part of this evolution has been driven largely by two opposing forces:

These factors have forced Internet innovators to come up with a number of clever tricks for delivering complex content over limited connections.

A Flash animation from our nuclear radiation article. This is a fairly complicated figure, but it fits in less than 7,000 bytes!

In the following sections we will look at how each technology and how they handle these competing forces.

One of the biggest innovations in the history of the Internet was the ability to integrate photographs and other illustrations with text on a web page. The illustrations come in the form of bitmap files. A bitmap file simply describes the color of each pixel in the image. To decrease the file size of these bitmap images, several different techniques are used to compress the image data. Typically, Web sites post these sorts of images as either JPEG files or GIF files.

Animation is just a series of still images shown in sequence, so the most obvious way to add animation to a Web site is to post a series of bitmap images that the user's browser displays in sequence. This sort of animation, called GIF animation, or GIF89, was the first Web animation to catch on, and it is still very popular today.

The main advantages of GIF animation are that it is incredibly simple to work with and it is automatically recognizable to most Web browsers. With a shareware program, such as GIF construction set for Windows or GifBuilder for Macintosh, all you have to do is provide the individual bitmap images that make up the frames of your animation. You then post the file and code the tag for the image, just as you would with an ordinary static GIF.

The disadvantage is that you have to keep the animation pretty simple to keep the file size down. After all, each frame is a full bitmap image. Four simple frames transmit very easily to most users, but when you get up to something like 20 frames, your file size could be too big. And you can't even accomplish very much with 20 frames -- the fluid animation we see in movies includes at least 24 still images every second -- so animated GIFs are fairly limited. To create a movie of any substantial length, you have to make pretty big jumps between each frame, which means the animation is not very fluid, as you can see in the example below.

This is an excellent way of illustrating a simple concept, or just adding some eye-catching decoration to your site; but Web designers and Web users found it to be wholly inadequate for communicating more complex ideas or adding a real sense of motion to Web sites. Furthermore, you can't add sound to a GIF animation.

As we've seen, the main problem with GIF animation is that each frame of the "movie" adds considerably to the total file size. One way of getting around this problem is to eliminate individual frames entirely. Instead, you simply tell the computer to take one still image and move it across the screen. In a sense, you do this with your computer all the time, when you move the cursor across the screen with your mouse.

Originally, Web pages were, for the most part, static files -- that is, once you loaded them, they pretty much stayed the same. This is inherent in hypertext markup language (HTML), the basic programming language of Web pages. HTML basically consists of simple tags that tell a Web browser where to display Web page elements.

As the Internet continued to evolve, Web designers found this static quality fairly limiting. They wanted to add dynamic content to their Web sites -- that is, content that could change once the user had already downloaded a particular Web page. Dynamic HTML, or dHTML, is the term for the software technology that makes this possible. DHTML content is actually produced by using a number of complex scripting languages, such as Javascript, to access something called the document object model on your Internet browser. Basically, the document object model (DOM) controls everything about how a browser displays a Web page. These days, almost all users have browsers that will expose the DOM to scripting languages, so that this script can alter HTML elements (to change the text color as you move the mouse over a word, for example).

DHTML was not created with animation in mind, but it will let you alter HTML elements in a way that will add movement to a Web page. A dHTML script can simply tell the browser to keep changing the placement of a particular image on the page, so it travels around the screen. If you do this with several different images, you can move a series of graphic elements around each other to make interesting movies.

Like GIF animation, dHTML animation is automatically recognized by most Web browsers, without the user having to download any extra components. However, it is fairly tricky to create dHTML content that works the same way on all browsers, so this sort of animation is not nearly as simple as GIF animation. Actually coding the animation program yourself is quite difficult, but there are user friendly software applications, such as Macromedia's Dreamweaver, that will produce the correct script code for you.

DHTML is fairly limited in its animation applications, because all it can really do is move still images around on the screen. It's much more fluid than GIF animation, but for many applications, it is a much less effective way of displaying a changing image. DHTML is pretty much the limit of a Web browser's built-in animation ability. To add more complex animation abilities to the Internet, innovators had to come up with programs that supplemented the users' browsers.

Java Applets

Another way to provide Web animation is through the universal, network-oriented programming languages known as Java. With Java, programmers can create applications that users download off the Internet. Java-enabled browsers use a virtual machine, a piece of software that recognizes the Java language and translates it for the user's computer system (Windows, MacOS, Unix). The virtual machine is basically a kind of plug-in, and it must be installed with your browser.

Java Web content is generally created as programs called applets. Applets aren't complete software applications -- they work only in conjunction with a browser. There are all sorts of things Web designers do with applets, and one of the most popular applications is animation. The main advantages of Java are that it works on all operating systems and it is very flexible. You can create an animation program that draws simple vector shapes for the individual frames, or one that uses bitmap images. Java is particularly suited for creating interactive animations and combining animation with other Web page elements. For more information about Java, check out How Computer Programs Work.

In the early '90s, the Internet really started to take off in popularity, and the number of Web sites skyrocketed. There was suddenly a wide variety of people producing Web pages, and they had all sorts of multimedia content they wanted to be able to include. Rather than trying to change browsers to recognize and display these many different forms of content, Web innovators launched the idea of browser plug-ins.

Plug-ins are programs that work with your browser to read and play a certain type of file. They are relatively small pieces of software, so it doesn't take users forever to download them off the Internet. They are specifically designed to work with a particular type of file, so they can accomplish a lot of things that a basic browser can't.

Video

Streaming video generally uses a plug-in approach that lets you view video content on the web. Web video can include sound and much more elaborate animation.

These days, Web designers can use dHTML scripts to detect whether or not you have a particular plug-in. If you don't have it, your browser will display a message that tells you how to download the plug-in. This varies from application to application, but it often takes a good while to go through the entire process, which is a definite disadvantage of handling animation this way. If you already have the plug-in, most browsers will start playing the movie as soon as enough of the file has started downloading.

Different plug-ins work in different ways. Video player applications such as QuickTime and Media Player show a sequence of still images, just like an animated GIF or a movie on video, but they are able to transmit the images faster by compressing and streaming them. Compressing is the process of simplifying the information that makes up an image so that its file size decreases. Streaming simply means that the player begins displaying the content before the entire file has downloaded.

Even with these capabilities, this sort of movie file takes a long time to download or has poor quality if you have a slow connection.

Flash and Shockwave

By far the most common plug-ins for dealing with animation are Flash and Shockwave, both from Macromedia. These are vector-based 2-D animation viewers. The following sections discuss Flash and Shockwave in detail.

 

A Flash animation from our boomerang article.

A Flash animation from our boomerang article.

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 oursubmarine 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.

Availability

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.

Flash and Shockwave software applications cover a lot of the same ground, and they are produced by the same company, but there are a few significant differences. Most of these are directly related to the origins of the two file formats. Director, the software application used to create Shockwave files, has been around for a long time, longer than the Internet in its current form. It was originally developed to create dynamic content for CD-ROMs, and it is still used for this purpose. As dynamic content has become more popular on the Internet, however, updated versions of Director have included more features that tailor Shockwave files for use on the Web.

Flash, on the other hand, was built from the ground up for use on the Web. Macromedia adapted Flash from Future Splash Animator, a vector art animation program. Macromedia's version was tailored specifically for transmission over phone line connections. So at their heart, Flash and Shockwave have two different specialties. Consequently, they have a number of contrasting strengths and weaknesses:

With each software update, the two formats move closer and closer together. Shockwave has better Web capability with each version, and Flash gets more versatile. Eventually, the two formats will probably be merged into one comprehensive format that encompasses the best qualities of each.

A Flash movie from our fuel cell article.

Flash and Director are designed to be fairly easy and fun to use -- they both have a straightforward interface and many automated tasks. The two programs handle movie creation somewhat differently, and they have different names for almost everything, but they share some basic components. To make a movie, you need to manipulate the movie elements in three different ways. You need to:

Flash and Shockwave both have a means of importing, generating and editing movie elements. In Flash, you store these elements in the library; in Shockwave, they go in the cast. In both programs, you assign these elements any dynamic characteristics and arrange them on the stage. The stage represents what will actually appear in the final movie. Using the stage, you create key frames that you position in sequence to layout the movie. In Flash, the area for arranging your frames is called the timeline, and in Shockwave it's called the score.

One reason you see so much Flash animation on the Web today is that it is surprisingly easy to generate. The Flash program, as well as Director, puts a functioning animation studio right on your desktop, and automates a lot of the complex tasks involved in multimedia. If you want a globe to roll from one side of the screen to the other, for example, you don't have to animate every frame of the globe as it moves along; you simply tell Flash where the globe starts and where it stops and assign it a rolling motion in between these frames. For a good introduction on how to make Flash movies, check out Webmonkey's animation tutorial.

A Flash animation from our engine article.

The next big thing for Web animation is 3-D Web graphics. This gives Web users another level of interaction with online content. In 2-D animation, the Web designer decides what you see, just as animators decide what you see when you watch cartoons on television. In 3-D graphics, you can actually access a 3-D model, so you control the display. You can turn the model around, activate certain functions, and in some cases actually alter its dimensions. How Stuff Works has featured a few 3-D models of this sort.

As with Flash and Shockwave 2-D animation, you need to download a plug-in to view 3-D Web graphics. There are already a number of companies that have developed this software. Viewpoint has had some success, and NxView has a plug-in available on their site. In July, Macromedia and Intel announced that they were developing 3-D capabilities for Shockwave. Users will be able to add 3-D to their Shockwave players by simply downloading an update. Intel chose to work with Macromedia on this project because of the success the company has already had with disseminating multimedia players. The companies hope that the Shockwave 3-D format will become the Web standard for 3-D graphics.

The Shockwave technology has a way of scaling 3-D graphics so that they work well with different connection speeds. Basically, if you have a slower connection, the Shockwave player will download a model with fewer polygons, the geometric shapes that combine to form a 3-D model. This means that you'll lose some detail, but you won't lose any image clarity or fluidity of movement.

This 3-D Web technology allows for all sorts of interesting site content. One of the most promising applications is in e-commerce. Instead of choosing products based on still pictures, online shoppers will be able to look at the object from every angle, as they would if they were shopping for the object in a store at the mall. Some sites are also using 3-D graphics to create "virtual dressing rooms." The user can create a 3-D model of their body shape and see how different clothes fit that body.

This technology can also add a new level of content to educational sites like How Stuff Works. We have already published a few articles using 3-D graphics generated by NxView, and we plan to develop more 3-D content in the future. These graphics let users get a clearer picture of technology and processes -- they can look at an engine from any angle, just as if an actual engine were in front of them.

This technology is really amazing, and it will most likely revolutionize the look and feel of the Internet, just as still pictures and Flash animation changed everything up to now. In a future article, we'll delve further into how this technology works and what it can do, and focus specifically on what Macromedia and Intel are doing to develop the Shockwave player as the Web standard.

With more and more Web users getting high-bandwidth connection, there will definitely be some big changes in Web animation in the future. One such idea is to make the Web less like a book and more like a video game -- you would access information in a 3-D, interactive world. Another notion is to make it more like television, with lots of high quality animation and video. It really all depends on what Web designers want to include on their sites, which in turn depends on what Web users want to see. In any case, there is every indication that the Internet will continue to evolve at breakneck speed.