Special Edition Using HTML 4

Previous chapterNext chapterContents


- 25 -
Animation

by Mark R. Brown


Animation Online

In Chapter 24, "Video," you learned that you can create a "video" by assembling individual digitized images into an animated sequence. You can, of course, also draw animations frame by frame. Even at a slow playback rate such as 11 frames per second (considered the absolute minimum even by today's cheap Saturday-morning cartoon production houses), you can see that drawing takes time (see Figure 25.1)--a great argument for using video and animation sparingly. If you've got talent and all the time in the world, however, you can use tools such as Pixar's RenderMan (a close cousin to the software used by Pixar to create the movie Toy Story) to create your own animation masterpieces.

FIG. 25.1
Even a short animated cartoon such as this one at the official Pinky & the Brain Web site can be composed of hundreds of individual drawings.

RenderMan (http://www.pixar.com) is an expensive product; its price and high-end features make it overkill for all but the most professional animators. For most of us--especially those of us interested only in delivering short animations for playback on our Web pages--it makes more sense to use a combination of simpler (and cheaper) tools. Enliven and Emblaze are examples of less expensive tools, and they're optimized for the Web as well. But it's "89a" animated GIF images that have taken the Web by storm. We'll cover all of these formats in this chapter.


ON THE WEB: For links to many publishers of animation programs, check Yahoo!'s list of animation links at http://www.yahoo.com/Computers_and_Internet/Graphics/Computer_Animation/.

Creating Your Own Animations

Everybody loves a good cartoon. A simple animation can add a lot to your Web page. Although animations are essentially the same as videos--that is, they are a series of still frames displayed sequentially--there can be a great difference in scale.

Videos take up a lot of memory, storage space, and transfer bandwidth because videos images are usually complex, real-world images composed of a lot of pixels in a wide variety of colors.

Animations, on the other hand, are often simple images comprising only a few colors. Because of this, they compress extremely well in comparison to video. If they are put into a proprietary format that is optimized for the delivery of simple animation, they can be even smaller.

Compression is one good reason to consider animations when adding life to your pages. If you pick a good format, you can deliver animations hundreds of times faster than you can deliver video clips.

Whether you're creating an animation based on digitized images from the real world or one comprising hand-drawn images, the process consists of the same two steps:

1. Create the art for the individual frames of the animation, either by digitizing them or drawing them.

2. Assemble the individual frames into an animated sequence.

Creating Animation Frames

If your animation will consist of a series of digitized images, you need to start by digitizing those images. The preceding chapter discussed some products you can use to digitize individual frames from a VCR or other video source, as well as some products that allow you to digitize video still frames directly from a camera connected to your computer.

You can also use a scanner to create individual animation frames. You can scan photos or illustrations, or you can draw your own images on paper and scan them. If you're more of a "hands-on" artist than a "digital" artist, this can be a more comfortable way to go. Just remember to make small changes from one frame to the next, or your efforts won't play back smoothly.


CAUTION: Scanned images and digitized image files can be huge--much too large to use in creating an animation. Scan or digitize your images in 256 colors and keep the image size small--320x200 at the absolute maximum, much smaller if possible. Otherwise your animations take forever to assemble and even longer to download and view.

Finally, you can use a paint program to create your images directly. This doesn't have to mean that you draw every image by hand. You can also load a digitized image and modify it. In fact, that's what you're going to do in the following example.

First of all, you need to load a paint program. I've chosen Paint Shop Pro because it's capable of performing many special effects that don't require any artistic ability whatsoever. To start, load a previously digitized picture of yours truly (see Figure 25.2). After all, I wouldn't want to massacre anybody else's picture; would you?

FIG. 25.2
Step one in creating the sample animation is to load the image on which you want to base the animation.

Use Paint Shop Pro's Deformation feature to add motion blur to this image and create a six-frame animation of my face getting fuzzy. To do this, you first create six individual pictures. Select Edit, Copy from the menu bar and then Edit, Paste, As New Image (Ctrl+V) five times (see Figure 25.3).

FIG. 25.3
Copying the original image five times creates the six frames you need for the animation.


TIP: Because you are using copies of the same GIF image, you avoid some of the major hassles involved in creating animations from multiple images. Otherwise, you'd have to spend a lot of time matching color palettes and color depth, resizing images to the same size, and saving them all in the same form at (GIF).

Leave the original image alone. That one forms the base frame of the animation. Select the second frame and choose Image, Deformations, Motion Blur from the menu, and you see the dialog shown in Figure 25.4.

FIG. 25.4
Motion blur is one of dozens of special effects available in Paint Shop Pro.

Blur the first image to an intensity of two pixels. The second, blur to four pixels; continue until the last image is blurred by ten pixels. Each image is subsequently more blurry than the previous by two pixels (see Figure 25.5).

The final step in the frame creation process is to save each of the images as an individual GIF format file.

Assembling an Animation

At this point, you could choose to create an animation in a proprietary animation format using a commercial animation program, but there's a better choice for use on the Web: a GIF animation. GIF animations require no special playback plug-ins or programs--both Microsoft Internet Explorer and Netscape Navigator play GIF animations all by themselves.

FIG. 25.5
You now have a sequence of progressively blurry images that you can assemble into an animation.


Animated GIFs and the GIF89a Specification

GIF format bitmap images have been around practically forever. One indication of the durability of the GIF image format is that the latest specification (89a) was written in 1989.

This specification included two important features that have made GIF images a mainstay of Web page design. The first is transparency. By declaring a GIF image's background color as transparent, you can create logos that allow your Web page's background to show through, which makes a pleasing effect.

The second important feature built into the GIF89a specification is the capability to create animated GIF images. By combining a string of separate GIF images into a single file along with control instructions, you can turn a set of individual GIF images into an animation. When you include this animation on your Web page, both Microsoft Internet Explorer and Netscape Navigator play the animation in place.



It is now therefore relatively painless to create animated icons, short animated presentations, and even "videos" put together from digitized frames that the majority of the Web browsers can play without requiring the use of a plug-in. (If you don't find this exciting, you haven't been paying attention!)

The best tool, bar none, for assembling animated GIFs on Windows-based computers is Alchemy Mindworks' GIF Construction Set (see Figure 25.6). This program is shareware (registration fee: $20 + $5 shpg.) and can be downloaded from http://www.mindworkshop.com.


TIP: Both Paint Shop Pro and GIF Construction Set let you create GIFs with transparent backgrounds.

FIG. 25.6
GIF Construction Set is a must-have tool for creating GIF animations.

Although you can use GIF Construction Set for doing more than creating animated GIFs, and although you can use it to create animated GIFs by hand, this example employs its built-in Animation Wizard to create the animation. The beauty of this method is that you don't have to tweak a lot of settings to build the animation. Later, if you want, you can adjust anything that seems not quite right.


NOTE: If you're a Mac user, you can build GIF animations using GifBuilder by Yves Piguet of Switzerland. It can assemble PICT, GIF, TIFF, or Photoshop images into GIF animations, and it can also convert QuickTime movies, FilmStrip, or PICS files. You can find out more about it (and download it) from http://iawww.epfl.ch/Staff/Yves.Piguet/clip2gif-home/GifBuilder.html.

To begin, select File, Animation Wizard (Ctrl+ A) from the menu; you see the Animation Wizard dialog shown in Figure 25.7.

FIG. 25.7
GIF Construction Set's Animation Wizard provides a painless way to create GIF animations.

From here, it's just a matter of following the instructions in the dialog. The first step asks whether the animation is for a Web page (see Figure 25.8). It is, so click the appropriate radio button. The Animation Wizard uses the choice here to determine how many colors to use when it creates the animation. When you indicate that you're creating an animation for a Web page, the wizard automatically optimizes the color palette for viewing in a Web browser. Finally, select the Next button.

FIG. 25.8
Animation Wizard wants to know whether it should optimize the animation for viewing on the World Wide Web.

The second step asks whether you want the animation to loop indefinitely (see Figure 25.9). Indicate that you do. You want to make sure that you don't include too many infinitely looping GIF animations on the same page, however, because they consume valuable computer time and can be very annoying to your viewers. If your animation is simply an introduction, you want it to play only once.

FIG. 25.9
To loop or not to loop? That is the question.


TIP: Have you ever seen an annoying looping animated GIF on a Web page? You can stop them at any time by clicking your browser's Stop button. Make sure you wait until the rest of the page elements are finished loading.

Step three asks whether the individual images are hand-drawn or "photorealistic" (see Figure 25.10).

FIG. 25.10
Here's where you tell the Animation Wizard what kinds of images it's working with.

For your images, you could answer Photorealistic, which is GIF Construction Set's term for a digitized image. However, because all the images have the same color palette, you can choose Matched to First Palette. The Animation Wizard uses the answer to this question to determine how to match the colors among all of the pictures you give it. Because your pictures all use the same colors, you can save some processing time by choosing this answer. If you answer Photorealistic, Animation Wizard spends time matching and dithering colors, which is unnecessary for this example. If your images are hand-drawn, text images, or other simple graphics, you check the Drawn or Drawn in Sixteen Colours option, whichever is appropriate. (Note the spelling of "Colours." Can you tell that Alchemy Mindworks is based in Canada?)

The next step is to define how fast the animation will play (see Figure 25.11). The default is 100/100ths of a second (or a whole second) per frame. You probably want the animation to play a bit faster, so choose 50/100ths of a second between frames. If that's too fast or too slow, you can change it by later editing the file manually.

FIG. 25.11
Playback speed is an important determining factor in what kind of impression your animation makes.


TIP: GIF Construction Set lets you specify a different delay for each frame in manual mode. This is great if, for example, you are creating an animated slide show and you want to display some slides longer than others.

Now that you've taken care of the mechanics, it's time to load the individual frames (see Figure 25.12).

FIG. 25.12
Open a file requester to load your animation frames.

Clicking the Select button opens a file selection dialog (see Figure 25.13). Note that GIF Construction Set can load several different file formats besides GIFs: BMP, JPG, TGA, PCX, and PNG files are all supported.

FIG. 25.13
Loading a series of frames in GIF Construction Set.

Click a filename to load a frame and then the next and so on. Click Cancel to finish. When done, you see a list of the files you've loaded in the wizard dialog (see Figure 25.14). That's the final step.

Now that you're done, the wizard tells you what you need to do next (see Figure 25.15).

At this point, you click the Done button to finish the wizard. Then, you need to select File, Save As from the menu to save the finished animation.

You can take a look at your animation by clicking the View button in the GIF Construction Set toolbar (see Figure 25.16). The animation displays in its own screen, and you hit the Escape key to exit.

FIG. 25.14
You can highlight a file and click the Delete button to remove a file from the list.

FIG. 25.15
The wizard's done and there's only one more step.

FIG. 25.16
GIF Construction Set's main window lists the component parts of the animated GIF.

You can see from the list in the window that the animated GIF file is composed of a HEADER, a LOOP definition, and a sequence of alternating CONTROL and IMAGE functions. Although the Animation Wizard set the values for all these elements, you can change any of them manually by double-clicking an element in the list. For example, double-clicking an IMAGE entry opens the Edit Image dialog shown in Figure 25.17.

FIG. 25.17
GIF Construction Set lets you manually edit all the elements that compose an animation.


TIP: If you want your animation to loop back and forth--for example, if you want my picture to get fuzzy and then unfuzzy in steps--you can reuse the frames in reverse order in the last half of the animation.

You probably don't want to mess with the animation right now, but if you do, a quick click on the Help button invokes contextual help that explains all the options you can change.

Do you remember that I said you could change the timing if you want? You do that by double-clicking the CONTROL element immediately preceding the IMAGE you want to change the timing for. This opens the Edit Control Block dialog (see Figure 25.18).

FIG. 25.18
This dialog lets you change the timing of your animation.

From this dialog, you can adjust the Delay setting to change the delay timing for the selected frame.

If you want to delete an element, all you have to do is highlight it with the mouse and click the Delete button. To insert an element, you click the Insert button and select the type of element you want to insert from the Insert Object menu that pops up (see Figure 25.19).

FIG. 25.19
You can easily add elements to an existing animation using this handy control.

Converting a Video to an Animation

Suppose you approached the problem from another point of view. What if you have an existing Video-for-Windows animation or video clip that you want to convert to an animated GIF? Obviously, I wouldn't have brought it up unless GIF Animation Studio could make the conversion for you automatically. Select the command File, Movie to GIF from the menu and you are prompted to select an AVI file to load. Then you see the Movie Options dialog shown in Figure 25.20.

FIG. 25.20
Converting an AVI file to an animated GIF is a piece of cake.

From here, you can select the color mapping you want the program to apply to the file. (I suggest you select the Help button first to find out what all the options mean.)

Once your AVI file is converted, you see the main window again, displaying your new GIF animation file (see Figure 25.21). You can fiddle with all the individual elements as though you had created an animation from scratch.

FIG. 25.21
Not satisfied with your automatic movie-to-GIF conversion? Play with the pieces yourself.

One thing you can do is select Block, Extract from the menu to select and save individual frames or blocks of frames as separate files. This option is great if you want to clean up a frame or two in a paint program and then insert them back into your animation.

Even more fun is to choose Block, Image Strip. You see the dialog box shown in Figure 25.22, which you can use to create a horizontal or vertical strip composed of all the images in your animations.

FIG. 25.22
This dialog lets you build a sort of film strip based on your animation.

Figure 25.23 shows what such an image strip looks like. Although they are interesting in and of themselves, such image strips are also useful as data structures for creating Java-based animations.


TIP: Although Microsoft Internet Explorer and Netscape Navigator display GIF animations just fine, most graphic programs display only the first frame of a GIF animation.

GIF Construction Set is capable of much, much more, but you've got the animation you wanted, so I end the discussion here. You can use this same series of steps to create your own GIF animations for your Web site.

FIG. 25.23
Paint Shop Pro displays an image strip of an animation that was created by GIF Construction Set's Movie to GIF function.

Animated GIFs are relatively small, they play in the most popular Web browsers without the use of plug-ins, and they are relatively easy to create with inexpensive shareware tools. However, if you're serious about creating more complex animations for delivery over the Web or a corporate intranet, you might want to check out one of the more popular proprietary-format animation systems.

Other Animation Formats

Animation always requires at least two proprietary programs, one to create animations and save them in a special format and a second to play those special format files. Because you can't create animations unless you use a proprietary animation-creation product, you won't have any material to embed unless you download or buy the programs anyway. These animation creation programs all contain extensive information on how to include the final result in your pages.

Enliven

Enliven provides an excellent example of how yesterday's solution just isn't good enough for today's problems on the Web. Version 1.0 of the Enliven suite was composed of three distinct software components: Enliven Viewer, a browser plug-in; Enliven Server, software for Windows NT Web servers to feed multiple streams of animation to browsers; and Enliven Producer, a post-production environment to prepare content for online delivery.

Today, that arrangement has changed. There's no longer an Enliven Viewer plug-in; it's been replaced by a small, quick Java applet that loads and runs quickly without the hassle of downloading, unzipping, and installing a separate browser plug-in. When you run into a site that uses an Enliven animation now, it looks like any other Java applet. Enliven Server was totally revamped. Like its predecessor, it delivers streaming animation content in real time, but the content has changed. There is no longer an Enliven Producer program to create yet another proprietary animation format. Instead--thanks to an agreement between Enliven's parent company Narrative and multimedia giant Macromedia--Enliven now uses Macromedia Director animations.

In short, the end user has it easy because she doesn't have to install yet another plug-in to view Enliven animations; they load and play streaming animations quickly. Web site developers don't have to buy and use yet another proprietary animation program to create content; they use Macromedia Director, a well-established industry standard. Enliven makes its money selling fast, real-time, streaming content server software.

Figure 25.24 shows Narrative's demo page from which you can play a handful of Macromedia Director pseudo-ads. The speed with which they download and play, even over my poky 28.8Kbps modem connection, is truly impressive.

FIG. 25.24
Click a link on this page to view streaming Macromedia Director animations courtesy of the new Enliven 2.0 server.

You can find out more about Enliven at Narrative's Web site at http://www.narrative.com.

Other Animation Options

GEO Interactive Media Group's Emblaze was formerly plug-in-based, but now it is a real-time, Java-based animation player applet that plays a proprietary animation format. GEO says the animation format needs only 3MB to 4MB of disk space for approximately 30 minutes of play time. The animations can display at a rate of 12 to 24 frames per second in 256 colors in real time over a 14.4Kbps connection. Animations are created using the commercial Emblaze Creator program, which can integrate animation with sound. The end result is an animation that plays quickly over the Web, even over slow 14.4Kbps dial-up connections. The latest version also allows you to combine video and interactive elements for multimedia presentations. Emblaze files require no special server program. You can find Windows 3.1, Macintosh, PowerMac, and Windows 95 versions of the Creator program at http://www.emblaze.com/atlantis/frameset.htm.

Totally Hip Software is another company that is in the process of moving from its own proprietary format to something standard. Its Sizzler plug-in and its special animation creator are still available, but Totally Hip seems to be actively promoting a program called WebPainter 2.0, which helps you create Web-standard GIF animations. WebPainter 2.0 includes a built-in graphics editor as well as an animation tool, and includes advanced features such as onion skinning, foreground and background layers, a cel strip window, multiple cel editing, and enhanced transformation tools. The Windows version imports and exports AVI files, and the Macintosh version does the same for QuickTime movies. You can download a free demo of either version (as well as the Sizzler plug-in and Sizzler animation Editor) from Totally Hip Software's Web site at http://www.totallyhip.com/.

Deltapoint's Web Animator 1.1 combines animation, sound, and live interaction. The latest version is available for Windows as well as the Macintosh and can save GIF animations as well as its own proprietary, plug-in-driven format. (Are you noticing a trend here?) The authoring tool for creating animations to add to your own site is also available from Deltapoint's Web site at http://www.deltapoint.com/animate/index.htm.


Previous chapterNext chapterContents


Macmillan Computer Publishing USA

© Copyright, Macmillan Computer Publishing. All rights reserved.