The Mechanics of Web Animation

Nowadays, animated characters are everywhere on the Internet! Web designers use a variety of technologies to bring these animations to life, such as:

This article will introduce you to how various technologies function, highlighting both their strengths and weaknesses. Additionally, we'll explore the latest advancements that will propel Web animation into the future!

Growth of Web Animation

The Internet, in its relatively short existence, has been evolving at a rapid pace. This progress has been shaped by two key opposing forces:

These challenges have pushed Internet pioneers to develop innovative solutions for delivering intricate content over restricted connections.

An animated Flash representation from our nuclear radiation article. While this is a rather intricate figure, it still remains under 7,000 bytes!

In the upcoming sections, we'll explore how each technology addresses these conflicting demands and their approaches to overcoming them.

Animated GIFs

One of the greatest breakthroughs in the Internet's history was the ability to combine images with text on web pages. These images are typically in the form of bitmap files, which describe the color of each pixel in an image. To reduce the file size of these images, various techniques are employed to compress the data. Websites usually present these images as either JPEG or GIF files.

Animation is simply a sequence of still images displayed in order, so the most straightforward way to add animation to a website is by posting a series of bitmap images that are shown one after the other in the user's browser. This form of animation, known as GIF animation, or GIF89, was the first to gain widespread adoption and remains 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.

Dynamic HTML

As we have observed, the main challenge with GIF animation lies in the fact that each frame of the animation significantly increases the overall file size. One solution to this is eliminating individual frames entirely, and instead instructing the computer to move a single still image across the screen. In a way, this is something we do all the time, especially when moving the cursor across the screen with the mouse.

Initially, Web pages were mostly static—meaning, once loaded, they stayed unchanged. This is a core characteristic of hypertext markup language (HTML), the fundamental programming language of Web pages. HTML consists of simple tags that inform the Web browser where to display elements on the page.

As the Internet grew, Web designers found the static nature of HTML limiting. They sought to introduce dynamic content that could change after a page was loaded. Dynamic HTML, or dHTML, is the technology that allows for this functionality. It utilizes complex scripting languages, like JavaScript, to interact with the document object model (DOM) of the browser. The DOM controls how a browser displays a Web page, and today, almost all modern browsers allow scripting languages to manipulate the DOM and change HTML elements (such as altering the text color when you hover your mouse over a word).

Although DHTML was not specifically designed with animation in mind, it can be used to add motion to a Web page. A dHTML script can direct the browser to continuously change the position of an image on the screen, making it move across the page. By using multiple images, you can create an animation by having graphic elements move relative to one another to produce engaging sequences.

Similar to GIF animation, dHTML animation is automatically recognized by most Web browsers, so users don’t need to install any additional components. However, creating dHTML content that functions consistently across all browsers can be quite challenging, making this type of animation more complex than GIF animation. Coding the animation manually is quite difficult, but user-friendly software tools like Macromedia's Dreamweaver can generate the necessary script code for you.

DHTML has limitations in its animation capabilities, primarily because it can only move still images across the screen. While more fluid than GIF animation, it’s not as effective for many types of applications that require more dynamic content. DHTML represents the extent of a Web browser's built-in animation features. To add more advanced animation to the Web, developers needed to create programs that would supplement the user's browser.

Java Applets

An alternative method for Web animation involves the use of Java, a universal, network-oriented programming language. Java enables programmers to create applications that users download from the Internet. Browsers with Java support use a virtual machine to interpret and run the Java language, translating it for the user's specific computer system (Windows, MacOS, Unix). The virtual machine acts as a plug-in that needs to be installed with the browser.

Java Web content is usually created as programs known as applets. Applets are not complete software programs; they operate in conjunction with a browser. Web designers use applets for various tasks, including animation. Java's main advantages are its cross-platform compatibility and flexibility. You can design animation programs that use simple vector shapes or bitmap images. Java is particularly ideal for creating interactive animations and integrating them with other elements on a Web page. For more details about Java, refer to How Computer Programs Work.

Plug-ins

In the early 1990s, the Internet saw an explosive surge in popularity, leading to a rapid increase in the number of websites. A diverse range of individuals began creating Web pages, each wanting to incorporate various forms of multimedia content. Instead of altering browsers to handle these new types of content, Web pioneers introduced the concept of browser plug-ins.

Plug-ins are small programs that integrate with your browser, enabling it to read and display specific file types. These compact pieces of software are quick to download and are tailored to handle particular file formats, allowing them to perform functions that a basic browser cannot manage.

Video

