Additional Animation Options | How to Do Everything with HTML & XHTML

Although GIF animations certainly are the most frequently used on the Web, there are other ways to liven up your page that go far beyond GIF’s capabilities. For example, say you want to create a slide show that uses JPEG images of your family photo album. Or perhaps you’re a realtor and would like a page that displays pictures of some of the houses you’re selling. Although creating GIF animations can be fun, there are other ways to liven up your page.

Project 19: Add a Java Applet

Java applets enable you to add animation and interactivity to your pages with little effort on your part. An applet is a “mini-program” that you place on your Web server and then embed in your Web page. When a browser loads your Web page, the applet is loaded and run on the client’s (your visitor’s) computer. The best thing about applets is that they are relatively easy to install, and that you don’t need to know how to program in Java to be able to use them. Thousands of Java applets are available for download, and many of them are free.

After you download an applet, you can embed it on your page with either the deprecated <applet> element or the <object> element. In addition, the parameter <param /> element enables you to customize some of the applet’s details. Although the HTML for adding a Java applet can become very complex, at its most basic it’s not much more difficult than adding an image to your page.

Begin by opening template.htm and saving it as applet.htm. In addition, for this project you will need to download the free Java Analog Clock applet from Sun Microsystems’ Web site. You can find it as a zip file at the following URL: http://java.sun.com/openstudio/applets/clock.html. After you have downloaded and unzipped the file, navigate to the Clock directory. There you will find another directory named Classes. Copy the four files in the Classes directory and paste them into the same directory where you saved applet.htm. Then follow these steps:

In between the <body> tags, add a set of <object> tags.

Inside the opening <object> tag, add the following attribute, which points the browser to the clock applet:

classlistitem">

Set the size of the applet by using the width and height attributes with a value of 200 pixels each. This should also go inside the opening object tag.

In between the <object> tags, add the following alternate text: Analog Clock Applet. This text will show when the page is displayed on a browser that does not support Java.
Save your page and display it in your browser. You should see a clock face in the upper- left corner of the page. The time on the clock should be the same as that of your computer system.

After you’ve viewed the clock on your browser, return to the code and modify the clock’s appearance with the parameter <param /> element. Most Java applets allow you to specify certain detail parameters for how the applet will display or operate. Among other things, this applet allows you to specify the applet’s background color, font size, and type, as well as the color for the second hand, minute hand, hour hand, clock face, and border color. Try entering the following parameters and see how they change the appearance of the clock:

Note

Notice that hex code is used for the color values, and that the usual crosshatch # mark (#ff0033) is not present.

<!-- Clock Font Size and type --> <param  name="cfont"   value="TimesRoman|BOLD|18" />   <!-- Background Color --> <param  name="bgcolor" value="000000" /> <!-- Seconds Hand Color --> <param  name="shcolor" value="ffff00" /> <!-- Minutes Hand Color --> <param  name="mhcolor" value="00ff00" /> <!-- Hours Hand Color --> <param  name="hhcolor" value="0000ff" /> <!-- Clock Face Color --> <param  name="ccolor"  value="dddddd" /> <!-- Clock Font and Border Color--> <param  name="ncolor"  value="000000" />

Finally, when you’ve viewed the page with its default parameters, try adjusting some of them to your own tastes. Experiment with some of the color values by choosing colors from the Web Safe Color Chart in the color insert.

Tip

The <param /> elements should be nested in between the <object> tags.

<!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">    <head>       <title>Applet Sample</title>    </head>    <body>      <object class            width="200" height="200">         <!-- Clock Font Size and type -->         <param  name="cfont"   value="TimesRoman|BOLD|18" />           <!-- Background Color -->         <param  name="bgcolor" value="000000" />         <!-- Seconds Hand Color -->         <param  name="shcolor" value="ffff00" />         <!-- Minutes Hand Color -->         <param  name="mhcolor" value="00ff00" />         <!-- Hours Hand Color -->         <param  name="hhcolor" value="0000ff" />         <!-- Clock Face Color -->         <param  name="ccolor"  value="dddddd" />         <!-- Clock Font and Border Color-->         <param  name="ncolor"  value="000000" />         <p>Analog Clock Applet</p>      </object>    </body> </html>

How to: Use the <applet> Element

The <applet> element has been deprecated in favor of the <object> element. However, because not all older browsers recognize <object>, it is good to be familiar with <applet>. To add the clock applet from the preceding example by using the <applet> element, your HTML would look like this:

<applet code="JavaClock.class" width="200" height=200">Alternate Text</applet>.

Parameters are added with the <param /> element the same way as with <object>.

Create a Scrolling Marquee (Discouraged)

