Section 16.4. Animations | Creating Web Sites: The Missing Manual

16.4. Animations

Web animations are a simpler, more flexible alternative to video. They let you show a series of changing pictures, floating text, and cartoon-like characters . In the hands of a talented Web artiste, animations can become complete, miniature movies.

Animations are much more common on the Web than video for two reasons. First, they're dramatically smaller, and therefore much more practical. Second, a Web designer can build an animation with nothing more than a mouse and some specialized software. No camera or lengthy conversion process is required.

In this section, you'll take a quick look at two types of animationanimated GIFs and Flash.

16.4.1. Animated GIFs

Animation is one of the features built into the GIF standard (Section 7.1.4). Animated GIFs are really a poor man's form of animation. They don't let you design complex animations like Flash, they aren't interactive, and they certainly don't let you show real video like the MPEG format. An animated GIF is really just a series of separate GIFs that are shown one after the other, with a specified delay in between each frame. Animated GIFs are short and usually loop, which means they restart their animation when they reach the last frame. Figure 16-6 shows how an animated GIF works.

Figure 16-6. This simple animated GIF consists of three static images, which are shown one after the other (with a brief delay after each frame) to create the illusion of a cartoon character banging a drum. It's taken from the online Microsoft Office clip art collection.

Note: Just as with any other GIF, animated GIFs are limited to a paltry 256 colors. There's no such thing as animated JPEGs.

You can build animated GIFs using a shareware tool (search on www.zdnet.com to find candidates), or a professional tool like Macromedia Fireworks. However, animated GIFs aren't generating much interest these days, and all the cool people have moved on to Flash.

If you're looking for some free animated GIFs, you'll find ancient sites strewn across the Web. Check out www.gifanimations.com, www.webdeveloper.com/animations, and www.animatedgif.net to get started. Microsoft Office also has animated GIFs in its copious clip art library.

16.4.2. Flash Animations

A Flash animation can be anything from a simple animated-GIF replacement to an alternate way to build an entire Web site. That's because Flash animations have several unique characteristics.

16.4.2.1. The good

First, Flash animations are stored as a series of instructions. So instead of, say, saving three dozen pictures of a circle in slightly different positions to simulate a ball in flight (like you would with an animated GIF), you simply instruct Flash to "move this shape from here to there, at this speed." That makes complex animations much easier to create and edit.

Flash animations also can include video and compressed audio. That makes them perfect for creating talking characters or background music.

Finally, Flash uses programming code. That means you can program in all kinds of devious logic, like making shapes move and sounds play when the Web surfer moves the mouse or clicks a portion of the animation. This ability brings all the tricks of client-side programming (Chapter 14) together with all the tools of graphic design to make really slick animations. Best of all, your Web server doesn't need any special software because the Flash browser plug-in does it all.

Note: To get a sense of what's possible with Flash, check out the gorgeous graphics in the free Flash games at www.ferryhalim.com/orisinal, or take on the detailed negotiation simulations at www.zapdramatic.com, which pit you against a host of unsavory characters.

16.4.2.2. The bad

The disadvantage to Flash is that it really isn't HTML. In fact, Flash animations are really miniature programs that Web visitors download to their computers, and then run using a browser plug-in. (You can download the plug-in at www.macromedia.com/go/getflashplayer.)

For example, imagine you want to create a part of your Web site with Flash. To do this, you create a Flash file (a .swf file) using the Flash editing software. Then, you insert that file into your Web pages using an <embed> or <object> tag. When the browser reads the page, it downloads your Flash file, and uses a browser plug-in in to display the animation.

One significant side effect to using Flash: The content you put inside your Flash animations can't be read by a search engine. The quirks don't end there. Flash animations also require that pesky browser plug-in. By now, most avid Web surfers have it (and it is supported on virtually all browsers and computer platforms). However, if someone's stubbornly decided not to download the Flash player, they won't see any Flash contentor even a substitute.