Streaming video typically utilizes a plug-in system that enables you to watch video content directly on the web. Web video often includes sound and can feature more complex animation than traditional formats.

Nowadays, web designers can utilize dHTML scripts to check if a specific plug-in is installed. If it’s missing, the browser will prompt the user with instructions on how to download the necessary plug-in. The process can vary depending on the application, but it can take a considerable amount of time, making it a drawback for animation. However, if the plug-in is already installed, most browsers will begin playing the movie as soon as enough data has been downloaded.

Each plug-in operates differently. Video players like QuickTime and Media Player display a series of still images, similar to animated GIFs or videos, but they can transmit the images more efficiently by compressing and streaming them. Compression reduces the file size by simplifying the data in an image, while streaming means the player starts displaying the content before the entire file is fully downloaded.

Even with these capabilities, the movie file may still take a long time to download or appear in poor quality if you have a slow connection.

Flash and Shockwave

The most commonly used plug-ins for animation are Flash and Shockwave, both developed by Macromedia. These are vector-based 2-D animation viewers. The following sections provide a detailed discussion of Flash and Shockwave.

A Flash animation from our boomerang feature article.

A Flash animation from our boomerang feature article.

Flash and Shockwave

Macromedia has achieved significant success with two closely related formats, Flash and Shockwave. Flash has become the standard for rich animation on the web, while Shockwave is highly favored for more intricate animated content. Unlike Real Player and QuickTime, Flash and Shockwave movies are integrated into the web page and offer a high degree of interactivity, similar to a basic HTML page. The Shockwave player not only plays animations but also responds to user input, affecting how the browser reacts.

An interactive Flash movie from our submarine feature article. Click the buttons to make the submarine surface or submerge.

An interactive Flash animation from our submarine feature article. Click the buttons to make the submarine rise and dive.

Flash and Shockwave are not the only animation formats available, but they are by far the most popular. Flash, in particular, has gained immense success because it is pre-installed in most browsers and can deliver smooth, visually appealing animations at a very fast speed.

Quick Download Speed

Several factors contribute to fast download speeds. First, many Flash and Shockwave files are vector-based, unlike GIF animations. This means that instead of storing an image as pixel values, the software defines the image using lines and shapes, recorded as mathematical values. For example, a straight line is defined by its angle, its position relative to other shapes, and its length. This method allows the software to save large sections of an image—sections that would typically require hundreds of pixels in a bitmap file—as a small number of figures. Flash and Shockwave also support bitmap images, which can be compressed and resized to minimize file size. These bitmap images can be moved around the screen using paths, similar to the movement of still images in dHTML animation, further reducing the overall file size. However, most Flash files are entirely vector-based, which makes them especially fast to load.

By using this approach, the number of frames the animator needs to create is reduced. Flash and Shockwave technology can easily generate in-between frames between vector-based key frames by calculating the change in geometric data between the two images. This method occupies much less space than bitmap animation, which requires storing each frame as an individual image.

Another key innovation is the method of transmitting files. Flash and Shockwave files are streamed over the Internet, allowing the browser to begin displaying the "movie" even before the full file has finished downloading. Just like how a server sends the text of a Web page first, followed by image files, a Flash site can be set up to show an introductory movie while the remaining content loads. The webmaster can configure the file so the movie starts once a certain portion of it has been downloaded. The transmission is timed so each part of the file is delivered before the movie reaches that point. This method is also used for streaming video.

Availability

Flash and Shockwave gained widespread adoption among Web users and designers due in large part to Macromedia's distribution strategy. Today, these plug-ins are bundled with major web browsers and computer operating systems, making it incredibly easy to get the free plug-in if you don't already have it. The installation process happens in the background, meaning the user doesn't need to leave the browser for a lengthy download. The authorware itself is expensive, but it's widely available.

Updating the plug-ins is simple, which allows Macromedia to constantly improve and release new versions of the technology. The company designed Flash and Shockwave players to be adaptable to future changes, so users don't need to do anything other than download the update. Since the updates are relatively small in size, they don't take much time to install. Additionally, if a site detects that you’re not using the latest version, your browser will notify you and direct you to the Macromedia site to download the update.

Different animation formats on the Web each have their own advantages and drawbacks. However, many webmasters end up choosing Flash, even when another format might be better suited to their needs, simply because they know that most Web users already have Flash installed, and if not, getting it is an easy process. The widespread availability of Flash and Shockwave encourages more webmasters to include Flash content, which in turn promotes further adoption of these formats.

Understanding the Difference Between Flash and Shockwave