A simple way to add animation to a Web page is with Internet Explorer’s <marquee> element. Any text enclosed inside this element will scroll across the page, much the same way as a bar of text will move across your TV screen when the station wants to pass on some news without breaking into a program. Because <marquee> is proprietary, developed by Internet Explorer, only IE browsers support this element. Although Netscape 7+ now recognize <marquee>, older Netscape browsers do not. Opera ignores it entirely. Finally, because <marquee> is not part of the XHTML recommendation, its use is discouraged.

Use <marquee> to Make Text Scroll

Create a blank HTML page by opening template.htm and saving it as marquee.htm; then add the following line in the <body> </body> portion of the page:

<p><marquee>Welcome to my Web Site!</marquee></p>.

Save the page and view it with Internet Explorer. Your welcome line should be scrolling across the top of the page in an endless loop. Now, if you have Netscape or Opera on your computer, try viewing the page in either one or both. Those browsers will ignore the <marquee> element entirely and display the text as if it were a simple paragraph.

Tip

While you are probably familiar with Netscape, you may not have heard of Opera. Opera is a nicely designed Web browser that is known for its speed in downloading pages. Although it costs around $40, it is also available as advertiser-supported freeware. If you’re looking for an alternative to Internet Explorer and Netscape, you might want to download Opera and try it on your system. Their Web address is www.opera.com.

Modify the Marquee with Attributes

If you watch the marquee.htm page on IE very long, you will probably notice some eyestrain as you try to focus on the small moving letters. You’ll also notice that your marquee’s movements seem jerky. Most important, an endlessly looping string of text can become distracting to the point of being irritating. However, there are some attributes that will alter a marquee’s appearance and behavior:

behavior=" " This attribute enables you to tell the browser how to scroll your text. Scroll (the default value) allows the text to scroll endlessly. Slide brings the text in from either the left or right side of the screen and slides it to the opposite margin. Alternate keeps the text moving between the left and right margins (as if it were bouncing off both sides).
loop=" " You can use this attribute to determine how many times you want the text to scroll, slide, or alternate. Infinite (the default value) keeps the text moving indefinitely. A numerical value causes the action to be performed for that number of times. For example, loop="10" will scroll the message ten times.
direction=" " With this attribute you can choose the direction in which your text will move. The values are left and right.
scrollamount=" " If the motion of the scrolling text seems too jerky, you can use scrollamount to smooth it out. Add a numerical value to represent the number of pixels you want the text to move each time. For example, scrollamount="2" will move the text a distance of two pixels each time it moves.
scrolldelay=" " The scrolldelay attribute also can be used to control the movement of the text, this time by delaying each separate movement for a specified period of time. The values for this attribute must be in milliseconds; thus, a delay of 100 milliseconds would be equivalent to one tenth of a second.

Some other attributes that can be used to modify the size and positioning of the marquee are height=" " (height of the marquee in pixels), width=" " (width of the marquee in pixels), hspace=" " (adds space on the sides of the marquee), vspace=" " (adds space above and below the marquee), and bgcolor=" " (enables you to specify a background color for the marquee).

To modify the appearance and behavior of the simple marquee created in the previous example, try the following steps:

Set the marquee’s background color to red:
```
<marquee bgcolor="#ff0000">
```
Tip
#ff0000 is the hexadecimal code for the color red. For more on color and hex codes, see Chapter 4.
Change the direction so the text scrolls from left to right:
```
<marquee bgcolor="#ff0000" direction="right">
```
Let’s slow down the motion of the text so it’s not so hard on your visitors’ eyes:
```
<marquee bgcolor="#ff0000" direction="right" scrolldelay="100" scrollamount="2"> 
```
To reduce the annoyance factor, set the text to scroll across the window and stop at the opposite side:
```
<marquee bgcolor="#ff0000" direction="right" scrolldelay="100" scrollamount="2" behavior="slide">
```

Just for fun, let’s throw in a little style with CSS:

<marquee bgcolor="#ff0000" direction="right" scrolldelay="100" scrollamount="2" behavior="slide" style="color: white; font-family: arial; font-size: 24pt;">

Save the page as marquee2.htm and view it in Internet Explorer.

For a good example of why you must be careful with using <marquee>, try displaying the page in Netscape 6 or lower, or in Opera. Because neither browser supports the <marquee> element, all you will see is a line of plain text. In Opera 7, you will see nothing.

Note

Netscape 7 now supports the <marquee> element.

So why bother learning about <marquee> if the browser support is so weak? First, if it’s tastefully used, you can use it to create a nice animation effect that a fair portion of visitors to your Web site will see. Second, it’s a good way to learn about how irritating animation can be if it is carelessly thrown in. To see for yourself, go back into your code for marquee.htm and change the value in the behavior attribute to either scroll or alternate. You also might want to remove the scrollamount and scrolldelay attributes, allowing the text to scroll at its default speed; then load the page in IE and watch it for a while. It shouldn’t take very long before you are ready to leave the page behind.

