Animation | HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

< Day Day Up >

Sometimes full-blown video is a little overboard; in fact, just a little animation can spice up a Web page a great deal. Animation on the Web is used for many things: active logos, animated icons, demonstrations , and short cartoons. There are a variety of animation technologies available to Web designers. Some of the most common animation approaches include animated GIFs, Flash, and DHTML animations. Other animation possibilities also exist. Most notably, Java-based animations and older animation techniques such as server push are still possible, but the field has narrowed significantly. Very few older or proprietary animation formats are actually worth exploring, but a few of the browser-specific forms of animation like Microsoft's <marquee> tag live on.

<blink>

The much maligned <blink> tag was initially introduced to the Web by Netscape. Its simple goal is to make text blink, as shown here:

  <blink>  Buy now!  </blink>

It has no significant attributes and is primarily supported only in versions of the Netscape browser and is not part of any HTML or XHTML standard. Interestingly enough, despite all the fuss about blinking text, it is actually part of the CSS2 specification, though it is actually not required to be supported by CSS2-conformant browsers. So if you want blinking text that validates , try something like the following:

  <span style="text-decoration: blink;">  Buy Now!  </span>

Text Animation with <marquee>

One approach to adding new support for multimedia is to add new elements and build in support to the browser for the object. This approach used to be very popular with browser vendors and is partially responsible for the proliferation of browser-specific tags. <marquee> is one example of a multimedia-like tag that is fairly common on the Web. Although <marquee> isn't an embedded binary object, it tends to act like one in its support for hspace , vspace , height , and width attributes. In the proprietary HTML extension wars, Microsoft is the culprit for introducing the dreaded <marquee> tag, which is certainly as annoying as <blink> . Thanks to <marquee>, HTML authors now can create messages that scroll and slide across a viewer's screen in a variety of different ways. Like Netscape's <blink> tag, <marquee> degrades fairly well and can be used by HTML authors who understand the ramifications of using such proprietary tags. However, the bottom line is that, in good conscience, authors shouldn't recommend more than very occasional use of the <marquee> tag.

While initially supported only by Internet Explorer and some second- tier browsers such as MSN TV, <marquee> is now even supported in Mozilla-based browsers like Netscape 7, making it somewhat of a de facto standard even if it won't validate. Using the element is simple; just enclose some text in it and it is transformed into a scrolling ticker tape, similar to the one found at Times Square. A very simple continuous marquee could be set with the following markup fragment:

  <marquee>  Welcome to Demo Company, Inc. -- the biggest fake company in the world!  </marquee>

Under browsers that support the <marquee> tag, the enclosed text scrolls repeatedly from right to left. Under browsers that don't support <marquee> , the text is displayed simply as plain text because the user agent should safely ignore the tag.

The following is a more complex example that illustrates some of the more common attributes supported by <marquee>; the rendering is shown in Figure 9-2:

Figure 9-2: Rendering of the <marquee> example under Internet Explorer

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml"> lang="en"   <head>   <title>  Marquee Demo  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   </head>   <body>  <!-- Warning: example will not validate on purpose -->  <div align="center">   <marquee bgcolor="yellow"   behavior="alternate"   direction="right"   loop="6"   scrollamount="1"   scrolldelay="40"   title="Silly tags aren't just for Netscape anymore."   width="80%">  Welcome to Demo Company, the biggest fake company of them all!  </marquee>   </div>   </body>   </html>

Note	While Mozilla-based browsers support <marquee> , they do not support all of its attributes, such as scrolldelay , direction , and so on.

Changing the attributes in this example will adjust the presentation of the marquee. For example, the behavior attribute may be set to alternate , scroll , or slide . This attribute determines how the scrolling text behaves. By default, a marquee scrolls text from right to left, unless the direction is set. The scrolled text, if it is looped, must first disappear before reappearing on the other side. When the attribute is set to alternate , the text bounces across the scroll region. When the attribute is set to slide , the text slides into position and stays put once onscreen.

The direction attribute is used to set the direction in which the scrolled text moves. The allowed values for this attribute are down , left , right , and up .

The loop attribute is used to set the number of times that the message loops in the scroll region. By default, unless the behavior is set to slide , a marquee scrolls forever. The value of the loop attribute should be a positive integer.

Setting scrollamount to a particular number of pixels allows the smoothness of the scroll to be controlled. The value of the scrollamount attribute is set to the number of pixels between each drawing of the scrolled message in the display area. The larger the value in pixels, the less smooth the scroll.

The scrolldelay attribute is used to set the number of milliseconds between each rendering of the scrolled message. A higher value for this attribute slows the scrolling. A reasonable value for this attribute is 50 or greater. Lower values for scrolldelay tend to produce marquees that are very difficult to read.

Lastly, because the <marquee> tag represents a rectangular region, just like an image (or, for that matter, any binary included object), it has attributes such as align , hspace , vspace , height , and width . Appendix A provides a complete discussion of the <marquee> tag and its numerous attributes.

Animated GIFs

Animated GIFs are the simplest form of animation and are supported natively by most browsers. Looping and minimal timing information can be set in an animated GIF, but complex animation is beyond this format's capabilities.