Both Flash and Shockwave software applications serve similar functions and are produced by the same company, but there are notable differences. These differences are rooted in the origins of the two formats. Director, the program used to create Shockwave files, predates the current version of the Internet. Initially developed to generate dynamic content for CD-ROMs, Director continues to be used for that purpose. However, as dynamic content gained popularity on the Web, Director's newer versions added features to optimize Shockwave files for online use.

Flash, in contrast, was designed specifically for the Web. Macromedia adapted it from Future Splash Animator, a vector art animation tool. The key advantage of Flash was its ability to function over telephone line connections, which was the standard at the time. Thus, Flash and Shockwave have different core purposes, giving them distinct strengths and weaknesses:

As updates to each software continue, the gap between the two formats continues to narrow. With every new version, Shockwave enhances its Web capabilities, while Flash grows more flexible. It's likely that, in the future, the two formats will merge into one unified format, combining the best features of both.

A Flash animation from our fuel cell article.

Creating Flash and Shockwave Animations

Both Flash and Director are built to be user-friendly and enjoyable to use. They feature intuitive interfaces and numerous automated functions. While the two programs approach movie creation differently, using different terminology for most aspects, they share several key components. To create a movie, you must manipulate its elements in three essential ways:

Both Flash and Shockwave allow you to import, create, and edit movie elements. In Flash, these elements are stored in the library; in Shockwave, they are placed in the cast. You can then assign dynamic properties to these elements and arrange them on the stage, which represents the final appearance of the movie. Using the stage, you create key frames and position them in sequence to build the movie. In Flash, this area is known as the timeline, while in Shockwave it's referred to as the score.

A major reason for the widespread use of Flash animations on the Web today is its simplicity. Both Flash and Director provide a full animation studio right on your desktop, streamlining many complex tasks in multimedia creation. For example, if you want a globe to roll across the screen, you don't have to animate each frame individually. Instead, you simply define the starting and stopping points and assign the globe a rolling motion between them. For a detailed introduction to creating Flash movies, visit Webmonkey's animation tutorial.

A Flash animation from our engine article.

The Future of Web Animation

The next breakthrough in Web animation is 3-D graphics. This opens up a whole new level of interactivity for users. In 2-D animation, the web designer controls the viewer’s experience, much like an animator does with television cartoons. But with 3-D graphics, you interact with the model itself. You can manipulate it, turn it around, trigger specific actions, and in some cases, even change its size. How Stuff Works has featured a number of such 3-D models.

Just like Flash and Shockwave’s 2-D animations, viewing 3-D Web graphics requires downloading a special plug-in. Several companies have developed these, with Viewpoint seeing some success, and NxView offering a plug-in on their website. In July, Macromedia and Intel announced their collaboration to bring 3-D functionality to Shockwave. Users will be able to add 3-D features to their Shockwave player simply by updating it. Intel partnered with Macromedia for this project due to their success in distributing multimedia players. Together, they aim to make Shockwave the standard for 3-D graphics on the Web.

Shockwave technology has a unique way of scaling 3-D graphics to ensure they perform smoothly, even with varying connection speeds. If you’re on a slower connection, the Shockwave player will download a model with fewer polygons—the geometric components that form a 3-D shape. While this reduces some detail, the image quality and the fluidity of motion remain intact.

The power of 3-D Web technology enables exciting new possibilities for online content. One of the most intriguing uses is in e-commerce, where instead of relying on static product images, shoppers can view items from all angles, as if they were physically inspecting them in a store. Some sites are even creating "virtual dressing rooms," where users can generate 3-D models of their body shapes to see how different clothes will fit.

This technology also opens up new opportunities for educational websites like How Stuff Works. We’ve already published several articles featuring 3-D graphics created by NxView, and we’re looking to expand this content in the future. These graphics allow users to explore technology and processes from multiple perspectives, as if they were examining a real object, like an engine, from every angle.

This revolutionary technology has the potential to change the Internet’s visual landscape, much like still images and Flash animation did before. In an upcoming article, we’ll explore how this technology works, its potential applications, and dive into what Macromedia and Intel are doing to make the Shockwave player the standard for the Web.

As more users gain access to high-bandwidth connections, we’re likely to see significant advancements in Web animation. One possibility is transforming the Web from a static, book-like experience into an interactive 3-D world, similar to a video game. Another idea is to make the Web more like television, with high-quality animations and video content. Ultimately, the direction of Web design will depend on what designers choose to create, shaped by what users want to experience. The Internet is evolving rapidly, and its future looks promising.