If you think that an endlessly scrolling line of text is irritating, you haven’t seen anything until you’ve seen what results from Netscape’s infamous <blink> element.

Create Blinking Text (Discouraged)

Internet Explorer has not cornered the market on obnoxious animation effects. In fact, Netscape’s <blink> element has a worse reputation than <marquee> could ever have hoped for. Pick up any number of books on Web design and you’ll find authors virtually pleading with you to never use the <blink> element. Do you wonder why?

Add Blinking Text with Netscape’s <blink> </blink> Element

Try adding the following line to the marquee.htm page just below the line for your scrolling marquee:

<p style="font-size: 24pt;">This is a sample of  <blink style="color: red;">red, blinking text.</blink>

Save the page as blink.htm and view it in your browser. You will need to use Netscape to see the blinking text, as neither IE nor Opera support the <blink> element. As with the previous example, just watch the page for a little while if you want to get a feel for how annoying constantly blinking text can be.

Whereas the <marquee> element can at least be modified to make it less objectionable, <blink> takes no attributes. The only thing you can do with it is make the text blink on and off—endlessly. Are you beginning to understand why so many Web authoring and design books preach against using it?

Add Blinking Text with CSS

Despite the <blink> element’s capability to irritate most Web surfers, for some reason the capability to create blinking text was included in the CSS recommendation. So, instead of using <blink> to create the effect, you can write a style rule that will do it. To see it work, add the following line to blink.htm:

<p style="text-decoration: blink; color:blue; font-size: 24pt;"> This is a sample of blue blinking text,  done with CSS</p>

However, even using CSS, you will not find much more browser support. Internet Explorer does not support blinking text in either CSS or with the <blink> element, although Opera and Netscape 7 do.

Use Downloadable GIF Animations

Suppose you want to use some GIF animations on your site, but you have neither the time nor the inclination to do your own. What then? Are you left out in the cold with a static, immobile Web site? Not in the least. As with almost any other Web resource out there, you can find a host of animated GIFs (many of them free of charge) just waiting for you to download and insert on your page. Table 12-2 provides a list of some of the sites where you can find ready-to-use animations.

Table 12-2: Sources for Animated GIFs
Resource	URL
GIF Animations for Free Download	www.webdeveloper.com/animations
Espresso Graphics	www.espressographics.com/gif
Club Unlimited Animated GIFs	www.clubunlimited.com
GifsNow.com	www.gifsnow.com
GIFAnimations.com	www.gifanimations.com
Cool Archive	www.coolarchive.com
GIF Animation on the WWW	http://members.aol.com/royalef/gifanim.htm

Note

If you visit some of the sites mentioned in Table 12-2, you’ll notice that GIF animations are sometimes referred to as GIF89a animations. This refers to the “version” of the GIF format that supports animation. An earlier version, GIF87a, did not support animation.

As good as GIF animations can be, at their best they still leave something to be desired. They are necessarily small and limited in scope. If you find that GIF animations seem too choppy or simplistic for your tastes, and you desire something “flashier,” scalable vector graphics (SVG) is what you want to explore.

Understand Flash and Shockwave Animation

Although you might never have heard of vector graphics animation, if you’ve spent any time on the Internet recently, you’ve undoubtedly seen it. When you load a Web page and a smooth, professional-looking graphical animation greets you—and you feel as if you’re watching a movie or TV program—you’ve probably just come face to face with vector graphics animation. The best known of these are Macromedia Shockwave and Flash animations.

Macromedia Shockwave and its somewhat less intricate sibling Flash are too complex to deal with in detail here. Also, the software is a bit pricey for the casual user (more than $300 for Flash). Macromedia Director, which produces Shockwave files, is considerably more expensive. However, lower-priced software such as CoffeeCup Firestarter is making Flash technology available to a broader audience. What makes Flash appealing is its ability to create very sophisticated animation yet maintain a reasonably small file size. However, even though Flash animations have relatively small file sizes, they still can take a long time to load. If you design a splash page for a Web site that takes two minutes to download to a user’s machine, you need to ask yourself if your animation is so compelling that an average visitor would be willing to kill two minutes waiting for it to come up. If you are interested in experimenting with Flash animation, you can download a fully functional demonstration copy from Macromedia’s site at www.macromedia.com, or if Macromedia’s software is out of your price range, go to Coffee Cup Software and download a demo copy of the lower-priced CoffeeCup Firestarter at www.coffeecup.com.