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