|
|
by Dick Oliver
The mantra of successful multimedia CD-ROM developers and marketers has been, "It's the content, stupid." In other words, the beauty and utility of the content matter a lot more than how much content there is, how fast it displays, or how many technical bells and whistles you add to it. The same mantra rings true for the Web.
After you have the content, there are essentially three other factors to consider: bandwidth, bandwidth, and bandwidth. The number of bytes per second that fly from your site to most of your visitors is by far the most significant factor in determining what you put on your pages today.
In this chapter, you'll see a site that isn't very practical for the Internet at large, given the current bandwidth of the modem-toting masses. However, literally hundreds of companies are rushing to provide high-bandwidth connections via TV cables, ASDL (Asychronous Digital Subscriber Lines), "copper optics" technologies, satellite services, and pumped-up cellular connections. If even a few of them succeed, the kind of site you see here will become commonplace.
In the meantime, multimedia sites are already becoming commonplace on corporate intranets, where high-bandwidth connections are more economical to maintain. And, of course, you have the luxury of a CD-ROM drive at hand so you can enjoy the music and video as if you had your own T1 line straight to the site and were its only bandwidth-hogging visitor.
If you're going to make a multimedia site, you need to start with some multimedia. For the examples in this chapter, I started with an AVI music video, a WAV sound file, and a simple logo in a WMF graphics file. All this content was produced by The Sponge Awareness Foundation, or SAF-a couple of mildly deranged young men with too much recording equipment on their hands. Their songs have gotten some national play on the Dr. Demento radio show, and the video was used as a sample file on some digital video software CD-ROMs. Continuing in the spirit of that proud heritage, a cutting-edge Web site on the Web Publishing Unleashed, Professional Reference Edition CD-ROM seemed in order. (In case you're wondering, no, I'm not one of the two SAF members-despite the coincidence of also being a mildly deranged young man with too much equipment on my hands.)
Notably lacking from this formidable arsenal of content were any thematic icons or background textures, but then again, videos contain a lot of pictures, right? So, I just used the Capture | Area command in Paint Shop Pro to steal some frames from the AVI video, and then painted out the backgrounds to make transparent gif icons, as shown in Figure 50.1. (Paint Shop Pro is a shareware graphics program included on the CD-ROM with this book and discussed in Part IV, "Enhancing Web Pages with Graphics.")
| Tip |
Without too much work, you could use Paint Shop Pro to carefully paint the background out from around icons like the dancing sponge in Figure 50.1. But this is the ultimate modern site, so I allowed myself to indulge in the power of Adobe Photoshop's color range selection feature, which made the job much easier and faster. It's up to you to decide if you're going to be doing this sort of thing often enough to justify the big bucks for Photoshop or another pricey commercial graphics program. Most Webmasters will find it easier and faster to use Paint Shop Pro than to take the time to learn (and pay for) Photoshop. |
A seriously rocking band like SAF clearly requires a seriously rocking background for its Web page. I snagged a thematic design from the climactic ending scene in the music video, in which the Land Where Sponges Never Die morphs and warps into oblivion. I could have used the paint-and-paste technique described in Chapter 20, "Backgrounds, Image Maps, and Creative Backgrounds" for making tilable backgrounds, but there's an even quicker way to tile abstract designs such as this one. Figure 50.2 and the numbered steps that follow it describe how.
The final tile is /saf/theland.jpg on the CD-ROM and is pictured in all the rest of the figures in this chapter. I used the same technique to turn part of the sky of the Land Where Sponges Never Die into another background tile, /saf/theland2.jpg. This background is used behind the spinning 3D virtual reality logo in /saf/saf3d.htm.
By the way, did I mention yet that there's a spinning 3D virtual reality logo in /saf/saf3d.htm? Sure, I could have just put the SAF logo graphic at the top of a home page and called it good, but how about one of those much-too-cool interactive virtual reality thingamabobs instead? Now we're talking.
The sophisticated way to pull something like this off would be to go into a VRML modeling program (or hack together some VRML by hand) to model each line and shape in the logo with shiny 3D shapes and surfaces. But doing a fairly complex logo that way would probably involve paying a 3D modeling guru (like me) more money than SAF made on their entire 1992 Crumbling City tour of upstate New York. So, yeah, let's think "way cool." But let's think "way easy" (and "way cheap") while we're thinking "way cool," okay?
Time for the old transparent-bitmap-on-a-spinning-box trick! Check out the absurdly simple VRML file in Listing 50.1. Could a single cube at the default size possibly be cool enough to honor the SAF? You bet. As Figure 50.3 demonstrates, this basic VRML cube makes brain-boggling rotating transparent logos in front of a dramatic moving backdrop.
Listing 50.1. /saf/safcube.wrl
#VRML V1.0 ascii
DEF BackgroundImage Info{ string "THELAND2.jpg" }
SpinGroup {
rotation 0 1 1 -.1
Separator {
Texture2 { filename "saf.gif" }
Material { diffuseColor 0 0 1 }
Cube {}
}
}
To see the cube in action, open the /saf/saf3d.htm document. If you have a VRML-enabled browser, you'll see the spinning logo in Figure 50.3, and you will be able to control its motion by grabbing it with your mouse. (With Live3D, the left button zooms and pans while the right button rotates.) If you don't have a VRML-enabled browser, you'll see the 3D-looking image in Figure 50.4, but mouse clicking and dragging will have no effect on it.
Microsoft Internet Explorer 3.0 and Netscape 2.0 plug-ins, such as Live3D, use two different HTML commands to embed VRML worlds into a Web page. Here's how to add the safecube.wrl to a page so that both of these browsers will treat it the same:
<EMBED SRC="safcube.wrl" WIDTH=500 HEIGHT=240> <NOEMBED> <IMG SRC="safsub.gif" DYNASRC="safecube.wrl" WIDTH=500 HEIGHT=240> </NOEMBED>
If you're using Netscape with any VRML plug-in, the <EMBED> tag will work. The <IMG> tag will try the Microsoft-style DYNASRC attribute to insert a 3D world. If both of these tags fail (meaning you don't have a VRML-enabled browser), the <IMG> tag will just display the safsub.gif image in Figure 50.5.
Figure 50.5 : Some Internet Explorer 3.0 users may not see the texture maps shown in Figure 50.3.
| Tip |
To make the safsub.gif image, I used Paint Shop Pro's Capture | Area command to take a screen shot of Netscape Live3D while it was displaying the VRML cube. This is a handy way to at least give non-VRML users a peek at what they're missing! |
The only problem that might come up is for users who have both Internet Explorer 3.0 and Netscape Navigator 3.0 installed at once. In that case, Explorer may interpret the <EMBED> command as an instruction to embed a copy of Netscape Navigator with Live3D in the Web page, in which case it will ignore the DYNASRC tag. Unfortunately, when Navigator and Live3D 3.0 are embedded in this way, the texture mapping may not work correctly, and users may see a plain blue cube with no logo on it. Although this is a bummer, it's not the end of the world.
| Note |
Both Netscape and Microsoft are in the process of revamping their approaches to VRML support to accomodate VRML 2.0 and other new technologies, so the appropriate HTML code for inserting VRML is likely to change soon. Keep your eye on www.microsoft.com and home.netscape.com for the latest VRML browser news. |
After whetting visitors' appetites with this virtual reality treat, I gave them some links to the multimedia parts of this multimedia site (see Figure 50.6). As you look over the code for this whole page in Listing 50.2, you may note that I staggered the icons through a creative use of the IMG ALIGN="left" attribute. The only other formatting tricks used on this page are some font size and color changes to make the text readable over such a loud background.
Listing 50.2. /saf/saf3d.htm.
<HTML> <HEAD><TITLE>The Sponge Awareness Foundation</TITLE></HEAD> <BODY BACKGROUND="theland.jpg" TEXT="black" VLINK="silver" LINK="yellow" BGCOLOR="red"> <CENTER> <TT><FONT SIZE=7><B>The Sponge Awareness Foundation</B></FONT></TT><BR> <FONT SIZE=5> <I><B>"We're not a rock band, but we play one on TV."</B></I></FONT><P> <EMBED SRC="safcube.wrl" WIDTH=500 HEIGHT=240> <NOEMBED><IMG SRC="safsub.gif" DYNASRC="safecube.wrl" WIDTH=500 HEIGHT=240></NOEMBED><P> </CENTER> <FONT SIZE=5><B>Welcome to our much-too-cool, cutting-edge, high-bandwidth Web-site-on-a-CD-ROM. The innocent looking logo at the top of this page is really one of those unbelievably nifty 3D virtual reality thingamabobs. Try flying around it by clicking and dragging with the right mouse button. Bet you think we're slick now, hey?! <FONT SIZE=4>(You do if you have Live3D or another VRML texture-mapping plug-in installed,that is. Otherwise, you can click till the cows come home and you won't see much until you <A HREF="http://home.netscape.com/">go to Netscape</A> and get one. Or if you're using an old-fashioned VRML helper app, you can <A HREF="safcube.wrl" click here to view the 3D logo</A>.)<P></FONT> Anyway, now that you're obviously impressed beyond words with how totally <I>neuveau</I> we are, you probably want to find out everything about us and hear us sing, too. So here's your chance to:</B><P></FONT> <A HREF="saf.htm"><IMG SRC="engorged.gif" ALIGN="left" BORDER=0><BR> <H2>Absorb awareness of <BR><TT>Sponge Awareness</TT></A></H2> <A HREF="devious.htm"><IMG SRC="devious.gif" ALIGN="left" BORDER=0><BR> <H2>Soak up the soothing sounds of <BR><I>Have a Devious Day</I></A></H2> <A HREF="sos.htm"><IMG SRC="warped.gif" ALIGN="left" BORDER=0><BR> <H2><B>Cleanse your consciousness with the <I>Society of Sponges</I> music video</A></H2> <BR CLEAR="all"><P> <CENTER><FONT SIZE=2> <I>All music here is copyright 1991-1996 Edgar C. Lecuyer and Kevin Eldridge. All Rights Reserved</I></FONT></CENTER> </BODY> </HTML>
If you've read my Chapter 19, "Animating Graphical Images" and Chapter 48, "Designing and Publishing a Perfect Web Page," you've probably figured out that I like gif animations. It probably won't be a big surprise, then, when you load /saf/saf.htm or click the Absorb awareness of Sponge Awareness link in the saf3d.htm document.
Sure enough, I couldn't resist. Figures 50.7 and 50.8 confirm that the image at the top of /saf/saf.htm is just what you expected: flashing colors, winking eye, that kind of thing. I won't list the HTML for this page because it's nothing too special. Chapter 19 gives you the skinny on how to make gif animations like this if you haven't become addicted to them already.
Making a full-length song play when a page loads is no different than playing a quick sound bite like the "Aloha!" discussed in Chapter 48. The simplicity of Listing 50.3 is proof that it isn't rocket science to blast rock-and-roll through a Web page. Notice that both the Netscape <EMBED> tag and the Microsoft <BGSOUND> tag are included and that a link is also provided for people who only have a helper app such as Windows Media Player.
The only other thing to notice about this document is that the 400-pixel width of the background combined with a centered graphic make a lovely symmetrical design when viewed at 800¥600 resolution (Figure 50.9). This doesn't look as nice at other window sizes, but so many people use 800¥600 resolution that effects like this are well worth cultivating.
Listing 50.3. /saf/devious.htm.
<HTML> <HEAD><TITLE>Have a Devious Day</TITLE></HEAD> <BODY BACKGROUND="theland.jpg" BGCOLOR="red" TEXT="black" LINK="yellow" VLINK="silver"> <CENTER> <FONT SIZE=6><TT><B>The Sponge Awareness Foundation</B></TT></FONT><BR> <B>Presents</B><P> <FONT SIZE=7>Have a Devious Day</FONT><BR> <IMG SRC="devious.gif"><BR> <EMBED SRC="devious.wav" WIDTH=145 HEIGHT=60> <NOEMBED><BGSOUND="devious.wav"></NOEMBED> </TABLE> </TD></TR></TABLE> </CENTER> <FONT SIZE=5><B> If you have a WAV-compatible Web browser or plug-in, you can click on the play button above to enjoy the music. If you only have a WAV helper app that doesn't support embedding (which means there isn't a play button above to click on), you can just <A HREF="devious.wav">click here to play the song.</A><P> If you don't have a sound card and speakers, I'm afraid there's not much we can do for you here. Try yodeling in the shower instead. (No, it's fun--really!)<P> Oh, did we mention that this song, recorded in 1992, has never before been publicly released? So you're pretty lucky to have this opportunity to hear it, don't you think? We thought so.<P> <CENTER> <A HREF="saf3d.htm"><BR> <IMG SRC="saf3d.gif" BORDER=0><BR>Click your heels three times, Dorothy...</A> </CENTER> </B></FONT> </BODY> </HTML>
Embedding video that is compatible with both the Netscape and Microsoft extensions to HTML is as simple as embedding sound or VRML files. On the /saf/sos.htm page pictured in Figure 50.10, I added nested table borders around the video window, so viewers could get that cozy and comfortable boob-tube feeling even before the video begins.
Figure 50.10: Make it look like a TV, and Americans will watch anything.
As discussed in Chapter 22, "Adding Multimedia to Your Web Site," it may be impossible to specify WIDTH and HEIGHT attributes for the <EMBED> tag that work well with both Netscape plug-ins (see Figure 50.10) and embedded helper applications that display playback controls (see Figure 50.11). Though the video may get squashed a bit, it will at least be viewable in both situations.
Writing the HTML to implement the embedded video was just slightly easier than programming the clock on my VCR. (OK, it was a lot easier. The real reason you can't buy books about VCR programming is that they can't find any authors who have figured it out.) As with the embedded VRML world, the <EMBED>, <NOEMBED>, <IMG DYNSRC>, and <IMG SRC> tags are all used together:
<EMBED SRC="sos.avi" WIDTH=320 HEIGHT=200> <NOEMBED> <IMG DYNASRC="sos.avi" WIDTH=320 HEIGHT=200 SRC="sponges.jpg"> </NOEMBED>
If you're using Netscape Navigator 2.0 (or higher) and an AVI plug-in is installed, it will play sos.avi using the <EMBED> tag (refer to Figure 50.10). If no AVI plug-in is installed, or if a non-Netscape browser is being used, the <IMG> tag will come into play. If Microsoft Internet Explorer 3.0 is being used, it will either use Object Linking and Embedding (OLE) to embed an AVI player with the EMBED tag, or it will see the DYNASRC attribute and embed the sos.avi video. Any other browser will just see the <IMG> attribute and display sponges.jpg instead (see Figure 50.12). Isn't standardization wonderful?
And the plot thickens: If a user of an aging browser sees those sponges just sitting there, but still wants to see the video, she or he can click the link provided a little further down the page to display the video in a separate window (see Figure 50.13). If this page were online instead of on a CD-ROM, those users would have to wait for the whole video to download before they could start viewing it.
Listing 50.4 reveals the whole sos.htm document, just to prove there's nothing else fishy up my sleeve this time.
Listing 50.4. /saf/sos.htm.
<HTML> <HEAD><TITLE>Society of Sponges</TITLE></HEAD> <BODY BACKGROUND="theland.jpg" BGCOLOR="red" TEXT="black" LINK="yellow" VLINK="silver"> <CENTER> <FONT SIZE=6><TT><B>The Sponge Awareness Foundation</B></TT></FONT><BR> <B>Presents</B><P> <TABLE BORDER=20> <TR><TD><CENTER> <FONT SIZE=6>Society of Sponges</FONT></CENTER><BR> <TABLE BORDER=15> <TR><TD><EMBED SRC="sos.avi" WIDTH=240 HEIGHT=160><NOEMBED><IMG DYNASRC="sos.avi" WIDTH=320 HEIGHT=200 SRC="sponges.jpg"></NOEMBED></TD></TR> </TABLE> </TD></TR></TABLE> </CENTER> <FONT SIZE=5><B> If you have an AVI-compatible Web browser or plug-in, click on the above video (once it finishes loading) to play it. Or if you're using Microsoft Explorer 2.0 or some hokey helper app that plays AVI videos in a Window, I guess you could just <A HREF="sos.avi">click here to play the video</A>. And while you're at it, check out the ultra-kewl video editing and special effects software used to make the Society of Sponges video, at <A HREF=" http://www.andatech.com/">the Andover Advanced Technologies web site</A>.<P> <CENTER> <A HREF="saf3d.htm"><BR> <IMG SRC="saf3d.gif" BORDER=0><BR>Enough of this. Take me home now.</A> </CENTER> </B></FONT> </BODY> </HTML>
| Note |
If this were really and truly the high-bandwidth site of the far distant future, we could make a bigger table full of multiple copies of the video for that totally-hip "TV store" look. Such things are easy enough to code in HTML. Now if somebody would just run fiber optics to every home and business in the world already…. |
The sample pages in this chapter obviously haven't even begun to exhaust the possibilities for enhancing this modern site. Here are some of the ways to add even more cutting-edge features to this site:
Of course the possibilities explode if you are (or are willing to hire) a programmer. You can then produce your own custom OC components, Java applets, or CGI scripts.
A no less ambitious way to add sophistication to a high-bandwidth site is to improve the production quality of the audio-visual media files you post there. Alas, this book would need many thousands more pages if it were to include a complete course on cinematography and interactive multimedia production!
This chapter has followed the development of a multimedia Web site from designing the background and layout to embedding VRML, sound, and video in the Web pages. This book gives you the chance to fully participate in the world of online, interactive media today. And those who are involved today will undoubtedly be a step ahead tomorrow, when professional-quality audio-visual productions can be successfully served over the Internet-or the speedier parts of it, at least.
