|
Multimedia is a bit of a high-powered word these days, bringing up images of expensive CD-ROMs with lots of integrated sound and video, textured ray-traced 3D virtual environments, and Doom-like fast-paced action. Multimedia on the Web, primarily because of limitations in network speeds and cross-platform file formats, isn't nearly that much fun. Multimedia on the Web has the potential for being very interesting, but at the present time it consists mostly of small sound and video files and simple animation. Yesterday you learned about images and, in particular, about the differences between external and inline images. You can make that same distinction between external and inline multimedia on the Web, and in this chapter, I will.
This chapter consists of two main parts. The first part describes external media files, which are the standard way of doing multimedia on the Web that all browsers support. In this first half of the chapter you'll learn the following:
In the second part of this chapter, I'll get fancy and talk about the newer advances in browsers to support inline animation and multimedia, including:
Yesterday you learned about the difference between inline and external images-inline images appear directly on a Web page, whereas external images are stored, well, externally, and loaded by choosing a link in an HTML Web page. This same distinction between inline and external applies to many other kinds of media besides images. In its most general form, external media is defined as any file that cannot be automatically loaded, played, or displayed by a Web browser on a Web page.
Whereas when you use inline media you're limited to which kinds of files you can use (and, for most browsers, that means only GIF and JPEG images), external files can include just about any kind of file you can create: non-inline GIF files, MPEG video, PostScript files, zipped applications-just about anything you can put on a computer disk can be considered external media.
To point to an external media file from a Web page, you link to that file just as you would any other document, by using the <A> tag and the HREF attribute. The path to the external file is a pathname or URL just as you would use if the file were another HTML document, and the text inside the link describes the file you're linking to. Here's an example:
<A HREF="some_external_file">A media file.</A>
So what happens when you click on a link to one of these external files? For some files, such as images or text files, your browser may be able to load the file itself into the current browser window. In many cases, however, your browser will download the file and then pass it to some other application on your system which is designed to read and handle that file. These other applications are called helper applications, or sometimes viewers, and you can configure your browser to handle different external media types with different applications. If the browser can't figure out what kind of file the external media file is, it'll usually pop up a dialog asking you what to do (save the file, choose an application, or some other choice).
| New Term |
A helper application is a program on your disk designed to read files that are not directly supported by your browser, for example, unusual image formats, movie formats, compressed or zipped applications, and so on. You can configure your browser to use different helper applications for different files. |
How does the browser figure out whether a given file is readable by the browser itself or if it needs to be passed on to a helper application? How the browser treats a file is determined by one of two things: the extension to the filename or the content-type of that file. You've seen the file extension quite a bit up to this point-HTML files must have extensions of .html or .htm, GIF files must have .gif extensions, and so on. When your browser reads and views local files on your disk, it uses the file extension to figure out what kind of file it is.
The content-type comes in when your browser gets files from a Web server. The Web server doesn't send the filename-in some cases, the data it sends back may be automatically generated and not have a filename at all. What it does send back is a special code called the content-type which tells the browser what kind of file it is sending. Content-types look something like this: text/html, image/gif, video/mpeg, application/msword, and so on.
| New Term |
A content-type is a special code that Web servers use to tell the browser what kind of file they are sending. |
Both browser and server have lists in their configuration or preferences which map file extensions to content-types. The server uses this list to figure out which content-type to send to the browser with a given file. The browser, in turn, has an additional list which maps content-types to helper applications on the local system (see Figure 9.1 for Netscape's Helper Applications menu). In this way, regardless of where the browser gets a file, it can figure out what to do with almost every file it receives.
Figure 9.1 : Netscape's Helper applications.
Allowing helper applications to deal with most external files works well for browsers, as it means that the browser can remain small and fast (no need to deal with every arcane file format that might be produced on the Web), and it's also configurable for new and better helper applications as they are written-or new and better file formats.
With that background in mind, let's actually create some Web pages that link to external media files.
Sound and video files are ideal for external media files on a Web page. You can use sound on your Web page for optional annotations to existing text, welcome messages from you or someone important in your organization, or extra information that words and pictures cannot convey. Video can be used to provide even more information that static pictures cannot convey (where the term video refers to any digitally encoded motion picture-both animation as well as "real" video files).
To include a link to an external sound on your Web page, you must have that sound file in the right format, just as you would for an image. You'll learn all about the various kinds of sound formats you can use in Chapter 10, "Sound and Video Files," but here's a quick summary. Currently, the only fully cross-platform sound file format for the Web is Sun Microsystems's AU format. AU allows several different kinds of sound sample encoding, but the most popular one is eight-bit m-law (that funny character is the greek letter mu, so m-law files are pronounced "mew-law"). For this reason, AU files are often called simply m-law files. AU files are of only barely acceptable quality, as the eight-bit sampling causes them to sound a bit like they are being transmitted over a telephone.
You can use other better quality sound formats for specific platforms. The most popular are AIFF for the Macintosh and WAVE (WAV) for Windows, or MPEG audio, which is more cross-platform but even less popular.
Finally, the RealAudio format was developed specifically for playing audio files on the Internet and the World Wide Web. Unlike most audio files where you wait for the entire file to download before you can hear it, RealAudio uses streaming, which means that it can play at the same time it's being downloaded; there's only a small pause as the initial data first arrives on your machine. The one drawback of using RealAudio is that you need to set up a special server to deliver real audio files, and linking to them involves a slightly different process than linking to regular audio files. For both these reasons, I'm going to postpone talking about RealAudio until later in this book, after you're used to working with servers.
In order for a browser to recognize your sound file, the file
must have the appropriate extension for its file type. Common
formats and their extensions are listed in Table 9.1.
| Format | Extension |
| AU/m-law | .au |
| AIFF/AIFC | .aiff, .aif |
| WAVE/WAV | .wav |
| MPEG Audio | .mp2 |
After you have a file in the right format and with the right extension, you can link to it from your Web page like any other external file:
<P>Laurence Olivier's <A HREF="olivier_hamlet.au">"To Be or
Not To Be"</A> soliloquy from the film of the play Hamlet (AIFF
format, 357K)</P>
Video files, like sound files, must be in one of a handful of formats to be able to be read by the current crop of Web browsers. Again, I'll talk extensively about video in the next chapter, but here's a quick format rundown.
For video files that can be read across platforms, the current standard on the Web is MPEG, but both Microsoft's Video for Windows (AVI) and Apple's QuickTime format have been gaining ground as players become more available. QuickTime and AVI files also have the advantage of being able to include an audio track with the video; although MPEG video files can have audio tracks, few existing players can play it.
The file extensions for each of these video files are listed in
Table 9.2.
| Format | Extension |
| MPEG | .mpeg, .mpg |
| QuickTime | .mov |
| AVI | .avi |
Then, simply link the file into your Web page as you would any other external file:
<P><A HREF="dumbo3.mov">The "pink elephant" scene</A> from
Disney's <CITE>Dumbo</CITE>.</P>
External media isn't limited to actual media like sound, video, and images. Any file you can put on your disk with an extension on it can be used as an external media file: text files, PostScript files, MS Word files, ZIP files, Macintosh HQX files, and so on. As long as that file has the right extension and your browser has been configured to be able to handle that file type, you can create links to those files which will download that file when the link is selected.
Or at least, that's the theory. For many file types you may also need to configure your server to do the right thing, or when you try to download the file, you'll get gibberish or nothing at all. You can experiment with linking to different file types for now; I'll talk more about file types and servers next week in Chapter 27, "Web Server Hints, Tricks, and Tips."
If you're going to make use of links to external media files in your Web pages, a very helpful tip for your readers is to include information in the body of the link (or somewhere nearby) about the format of the media (is it AU or AIFF or AVI or MPEG or a ZIP file?) and the file size. All the examples I've used up to this point include this information.
Remember, your readers have no way of knowing what's on the other side of the link. So if they go ahead and select it, it may take some time for the file to download-and they may discover after waiting all that time that their system can't handle the file. By telling your readers what it is they're selecting, they can make the decision whether it's worth it to try downloading the file.
Simply adding a few words as part of the link text is all you really need:
<A HREF="bigsnail.jpeg">A 59K JPEG Image of a snail</A>
<A HREF="tacoma.mov">The Fall of the Tacoma Narrows Bridge </A>
(a 200K QuickTime File)
Another useful trick if you use lots of media files on a page is to use small icon images of different media files to indicate a sound or a video clip (or some other media). Figure 9.2 shows some examples. Be sure to include a legend for which formats you're using, and don't forget to include the file sizes.
<A HREF="bigsnail.jpeg"><IMG SRC="earicon.gif"
ALT="[sound]">Whooping Cranes (JPEG, 36K)</A>
One of the common types of pages available on the Web is that of a media archive. A media archive is a Web page that serves no purpose other than to provide quick access to image or other media files for viewing and downloading.
Before the Web became popular, media such as images, sounds, and video were stored in FTP or Gopher archives. The text-only nature of these sorts of archives makes it difficult for people to find what they're looking for, as the filename is usually the only description they have of the content of the file. Even reasonably descriptive filenames, such as red-bird-in-green-tree.gif or verdi-aria.aiff, aren't all that useful when you're talking about images or sounds. It's only through actually downloading the file itself that people can really decide whether or not they want it.
By using inline images and icons and splitting up sound and video files into small clips and larger files, you can create a media archive on the Web that is far more usable than any of the text-only archives.
| Note |
Keep in mind that this sort of archive, in its heavy use of inline graphics and large media files, is optimally useful in graphical browsers attached to fast networks. However, the Web does provide advantages in this respect over FTP or Gopher servers, even for text-only browsers, simply because there is more room available to describe the files on the archive. Rather than having only the filename to describe the file, you can use as many words as you need. For example: |
In this exercise, you'll create a simple example of a media archive with several GIF images, AU sounds, and MPEG video.
First, start with the framework for the archive, which includes some introductory text, some inline images explaining the kind of files, and headings for each file type as in the following code. Figure 9.3 shows how it looks so far.
Figure 9.3 : The framework for the media archive.
<HTML>
<HEAD>
<TITLE>Laura's Way Cool Image Archive</TITLE>
</HEAD>
<BODY>
<H1>Laura's Way Cool Image Archive</H1>
<P>Select an image to download the appropriate file.</P>
<P><IMG SRC="penguinslittle.gif">Picture icons indicate GIF images</P>
<P><IMG SRC="earicon.gif">This icon indicates an AU Sound file</P>
<P><IMG SRC="film.gif">This icon indicates an MPEG Video File</P>
<HR>
<H2>Images</H2>
<H2>Sound Files</H2>
<H2>Video Files</H2>
</BODY>
</HTML>
For the archive, we have four large GIF images:
Using your favorite image editor, you can create thumbnails of each of these pictures to serve as the inline icons, and then insert <IMG> links in the appropriate spots in your archive file:
<H2>Images</H2>
<IMG SRC="orchidsmall.gif" ALT="a drawing of a pink orchid">
<IMG SRC="jellybeansmall.gif" ALT="a photograph of some jellybeans">
<IMG SRC="cougarsmall.gif" ALT="a photograph of a cougar">
<IMG SRC="biohazardsmall.gif" ALT="a biohazard symbol">
Note that I included values for the ALT attribute to the <IMG> tag, which will be substituted for the images in browsers that cannot view those images. Even though you may not intend for your Web page to be seen by nongraphical browsers, it's polite to at least offer a clue to people who stumble onto it. This way, everyone can access the media files you are offering on this page.
Now, link the thumbnails of the files to the actual images (Figure 9.4 shows the result):
Figure 9.4 : Image links to larger images.
<A HREF="orchid.gif">
<IMG SRC="orchidsmall.gif" ALT="a drawing of a pink orchid"></A>
<A HREF="jellybean.gif">
<IMG SRC="jellybeansmall.gif" ALT="a photograph of some jellybeans"> </A>
<A HREF="cougar.gif">
<IMG SRC="cougarsmall.gif" ALT="a photograph of a cougar"> </A>
<A HREF="biohazard.gif">
<IMG SRC="biohazardsmall.gif" ALT="a biohazard symbol"> </A>
If I leave the archive like this, it looks nice, but I'm breaking one of my own rules: I haven't noted how large the files are. Here, you have several choices for formatting. You could just put the size of the file inline with the image and let the images wrap on the page however they want as follows (Figure 9.5 shows the result):
Figure 9.5 : Images with text.
<H2>Images</H2>
<A HREF="orchid.gif">
<IMG SRC="orchidsmall.gif" ALT="a drawing of a pink orchid"></A>(67K)
<A HREF="jellybean.gif">
<IMG SRC="jellybeansmall.gif" ALT="a photograph of some jellybeans"></A>(39K)
<A HREF="cougar.gif">
<IMG SRC="cougarsmall.gif" ALT="a photograph of a cougar"></A>(122K)
<A HREF="biohazard.gif">
<IMG SRC="biohazardsmall.gif" ALT="a biohazard symbol"></A>(35K)
Or you could put inline breaks after each image to make sure they line up along the left edge of the page. I prefer the first method, as it allows a more compact layout of images.
Now, moving on to the sound and video files. You have three sound files and two videos. Because these files can't be reduced to a simple thumbnail image, we'll describe them in the text in the archive (including the huge sizes of the files):
<H2>Sound and Video Files</H2>
<P>A five-part a capella renaissance madrigal
called "Flora Gave me Fairest Flowers" (650K)</P>
<P>Some lovely wind-chime sounds (79K) </P>
<P>Chicken noises (112K)</P>
<P>The famous Tacoma Narrows bridge accident
(where the bridge twisted and fell down in the wind)(13Meg)</P>
<P>A three-dimensional computer animation of a
flying airplane over a landscape (2.3Meg)</P>
Now, add the icon images to each of the descriptions-the ear icon to the sounds and the filmstrip icon to the videos. Here we'll also include a value for the ALT attribute to the <IMG> tag, this time providing a simple description that will serve as a placeholder for the link itself in text-only browsers. Note that because we're using icons to indicate what kind of file each one is, you don't have to include text descriptions of that file format in addition to the icon.
And finally, just as you did in the image part of the example, link the icons to the external files. Here is the HTML code for the final list (Figure 9.6 shows how it looks):
Figure 9.6 : Sound and video files.
<H2>Sound and Video Files</H2>
<P><A HREF="flora.au">
<IMG SRC="earicon.gif" ALT="[madrigal sound]"> A five-part a capella
renaissance madrigal called "Flora Gave me Fairest Flowers" (650K)</A></P>
<P><A HREF="windchime.au">
<IMG SRC="earicon.gif" ALT="[windchime sound]"> Some
lovely wind-chime sounds (79K)</A></P>
<P><A HREF="bawkbawk.au">
<IMG SRC="earicon.gif" ALT="[chicken sound]"> Chicken noises (112K)</A></P>
<P><A HREF="tacoma.mpeg">
<IMG SRC="film.gif" ALT="[tacoma video]"> The famous Tacoma
Narrows bridge accident (where the bridge twisted and fell
down in the wind) (13Meg)</A></P>
<P><A HREF="airplane.mpeg">
<IMG SRC="film.gif" ALT="[3D airplane]">A three-dimensional
computer animation of a flying airplane over a landscape (2.3Meg) </A></P>
Et voilà, your media archive. It's simple with the combination of inline images and external files. And, with the use of the ALT attribute, you can even use it reasonably well in text-only browsers. Figure 9.7 shows how it comes out in Lynx.
Figure 9.7 : The media archive in Lynx.
Until very recently, the only way you could distribute multimedia files over the Web was by using external files as described in the first half of this chapter. In recent months, however, both Netscape and Microsoft have made many interesting steps toward integrating multi-media more closely into Web pages, either through the use of new HTML tags, through advanced capabilities such as Java, or through the use of "plug-ins"-helper applications that are more closely integrated with the browser and with files viewed within that browser.
For the remainder of this chapter, I'll run down many of the newer innovations in inline media that different browsers are supporting, including inline sound and video, marquees, and simple animation using GIF files and Java. Keep in mind as you read through this half of the chapter that these capabilities are new and, at the moment, limited to their respective browsers. If you take advantage of these features, be aware that they may be unavailable for readers not using that particular browser.
One of the earlier mechanisms for handling inline animation was introduced with Microsoft's Internet Explorer browser. Internet Explorer includes an extension to the <IMG> tag that allows AVI (Video for Windows) files to be played inline on Web pages. This HTML extension, called DYNSRC (Dynamic Source), has not yet been supported by any other browsers, but since it is ignored by browsers that don't support it, the new extension does not affect the readability of the page in other browsers.
To include an AVI video file on a Web page using Internet Explorer, use the <IMG> tag with the DYNSRC attribute. The value of DYNSRC is the path to or URL of the AVI file:
<IMG DYNSRC="rainstorm.avi" SRC="rainstorm.gif" ALT="[a rainstorm]">
Note that you can still use all the other common attributes to the <IMG> tag for alignment and borders, and you can use them to place the AVI video on the page. Also note that the SRC attribute is still required; this image will be shown in lieu of the AVI file if it cannot be found or in browsers that do not support inline video using DYNSRC.
In addition to DYNSRC, Microsoft added several other attributes to the <IMG> tag to control how the AVI file is played:
In addition to the tags for inline video, Internet Explorer also added a tag for playing inline audio files. These sound files are loaded when the page is loaded without the reader having to press a button or follow a link to play the sound. To add an embedded background sound to a page, use the <BGSOUND> tag, like this:
<BGSOUND SRC="trumpet.au">
The browser, when it loads the page, will also load and play the background sound. The <BGSOUND> tag does not produce any visual effect on the page.
To repeat the sound multiple times, use the LOOP attribute. If the value of LOOP is a number, the sound is played that number of times. If LOOP is -1 or INFINITE, the sound will be repeated continually until the reader leaves the page.
Explorer supports three different formats for inline sounds: the popular Sun's AU (m-law) format and Windows WAV files for sound samples, and MIDI files with a .mid extension.
When designing your Web pages, go easy with background sounds. If you must use one, play it only a short time and then stop. Continually playing sounds are distracting to many readers.
A marquee is a line of scrolling text that moves from one side of the Web page to the other. Although you can create marquees with just about any form of inline animation, Internet Explorer's <MARQUEE> tag allows you to create a marquee quickly and easily (and you don't need to download any other image or animation files). Figure 9.8 shows a scrolling marquee in Internet Explorer (in the process of scrolling).
Figure 9.8 : A scrolling marquee.
Marquees are a new feature of Internet Explorer that are not yet supported in other browsers. Other browsers will still see the text itself; it just won't be animated.
To create a marquee, use the <MARQUEE> tag. The text between the opening and closing <MARQUEE> tags is the text that will scroll:
<MARQUEE>I'm scrolling!</MARQUEE>
By default, marquees appear on their own line, in the font and size of the enclosing element. So, for example, by enclosing the marquee inside a heading, you can get a heading-sized marquee:
<H1><MARQUEE>I'm scrolling, and large, too!</MARQUEE></H1>
This doesn't work with all HTML elements; you can't, for example, set the enclosing text to be <FONT COLOR=yellow>. Nor can you include HTML font changes inside the marquee itself-all HTML inside the marquee is ignored.
When you create a simple marquee using just the plain <MARQUEE> tags, the marquee that is created scrolls from the right side of the page to the left, disappearing entirely before reappearing on the right again. It loops continually, just slowly enough for you to be able to read it.
You can change the behavior, direction, number of times to loop, and the speed of looping with different attributes to the <MARQUEE> tag:
Marquees take up a single vertical line of space on the Web page, and are transparent to the background color behind them. You can, however, change the appearance of the marquee on the page using several attributes:
Figure 9.9 shows the various parts of the marquee's appearance you can change with these attributes:
Marquees, like the <BLINK> tag, are a very intrusive way of getting the readers' attention. Marquees rivet your readers' attention to that one spot, distracting them from reading the rest of the page. As with <BLINK>, marquees should be used sparingly, if at all, and with a set number of loops (so the scrolling eventually stops). Small marquees are better than large ones, and marquees without background colors are more subtle than those with.
Probably the simplest way to create basic animation is by using a feature of the GIF format that allows you to store multiple GIF images in a single GIF file. When these GIF images are loaded into a browser that understands this special format, the individual images are displayed one after the other, creating an animation. Depending on how the GIF file was originally saved, the animation can either play only once, play a number of times, or loop continuously.
Currently, Netscape 2.0 is the only browser that supports animated GIFs, and not very well at that (for example, there's no way to stop them from animating unless you leave the page they're on, which, depending on how irritating the animation is, can be a problem). However, given how quickly GIF animations have taken hold, it's likely that more browsers will support them by the time you read this.
What happens in browsers that don't support GIF animation? The good news is that they'll display only the first image in the series so that you won't lose the image altogether. The bad news is that storing several GIF images as a single animated GIF file means that the size of that file is the combination of all the individual GIF images, making your image files that much larger and more time-consuming to download. So there are definite trade offs to be considered when deciding whether or not to use GIF animation in your own Web pages.
To create a GIF animation, you'll need two things:
For the first of those things, all you need to do is use your favorite image editor to create each individual frame of the animation. Depending on the complexity of the animation you want to create and how artistic you are, this can be relatively easy or very difficult (most impressive animations on the Web these days are done by professional artists).
When I set out to do a simple GIF animation, I used a black and yellow "Coming Soon" image I use on some of my Web pages and simply blocked out some of the lights around the edge for each of the frames (different ones for each frame, of course). The four frames I created are shown in Figure 9.10.
Figure 9.10 : Four Coming Soon frames.
| Tip |
If you use Photoshop 3.0 for your animation, layers can be really useful; simply create a background that stays constant throughout the animation, and use different layers to do different frames of the animation. Then when you want to create the individual frames, save the Photoshop file somewhere safe, flatten the image to the background and one layer, and save it as a GIF file. |
Once you have your frames, you'll need a program that can convert these images to the special animation format. Unfortunately, this special feature of the GIF format was used very little until the Web discovered it, so most GIF editors do not support it. There are small tools creeping up that do, however:
The GIF animation format allows you to specify several different features of the animation, including how many times to loop (0 to infinite-only infinite is currently supported in Netscape) and the delay between individual frames.
Once you have an animated GIF file to play with, try it in Netscape or in some other tool that supports animated GIF files. In the case of my Coming Soon image, the "lights" around the edge of the box appear to blink on and off like a movie sign.
Java is a new feature on the Web that is getting a lot of people very excited. Java applets are little mini-programs that run on a Web page and can react to user input without having to constantly check back with a Web server (as forms need to do). And, indeed, there's a lot you can do with Java if you know how to program and you're willing to put in the work involved to learn how to use it (you'll learn more about Java later in this book, in fact). But even if you don't care about programming, you can use pre-built Java applets on your pages to create animation effects without touching a line of Java code. All you have to do is download the Java applet to your system, include a few lines of HTML on your page, and everything works just fine (assuming, of course, that you and your readers have a Java-enabled browser).
In this section you'll learn just enough about Java applets to set up animation on your Web page. Later in the week you'll learn more about Java.
One pre-built Java animation applet comes direct from Sun; it's called Animator. Animator can do simple animation with and without additional soundtracks, re-use frames, loop an animation, and control the time between each frame. To create animation using Java and the Animator applet, you'll need three things:
The easiest way to create Java animations without knowing much about Java is to put all your files into the same directory: all the image files, all the class files, and your HTML file.
So, for example, let's say I have 12 GIF images of a pocket watch, each of which has the second hand in a different place on the dial. I've named them T1.gif, T2.gif, and so on, all the way up to T12.gif. Figure 9.11 shows the first few frames of the animation.
Figure 9.11 : The pocket watch animation.
After downloading the Animator class files, I put them and the image files into a single directory called watch. Now the last step is to create an HTML file which will contain that Java animation.
To add Java animation (or any applet) to a Web page, you use the <APPLET> and <PARAM> tags. The <APPLET> tag contains the applet itself and determines how large the applet's bounding box will be on the page. So, for example, to include the Animator applet on your page in a box 100 pixels square, you would use these lines of code:
<APPLET CODE="Animator.class" WIDTH=100 HEIGHT=100>
...
</APPLET>
In my watch example, the size of the images is 129¥166 pixels, so I'll use those values for the WIDTH and HEIGHT:
<APPLET CODE="Animator.class" WIDTH=122 HEIGHT=166>
...
</APPLET>
In between the opening and closing <APPLET> tags, there are several different <PARAM> tags, which indicate different parameters for the Animator applet itself to control the animation. Each <PARAM> tag has two attributes: NAME and VALUE. NAME is used for the parameter name and VALUE for its value. Using different <PARAM> tags, you can include different parameters to pass to the applet-and different applets will require different parameters. The Animator applet has a bunch of parameters to choose from, but I'll mention only a couple here.
STARTIMAGE is the image number to start from, usually 1. If your image filenames start from some other number, you'll use that number. ENDIMAGE, accordingly, is the number of the last image to use in the animation. My watch images are called T1.gif through T12.gif, so the value of STARTIMAGE would be 1 and the value of ENDIMAGE would be 12. Add these to your HTML file inside <PARAM> tags, which in turn go inside the <APPLET> tag:
<APPLET CODE="Animator.class" WIDTH=100 HEIGHT=100>
<PARAM NAME="STARTIMAGE" VALUE="1">
<PARAM NAME="ENDIMAGE" VALUE="12">
</APPLET>
The final parameter you'll usually want to include is PAUSE, which determines how many milliseconds the applet will wait between the images in the animation. By default, the pause is set to 3900 milliseconds (almost four seconds), which is a bit too much of a pause. You can experiment with the pause between frames until you get an animation you like (here I picked 1000 milliseconds, or an even second):
<APPLET CODE="Animator.class" WIDTH=100 HEIGHT=100>
<PARAM NAME="STARTIMAGE" VALUE="1">
<PARAM NAME="ENDIMAGE" VALUE="12">
<PARAM NAME="PAUSE" VALUE="1000">
</APPLET>
Finally, I'll include the REPEAT parameter, which tells the Animator applet to loop the image repeatedly (clicking on the animation will start and stop it):
<APPLET CODE="Animator.class" WIDTH=100 HEIGHT=100>
<PARAM NAME="STARTIMAGE" VALUE="1">
<PARAM NAME="ENDIMAGE" VALUE="12">
<PARAM NAME="PAUSE" VALUE="1000">
<PARAM NAME="REPEAT" VALUE="TRUE">
</APPLET>
With all that in place, you can save and load up the HTML file into your favorite Java-enabled browser. The Animator applet will be loaded, and it in turn loads and plays all the images in sequence.
| Note |
Testing Java applets in Netscape 2.0 can be difficult because Netscape sometimes refuses to reload the page after you've made changes to it. If this happens, try selecting Options | Network Preferences. Under the cache tag, select the buttons that say "Clear Memory Cache Now" and "Clear Disk Cache Now." Then Netscape will reload the new versions of everything properly. |
I've mentioned only a couple of the Animator applet's parameters here in order to get you up and running. The Animator applet includes several other parameters to choose from, including parameters that let you change the location and name of the image files, add a background to the animation or a soundtrack, and control the order that frames are displayed. For more information about what you can do with the Animator applet, see the Animator page at http://www.javasoft.com/applets/applets/Animator/index.html.
One of the earliest and most primitive forms of inline animation in Web pages were the Netscape capabilities for server push and client pull, which were introduced as part of Netscape 1.1. Client pull causes the browser to load the same page or a different page automatically after a certain amount of time has passed; server push keeps the connection between the server and the browser open and continues to feed data down the wire.
The concepts behind server push and client pull are similar: They allow a new page or portion of a page to be loaded automatically after a certain amount of time, without the reader having to select a link or move to a different page. In the case of client pull, this can be used for automatic slide shows or other slow-moving presentations. For server push, multiple images could load into a single page repeatedly, offering a sort of very basic animation.
Server push has fallen out of favor with the Web community, as it requires special setup programs on the server and is complex to set up. Newer forms of animation such as the GIF animation you learned about in this chapter have all but replaced the use of server push on the Web. I'll talk more about server push later in this book when you know more about servers.
Client pull, on the other hand, still has uses, not necessarily as an animation technique, but as a mechanism for pages to automatically reload after a certain amount of time has passed, or for a series of pages to automatically load themselves with a pause between them.
Client pull works on the idea that there is a special HTTP command (called an HTTP header) called Refresh. If a Web server sends the Refresh command to a browser along with a page's data, the browser is supposed to wait a certain amount of amount of time and then reload the page.
Normally, you would have to modify your server to send this special HTTP command with each page. But HTML provides (and Netscape supports) a special HTML tag that, when included inside a Web page, provides a way for the page to "fake" many HTTP headers as if they were sent by the server itself. That special HTML tag is called <META>, a general HTML 2.0 tag for providing information about an HTML page (meta-information). The attribute of the <META> tag that fakes the HTTP header is called HTTP-EQUIV, and its value for causing a page to reload is Refresh. To indicate the amount of time the browser should wait, use the attribute CONTENT. So, to put it all together, if you wanted the browser to reload the current page in four seconds, you would add this tag inside the <HEAD> section of your HTML page:
<META HTTP-EQUIV="Refresh" CONTENT=4>
If the value of CONTENT is 0, the page is refreshed as quickly as the browser can retrieve it (which may not be very fast at all, depending on how fast the connection is-certainly not fast enough for any kind of quality animation).
Note that once you've included this header inside your HTML page, the browser will continue to reload that page, repeatedly. To get it to stop, you'll have to provide a link on that page to somewhere else that doesn't have a client pull tag inside it.
Client pulls that repeatedly load the same page are useful for pages that are continually being updated-for example, for live data such as stock quotes or sports scores. Another use of client pull is to load a different page after a certain amount of time, instead of loading the same page over and over again, for example, to step automatically through a series of slides or instructions.
To use the <META HTTP-EQUIV> to load a different page from the current one, add the URL of the next page to the value of the CONTENT attribute for the current page, like this:
<META HTTP-EQUIV="Refresh"
CONTENT="4;URL=http://mysite.com/page2.html">
Note that the URL you put inside CONTENT has to be a full URL; that is, it cannot be a relative pathname. It has to start with http://.
Inside the second page, you can include a pointer to the next page in the series, and inside that page, a pointer to the next page. Using this method, you can have any number of pages load automatically in a sequence. However, just like with the pages that load repeatedly, it's a good idea to provide a link out of the automatic reloading, so that your readers won't be forced to sit through your presentation if they don't want to.
Of all the new advances made in recent months to support more inline multimedia and animation on the Web, the one that will likely have the most significant effect over the long term is that of plug-ins.
Plug-ins are sort of like helper applications, except that instead of existing entirely separately from the browser, they add new capabilities to the browser itself. A video plug-in, for example, could allow video files to be played directly inline with the browser. A spreadsheet plug-in would allow editable spreadsheets to be included as elements inside a Web page. The plug-ins can also allow links back to the browser as well-so, for example, that spreadsheet could theoretically have links in it that could be activated and followed from inside the plug-in.
Netscape introduced the concept of plug-ins with the 2.0 version of their browser. Plug-ins are already available for many forms of sound and video; in fact, the new version of Netscape includes sound and video plug-ins already installed.
The problem with plug-ins is that if you use plug-in capabilities in your Web pages, all your readers will need to have a browser that supports plug-ins (currently, only Netscape). They must also have that plug-in installed and available (readers that don't have your plug-in will get empty space or broken icons on your page where the media should be). And many plug-ins are available only for some platforms. For some forms of media, you may also need to configure your server to deliver that new media with the right content-type.
Plug-ins are an advanced Web feature, and because of that I'm going to wait to go into them in detail until later in this book (Chapter 27 to be exact). But because this is the multimedia and animation chapter, I do want to mention one significant plug-in for both these topics: Shockwave from Macromedia.
Shockwave is a plug-in that allows Macromedia Director movies to be played as inline media on a Web page. Macromedia Director is an extremely popular tool among professional multimedia developers for creating multimedia presentations, including synchronized sound and video as well as interactivity (in fact, many of the CD-ROMs you can buy today were developed using Macromedia Director). If you're used to working with Director, Shockwave provides an easy way to put Director presentations on the Web. Or, if you're looking to do serious multimedia work on the Web or anywhere else, Director is definitely a tool to check out.
You'll learn more about using plug-ins and using Shockwave in particular in Chapter 27.
In this chapter you learned about two main topics: external media files and inline multimedia and animation.
External media files are files that cannot be read directly by your Web browser. Instead, if you link to an external file, your browser starts up a "helper" application to view or play those files. In this chapter, you learned about how external media works, using sound and video files as external media, and some hints for designing external media files.
The second half of this chapter focused on inline multimedia in Netscape and Internet Explorer using new tags and capabilities of those browsers, including tags for inline sound and video, scrolling marquees, inline GIF animation, and Java applets. Table 9.3 shows a summary of the tags you learned about today.
| Tag | Attribute | Use |
| <IMG> | DYNSRC | Include an AVI file instead of an image. If the AVI file cannot be found or played, the normal image (in SRC) is shown. |
| CONTROLS | Shows a set of controls under the AVI movie. | |
| LOOP | The number of times to repeat the AVI movie. If LOOP is -1 or INFINITE, the movie loops indefinitely. | |
| START | If START=FILEOPEN, the AVI movie begins playing immediately. If START=MOUSEOVER, the movie starts playing when the reader moves the mouse over the movie. | |
| <BGSOUND> | Plays a background sound. | |
| LOOP | The number of times to repeat the sound. If LOOP is -1 or INFINITE, the sound loops indefinitely. | |
| <MARQUEE>... </MARQUEE> | Create a scrolling text marquee. | |
| BEHAVIOR | If BEHAVIOR=SCROLL, the marquee scrolls in from one side of the screen to the other side and then off. If BEHAVIOR=SLIDE, the marquee scrolls in from the right and stops at the left margin. If BEHAVIOR=ALTERNATE, the marquee bounces from one side of the screen to the other. | |
| DIRECTION | If BEHAVIOR=SCROLL, the direction the marquee scrolls in. | |
| LOOP | The number of times to repeat the marquee. If LOOP is -1 or INFINITE, the marquee loops indefinitely. | |
| SCROLLAMOUNT | The number of pixels to move for each step of the animation; higher numbers mean the marquee moves faster. | |
| SCROLLDELAY | The number of milliseconds between each step of the animation; higher numbers are slower. | |
| BGCOLOR | The background color of the marquee's bounding box (can be a color number or name). | |
| HEIGHT | The height of the marquee's bounding box. | |
| WIDTH | The width of the marquee's bounding box. | |
| HSPACE | The amount of space between the left and right edges of the marquee and its surrounding text. | |
| VSPACE | The amount of space between the upper and lower edges of the marquee and its surrounding text. | |
| ALIGN | The alignment of the marquee with the text before or after it. Possible values are TOP, MIDDLE, or BOTTOM. | |
| <APPLET>... </APPLET> | Includes a Java applet on the Web page. | |
| CODE | The name of the applet's class. | |
| WIDTH | The width of the applet's bounding box. | |
| HEIGHT | The height of the applet's bounding box. | |
| <PARAM>... </PARAM> | Parameters to be passed to the applet. | |
| NAME | The name of the parameter. | |
| VALUE | The value of the parameter. | |
| <META> | Meta-information about the page itself. | |
| HTTP-EQUIV | An HTTP header name. | |
| CONTENT | Generally, the value of any meta information tags. For client pull, the number of seconds to wait before reloading the page; can also include a URL to load. |
| Q | My browser has a helper application for JPEG images listed in my helper applications list. But when I downloaded a JPEG file, it complained that it couldn't read the document. How can I fix this? |
| A | Just because an application is listed in the helper application list (or initialization file) doesn't mean that you have that application available on your system. Browsers are generally shipped with a default listing of helper applications that are most commonly used for the common external file formats available on the Web. You have to locate and install each of those helper applications before your browser can use them. The fact that an application is listed isn't enough. |
| Q | I've been using AU files for my sound samples, but there's an awful hiss during the quiet parts. What can I do? |
| A | Some sound-editing programs can help remove some of the hiss in AU files, but because of the nature of AU encoding, you'll usually have some amount of noise. If sound quality is that important to you, consider using AIFF or, if you have the converters, MPEG audio. |
| Q | Why don't my MPEG files have sound? |
| A | Maybe they do! The MPEG standard allows for both video and audio tracks, but few players can handle the audio track at this time. You have two choices if you must have sound for your MPEG movies: Wait for better players (or bribe a programmer to write one), or convert your movies to QuickTime and show your readers how to install and use QuickTime players. |
| Q | I'm using the Animator applet. I've got a bunch of Java animation that I want to put on different files, but if I put them all in the same directory I can't name them all T1, T2, and so on, without naming conflicts. What do I do? |
| A | The Animator applet contains a lot of parameters I did not include in this chapter. One of them, IMAGESOURCE, takes a directory name relative to the current directory for images. So you can store your images in individual subdirectories and avoid naming problems. Using other Animator parameters you can also change the names from T1, T2, and so on. See the URL for the animator applet for details. |