The GIF89a format also supports animation. It works by stacking GIF after GIF in a manner similar to a flip book to create the animation. The animation extension also allows timing and looping information to be added to the image. Animated GIFs are one of the most popular ways to add simple animation to a Web page because nearly every browser supports them. Browsers that do not support the animated GIF format generally display the first frame of the animation in its place. Including a GIF animation is simply just a matter of referencing it like a normal image, as shown here:

  <img src="animation.gif" width="100" height="100" border="0"   alt="DemoCompany" />

Although plug-ins or other browser facilities are not required with animated GIFs, authors should not rush out to use animation on their pages. Excessive animations can be distracting for the user and are often inefficient to download. Because the animation is basically image after image, the file size is the total of all the images within the animation combined and can result in a much larger image than the user is willing to wait for. Thus, it is very important to make sure that every frame of the animation is compressed as much as possible. One approach to combat file bloat is to optimize the image by replacing only the moving parts of an individual animation frame. For more about this subject, see Chapter 5.

Flash

Macromedia Flash (www.macromedia.com/flash) is the leading format for sophisticated Web-based animations. Flash files are very compact. The key to Flash's small size is the fact that it is vector-based. Anyone who has worked with Illustrator, or another vector-based graphics program such as Freehand, knows what this means. While a graphics editing program such as Photoshop produces images like GIF and JPEG that are essentially comprised of a mosaic of pixels, vector-based images use mathematically defined curves (Bezier curves, to get technical) to define images. Computers read this mathematical information and create the image on the monitor screen. A 100x100 pixel square with a 2-pixel red border would be defined mathematically, not by a collection of colored dots. If a Web browser could process images in this fashion, it would be feasible to scale images effectively on the Web. By changing the part of the equation ”defining the height and width of the square ”the browser could increase its size without impacting any other aspect of the image, thus removing the distortion problems you get if you resize a GIF or JPEG using HTML. Unfortunately, most browsers do not support this image type yet, although a format called Scalable Vector Graphics (SVG) may someday be natively supported by browsers and Microsoft already supports a simple format called Vector Markup Language (VML) in Internet Explorer. For the most part, however, designers are still dependent upon plug-ins to display vector-based formats.

Flash is primarily used to create animations. This requires the Flash player plug-in, but the end result is worth it. A Flash animation (file extension .swf) is superior to an animated GIF in several ways. It can contain a great deal more information than a GIF, allowing more sophisticated and complex effects. The image is scalable and can expand or contract to fit a relative display region, thus becoming larger on top-of-the-line monitors , yet can scale down to fit reasonably comfortably within low-end displays. Often, .swf files can be smaller in kilobyte size than a comparable GIF animation ”particularly in larger, more detailed images. Yet the technology far exceeds what is provided by simple animated GIFs. Flash files support a JavaScript-based programming language called ActionScript, which can be used to create games and even rich Internet applications. While the discussion is well beyond the scope of this book, creation of Flash files is not really difficult and can be accomplished with Macromedia's Flash software (www.macromedia.com/flash) or a third-party program such as SWiSH (www.swishzone.com/).

Once you assemble an animation and save it as an SWF file, it's fairly simple to reference it from a Web page. To reference a Flash file, you can use the <embed> syntax to reference the Flash player plug-in for Netscape. For example,

  <embed src="test.swf"   id="flash1" name="flash1"   width="320" height="240"   quality="autohigh" bgcolor="#ffffff"   type="application/x-shockwave-flash"   pluginspage="http://www.macromedia.com/go/getflashplayer">   <noembed>   <img src="test.gif" alt="" height="250" width="320" />   </noembed>   </embed>

Note the use of the <noembed> tag to provide an alternative file ”such as an animated GIF file ”in case Flash is not supported.

You also can use the <object> syntax to reference an Internet Explorer ActiveX control, as follows :

  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"   codebase="http://download.macromedia.com/   pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"   id="flash1" name="flash1"   width="320" height="240">   <param name="movie" value="test.swf" />   <param name="quality" value="high" />   <img src="test.gif" alt=""  width="320" height="240" />   </object>

Lastly, you could combine all the formats together to deal with all possible situations, as shown here:

  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"   codebase="http://download.macromedia.com/   pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"   id="flash1" name="flash1"   width="320" height="240">   <param name="movie" value="test.swf" />   <param name="quality" value="high" />   <embed src="test.swf"   id="flash1" name="flash1"   width="320" height="240"   quality="autohigh" bgcolor="#ffffff"   type="application/x-shockwave-flash"   pluginspage="http://www.macromedia.com/go/getflashplayer">   <noembed>   <img src="test.gif" alt="" height="250" width="320" />   </noembed>   </embed>   </object>

Note	The <embed> syntax is nonstandard and therefore won't validate but really must be used for older Netscape and Opera browser support.

Given the complexity of the tag syntax for including Flash files in a document, it is best to let the Flash tool generate the base markup and modify it, or to use a Macromedia Web editing program such as Dreamweaver, which can create it directly.

< Day Day Up >