Note: Sometimes, developers use Flash to create animated buttons. Dreamweaver even has a built-in feature for just this purpose. But it's a dangerous game to play, because surfers without the Flash plug-in will be locked out of your buttons (and by extension, the rest of your Web site) altogether.

Finally, with great power comes great responsibilityor at least, enough complexity to send you running for the hills. To really use the animation and programming muscle in Flash, you'll need to plunk down about $400 for this premier Web design tool, and get ready to learn a whole lot more. Everything you've learned so far (HTML, styles, and so on), won't help you much in the world of Flash. Even once you have the right software, you'll find it takes more than a modicum of artistic skill to create a professional Flash animation.

As a result, the rest of this chapter concentrates on guiding you to some free Flash animations. If you'd like to learn more and develop your inner animator, check out the Web tutorials at www. flashkit .com/tutorials and www.w3schools.com/flash, or pick up a dedicated book on the subject.

16.4.2.3. Free Flash animations

The best things in Flash aren't free, but you can dig up some interesting Flash files by searching on Google. Figure 16-7 shows a free Flash animation generator, good for creating introduction page greetings ; you'll find the tool at www.freeflashintros.com.

Figure 16-7. Top: Choose three lines of text and a final Web page where you want the surfer to be redirected.
Bottom: The three lines of text scroll slowly from alternating sides, with just a flicker of white to add a little flair. To add this animation to your Web site, download the Flash animation file (.swf), and put it in the same folder as your Web page. Then, copy the provided HTML code (circled) to the page on which you want to display the Flash animation.

If you absolutely must have background music, Flash is probably the best way to go. The trick is to use an invisible ( audio-only ) Flash animation. Flash compresses audio even more snugly than the MP3 format, and it lets you seamlessly loop audio (for non-stop playing). Many Web sites sell audio loops; you can download from a large catalog of free choices at www.flashkit.com/loops (see Figure 16-8). Altogether, this site features nearly 10,000 loops that range from ambient to urban.

Figure 16-8. You can preview the loops directly without downloading them. Once you've found what you want, click the "flashtrak" link to download the audio in Flash format. The site also supplies MP3- or WAV-format versions of the audio files. In this example, the high-quality WAV file is almost two MB, but the Flash version is a respectable 50 KB. The loop is 10 seconds long.

If you don't have the Flash authoring software, you'll run into a small problem. In order to get your Web page ready to play a background audio track using Flash, you actually need two things:

The file that contains the actual audio for the loop. This is a .swf file.
A flashtrak player. This is a program (designed in Flash and a .swf itself), that plays the audio file.

So far, you have the audio file, but not the player. But thanks to the Flash Kit site, it's not hard to find one. Just look for the "Get flashtrak players" link. You'll find a range of jukebox-style controls, each of which is actually a Flash program. Most of these show snazzy effects while the music's playing (like pulsing lines or expanding circles).

Note: When you download the flashtrak player, you may end up with more files than you actually need. For example, you don't need any files that end with ".fla" (these are Flash files that you edit in the Flash software). You can delete these files. Also, when you download a player, you'll probably find yourself with a pile of extra song files. Delete the ones you don't want, or your player will cycle through them all.

Once you've downloaded the two pieces you need, you're ready to play your audio loop in a Web page. A simple <embed> tag that points to the player file will take care of things:

 <embed src="StarPlayerMultiTrackWithAutoStart.swf">

Figure 16-9 shows what you'll see when you run the page that contains this tag.

Figure 16-9. Here's the Flash-based audio controls in action, complete with playback buttons and soothing graphics. The best way to try out this example is to download the sample content for this chapter, available from the "Missing CD" page at www.missingmanuals.com.

Some HTML editors also include features that allow you to quickly insert Flash animations. For example, FrontPage provides an Insert Picture "Movie in Flash Format command that inserts the <embed> tag you need. If you look at the HTML FrontPage generates, you'll find it's actually a fair bit more complicated than the example shown above. (For example, FrontPage also inserts an <object> tag, which is recommended for wide- ranging browser compatibility, but rarely needed.)