Special Edition Using HTML 4

Previous chapterNext chapterContents


- 26 -
Multimedia Applets

by Mark R. Brown

Adding Multimedia

Among the dozens of available multimedia authoring systems, it seems as though every one of them has a plug-in for delivering its particular brand of multimedia file inline in HTML documents. Is all this extra delivery really necessary?

In the context of the "big picture," it probably isn't. Java and JavaScript are turning out to be the tools of choice for application, animation, and multimedia applications in HTML documents, mostly because the major browser programs--Netscape Navigator and Microsoft Internet Explorer--support embedded Java applets. (Java and multimedia are discussed later in this chapter.)

That development means you have to be a programmer to develop multimedia content for your pages, and not all of us are programmers. Thanks to multimedia plug-ins, we don't have to be. If your users are willing to download and install a plug-in, you can use any of the multimedia programs discussed in this chapter to bring multimedia content to your site. You can pick the tool that's most appropriate to your requirements.

Over corporate intranets, the solution is even simpler. If you've been using one of the programs to create presentations, training materials, or other multimedia content for your company, you can instantly make that content available to your entire organization by installing the right plug-in on all your desktop systems. You get another advantage from the fact that anyone can develop multimedia for your intranet using end-user development programs. You don't have to rely on your programmers to do it for you.

ASAP WebShow

Software Publishing Corporation's ASAP WebShow 2.0 is a plug-in for viewing, downloading, and printing ASAP WordPower presentations or for participating in real-time ActivePresenter presentations. Similar to PowerPoint presentations, WordPower and Active Presenter presentations can contain tables, organization charts, bullet lists, and other graphic and text elements in a slide show format. Because the files are compressed, they can be transmitted very quickly.

You can embed presentations and reports as icons or live thumbnails or in a window on a page. Each slide can be viewed in a small area window, enlarged to fill the current page or zoomed to full screen. You can select one slide at a time or watch a continuously running show. The latest version even allows attached RealAudio sound.

Windows 95 and Windows 3.1 versions are available (see Figure 26.1), and you can even download a fully functional copy of ASAP WordPower for a free 30-day trial for creating your own WebShow-compatible presentations. All are available at http://www.spco.com/PRODUCTS/WSMAIN.htm.

FIG. 26.1
The ASAP WebShow toolbar and right mouse button pop-up menu give you complete control when viewing its PowerPoint-style slide show presentations with your browser.

You use ASAP WordPower to create the slide shows for your pages. It can import PowerPoint 7.0 files and convert them to ASAP WordPower format. You can even drag and drop individual slides from the PowerPoint slide viewer into WordPower. ASAP WordPower also imports graphics files in PCX, BMP, WMF, TIF, and GIF formats. Built-in transition effects, dozens of border styles, and a set of startup templates simplify the creation of compelling slide shows. The suggested retail price for ASAP WebShow is $99.

Slide show sound is handled through integration with RealAudio.

The ASAP WebShow Presentation Kit contains everything you need to create, view, and hear a presentation in your HTML documents. For $129, you get both Windows 95 and Windows 3.1 versions of the ASAP WordPower presentation creation program, the ASAP Viewer plug-in, the ASAP Image Compressor, the RealAudio Player program, a two-stream RealAudio Server (Windows 95/NT only), and the RealAudio Encoder (which creates RealAudio files).

The ASAP Image Compressor is an add-on for ASAP WordPower and lets you save presentations in a compact format. The Compressor allows you to adjust the balance of image quality and file size in a compressed presentation. (Only the bitmap images in a presentation are compressed.) The ASAP Image Compressor is also available for download from the ASAP Web site.

To use ASAP WebShow presentations in your own pages, you must set the MIME type application/x-asap to the file name extension ASP on your server.

ASAP WebShow content is embedded on HTML pages using the <EMBED> tag, along with the required SRC, HEIGHT, and WIDTH parameters.

In addition, WebShow supports a wide range of additional <EMBED> tag parameters. If you don't use any of the optional parameters, default settings result in a display that puts the presentation in an embedded window, includes a navigation bar, and provides the capability to save, print, and edit the presentation. Following are some of the most important WebShow optional parameters; for a full list, consult the WebShow documentation or refer to the help pages on the ASAP Web site:

AUTOADVANCE= ON|OFF If ON, automatically advances to each slide. To temporarily stop autoadvance, click the Pause button on the navigation bar or right-click in the ASAP WebShow window and select Pause from the pop-up menu. To completely turn off autoadvance, right-click in the ASAP WebShow window and then click Disable Auto Advance. To turn on autoadvance from the current slide, select Enable Auto Advance from the pop-up menu.
BORDER= RAISED|RECESSED|SLIDE| SHADOWED|SIMPLE|NONE Changes the border type.
DELAYTIME= <INTEGER> In seconds, indicates the delay before advancing to next slide when in autoadvance mode.
DITHERING= EMBED|PAGE|SCREEN|NONE For 256-color screen display only, specifies dithering method.
EFFECT= <EFFECTNAME, DIRECTION> Transition effect between slides. Transitions include:

Effect Name Direction
BLINDS LEFT|RIGHT
BLINDS UP|DOWN
CLOSE HORIZONTAL|VERTICAL
FADE
DEFAULT
IRIS IN|OUT
NONE
OPEN HORIZONTAL|VERTICAL
RAIN UP|DOWN
REPLACE
SCROLL UP|DOWN
SCROLL RIGHT|LEFT
WIPE UP|DOWN
WIPE RIGHT|LEFT
PEEL UPPERRIGHT|LOWERLEFT
PEEL UPPERLEFT|LOWERRIGHT
LOOPBACK= ON|OFF If ON, presentation loops on playback.
MENU= ON|OFF If ON, enables the right mouse button pop-up menu.
NAVBAR= ON|OFF If ON, displays the navigation bar.
NAVBUTTONS= ON|OFF If ON, displays the Next Slide, Previous Slide, and Go to Slide buttons on the navigation bar.
ORIENTATION= LANDSCAPE|PORTRAIT| N:M|FREEFORM Specifies how the presentation slide page fits in the window. LANDSCAPE or PORTRAIT maintains the aspect ratio by displaying the slide show in letter-box format. N:M uses the custom aspect ratio specified, where N and M represent the proportion between width and height. With FREEFORM (default), the slide fills the available window space.
PALETTE= FOREGROUND|BACKGROUND If FOREGROUND, uses the embedded object's palette as the palette for the display window.
PAUSE= ON|OFF If ON, autoadvance slide shows pause before playing.
PAUSEBUTTON= ON|OFF If ON, includes the Pause button on the navigation bar.
PRINTING= ENABLED|DISABLED If ENABLED, the Print This Presentation menu item appears on the pop-up menu.
SAVEAS= ENABLED|DISABLED If ENABLED, the Save This Presentation As menu item appears on the pop-up menu.
SOUND= <URL OF A SOUND CONFIGURATION FILE> Specifies a sound configuration file to play.
ZOOMBUTTONS= ON|OFF If ON, Zoom buttons for full page and full screen appear on the navigation bar.

ASAP WebShow supports sound by invoking the RealAudio server. Because RealAudio uses a special server program, WebShow presentations can't embed RealAudio RA files directly. Instead, you use the SOUND attribute of the EMBED command to specify the URL of a sound configuration file, which is simply a text file that contains the URL of the actual RealAudio file.

You can create a sound configuration file using a text editor. Here's the syntax:

<slide#>=<URL of the RealAudio sound file on the RealAudio server>

Here's a real-world example:

1=pnm://audio20.prognet.com/test/jupiter/slide1.ra
2=pnm://audio20.prognet.com/test/jupiter/slide2.ra
3=pnm://audio20.prognet.com/test/jupiter/slide3.ra

You can include as many RA files in a sound configuration file as you want. However, the URL you put in the SOUND attribute definition with the <EMBED> tag must be absolute, not relative. In other words, it must be a complete URL. Here's an example:

<EMBED SRC="DEMO2.ASP" Width="300" Height="170" sound="http://www.spco.com/
asap/presents/rasound.txt">

ASAP WebShow is a powerful tool for creating business slide show-style presentations, and its <EMBED> tag attributes let you control most of the plug-in's behavior through HTML.


TIP: If you want to publish your Microsoft PowerPoint presentation on the Web, you can use the PowerPoint Animation Player that you find at http://www.microsoft.com/powerpoint/internet/player/default.htm.

Shockwave for Macromedia Director

Shockwave for Director is a plug-in that lets you play multimedia movies created with the most popular multimedia creation tool available today--Macromedia Director. In this section, you take a close look at the process involved in using the Shockwave plug-in for Netscape Navigator--and the Shockwave ActiveX control built into Microsoft Internet Explorer 4.0--to deliver Director content on your pages.

Director versus Java and JavaScript

The Shockwave for Director plug-in came before Java; it was introduced at about the same time as Netscape Navigator 2.0, which added plug-in capability. Hundreds of developers began using Macromedia Director--literally overnight--to add animation and interactive multimedia content to their Web sites. Many of them already had Director movies on hand that they had created for other applications. All they had to do was run them through the new Afterburner Xtra module and place the converted movies on their Web pages using the <EMBED> tag.

Suddenly, Web pages included inline animations, games, and button-rich interactive multimedia presentations. It was clear the Web would never be the same again.

Then Netscape added support for Java and JavaScript. Shockwave didn't go away, but suddenly, Java was the new darling of Web site developers. Animations, presentations, and even interactive multimedia sites multiplied by the thousands. Now it seems as though Java and JavaScript are all you hear about.

Did Java and JavaScript kill Shockwave? Did they completely take over the multimedia and animation niche that the Shockwave for Director plug-in had created? Hardly. With a quarter of a million copies of Director in use, Macromedia is still doing quite well. Java and JavaScript jumped into a niche that was expanding so rapidly that there was plenty of room. Shockwave could hold its own and also keep expanding its influence, even as Java and JavaScript carved out their own territories.

In truth, Java and Director appeal to two inherently different types of people. You develop content with Macromedia Director in a friendly point-and-click environment that uses a stage metaphor. You bring in casts composed of actors, who strut their stuff on a stage. The end result is even referred to as a movie. Director includes painting and animation tools with menus, dialog boxes, and buttons. People who are used to creating content with end-user applications such as Word and Paint are those who are most comfortable developing multimedia content using Director.


NOTE: Don't confuse Director movies with digitized video movies such as Video for Windows or QuickTime files. Although they share a common name, Director movies are much more than a simple sequence of images; they are multimedia scripts.

On the other hand, Java and JavaScript are programming languages. They resemble the C programming language, which is the most popular language for developing applications, so they appeal mostly to programmers. People who think in terms of code and programs are more likely to develop their multimedia content with Java and JavaScript.


NOTE: Although you use a user-friendly program to create Director movies, the end result is actually a script or set of scripts in a language called Lingo. You can edit these scripts or even write your own from scratch. Director really offers the best of both worlds.

What You Can Do with Shockwave for Director

The Shockwave for Macromedia Director plug-in (see Figure 26.2) can integrate animation, bitmap, video, and sound and can bundle all of them with an interactive interface, complete with control buttons and graphic hot spots. Its playback compatibility with a variety of computer platforms including Windows, Macintosh, OS/2, and SGI has helped make Director the most widely used professional multimedia authoring tool.

Using Shockwave for Director, a Director movie run over the Internet can support the same sort of features as a Director movie run off a CD-ROM, including animated sequences, sophisticated scripted interactivity, user text input, sound playback, and much more. You can even add hot links to URL addresses.

You can download the Shockwave for Director plug-in from Macromedia's Web site at Shockwave, http://www.macromedia.com.

Before the mechanics of Director are discussed, consider what you can do on your site with the Shockwave plug-in for Director.

FIG. 26.2
The Shockwave for Director plug-in features no controls or menus of its own. Any such controls must be provided as part of the Director movie.

Although you are only limited by your imagination (and network download times), there are several categories that lend themselves well to Director solutions:

Creating Director Movies for Shockwave

How do you actually create Director movies? The simple answer is with Macromedia Director. The creation process involves many steps and a bit of a learning curve. Although Director is an excellent tool, multimedia files are content-rich, which is another way of saying they are complex. Even a relatively unambitious file can include still graphics, animation sequences, digitized audio or video, and interactive components. Creating all of that content and tying it together is a significant challenge, even if you've got the right tools.

To start with, you need a copy of Macromedia Director. At $850 retail, it's not cheap, but it's worth every penny if you plan to create much in the way of multimedia.

Director 6.0 (the latest version) is available for Windows 95/NT, Windows 3.1, Power Macintosh, and Macintosh.

Director is based on a theater metaphor. You have a stage where you can view your Director movie. Behind the scene, you have a cast window that stores all your media objects. These media objects can be sounds, 2-D and 3-D graphics, animations, digital video, text, and even database objects. To organize your media elements on the stage, you use the score. The score window allows you to precisely sync your media elements and provide different layers of elements on the screen.

Figure 26.3 shows the main Director screen.

FIG. 26.3
The Director screen consists of many elements that can be invoked when needed.

Director movies are composed of cast members, which are media elements such as images or sounds. You insert the cast members into the score window, which sequences all the file's elements. (Director also includes a full set of paint and other tools for creating these media elements in the first place.) After you create and coordinate all a movie's elements, you save the result as a Director movie file.

To use a Director movie in your HTML documents, you must first run it through Afterburner, a post-processor application that compresses and converts your Director movies for faster playback. The Afterburner application doesn't alter the way a Director movie appears or behaves but merely preps it by compressing it and changing its file format. Afterburner is available for download from the Macromedia Web site at http://www.macromedia.com. After you download and install it, Afterburner runs when you select it from the Director Xtras menu. Compressed (or shocked) Director movies have the file name extension DXR, rather than DIR.

Before serving up Shocked Director movies, you must configure your server computer to recognize and handle them by associating the file name extensions DIR, DXR, and DCR with the MIME type application/x-director.

The final step in the process is, of course, to EMBED your Director movie files on your pages. You use the ubiquitous <EMBED> tag and the required SRC, WIDTH, and HEIGHT parameters. You can also elect to use the PALETTE attribute. If PALETTE=FOREGROUND, the Director movie's palette is loaded and used as the palette for the entire page. Default is PALETTE=BACKGROUND.

Lingo Network Extensions

Macromedia Director ties together all its elements with the Lingo scripting language. Lingo is a rich language with many complex commands, and it's documented in the Director box with two thick manuals, plus comprehensive online help.

Many new extensions to the Lingo language are specifically designed to work in the context of delivering multimedia content in HTML documents. For example, new Lingo commands allow your Director movie to continue displaying an animation while it's streaming the next segment of the movie from a network. Most of the new network Lingo commands allow you to set some sort of process in motion, check back later to see if it's finished, and then act after the process is complete. This is different from most non-network Lingo commands that execute a process and then immediately give you a result.

Even if you're an old Lingo wrangler, make sure you familiarize yourself with these new Lingo commands before you attempt to create content for plug-in delivery.

Director Limitations on HTML Pages

Some special limitations for Shocked Director movies do not apply to standard Director movies. Most of these limitations are due to the fact that the Director movie must be able to interact over a network (either an intranet or the Web).

For example, Shocked Director movies can't use movie-in-a-window, nor can it use any of the Wait For options in the tempo channel. The Director manual covers all these network limitations in detail.

Page Design Considerations

The majority of Web users use relatively slow 28.8Kbps dial-up connections. At these rates, the user can receive about 1KB of information a second, so it takes about one minute to transfer a 60KB file. Remember this when creating Director files for Web pages. Don't torture your viewers with overly long download times.

Here are some other things to consider when designing HTML pages with Shocked content:

Optimizing Director Movies

Here are some tips and techniques that will help you create effective and efficient Director movies for your site:

More Information

The Online ShockWave Developer's Guide at http://www.macromedia.com/support/director/how/shock/ contains a great deal of detailed information about building sites that use Shocked content.

Other Multimedia Plug-Ins

At least a dozen more multimedia plug-ins are available, and more are coming all the time. You can keep up-to-date on multimedia plug-ins development by checking the Plug-Ins Plaza Web site at http://browserwatch.iworld.com/plug-in/plug-in-mm.html.

Shockwave for Authorware  Macromedia's latest Shockwave plug-in--Shockwave for Authorware--lets you view Authorware 4 interactive multimedia courses and pieces right in the browser window. Intended for the delivery of large, content-rich multimedia presentations such as courseware and training materials, Authorware can also write viewer data back to a server computer using FTP, so it's useful for creating market surveys, tests and quizzes, and customer service applications. If you don't already have the Shockwave plug-in, you can download Windows 95/NT, Windows 3.1, and Macintosh versions of Shockwave for Authorware from the Macromedia Web site at http://www.macromedia.com/.

Astound Web Player  The Astound Web Player plug-in displays multimedia documents created with the Astound or Studio M programs. These presentations can include sound, animation, graphics, video, and even interactive elements. The Astound Web Player is available for Windows 95 and Windows 3.1. If you plan to include movies in your presentations, you need QuickTime for Windows, which is also available from the Astound site at http://www.astoundinc.com/products/astound/webplayer.html.

mBED  The mBED plug-in plays multimedia mbedlets, small applets that are intended as interesting interactive on-the-page components. mBED is not intended for big, killer multimedia applications. It's intended to create interactive multimedia buttons and spot animations. The MBD file format and the built-in mBED players are license-free. You need the mBED Interactor program to actually create your own animations. mBED is available for Windows 95/NT, Windows 3.1, Macintosh, and PowerMac. You can find out more and download these plug-ins from http://www.mbed.com.

ToolBook II  Asymetrix's ToolBook II is one of the top multimedia authoring tools. With the Neuron plug-in, you can deliver ToolBook II multimedia titles over the Net. The Neuron plug-in supports external multimedia files, so you can access either complete courseware or multimedia titles or just the relevant portions of titles in real time. Content that is not requested is not downloaded, saving download time and making the application more responsive. The Neuron plug-in and a 30-day trial version of the ToolBook II program are both available for free download at Asymetrix's Web site at http://www.asymetrix.com/toolbook2/neuron/index.htm.

PowerMedia  RadMedia (http://www.radmedia.com) has a plug-in to play multimedia applications built in RAD PowerMedia 3.0. Designed for corporate communicators and Web designers, PowerMedia provides authoring and viewing of interactive content, presentations, training, kiosks, and demos. It's available for Windows 95/NT and several UNIX platforms. The download file for this plug-in is 9MB, and the sample PowerMedia applications on the RadMedia site are also in the multi-megabyte range. If your multimedia needs are serious--especially if you are running over a fast T1 or intranet connection--you should check out this solution. Free demonstration CD-ROMs for PowerMedia are available for qualified users.

mPire  The mFactory mPire plug-in plays multimedia files created using its mTropolis program. Check out http://www.mfactory.com/ for information and download availability.

SCREAM  Finally, the SCREAM inline multimedia player for Windows 3.1, Windows 95, and Macintosh is also worth a look, if only to check out a site and a program created by a company with the cool name--Saved by Technology. It's at http://www.savedbytech.com/Scream/GetScream.htm.

Java and Multimedia

Web page designers frequently turn to Java for multimedia. Why? Because it's fast, Java applets are small and download quickly, and they don't require the user to install a plug-in before he or she can view them.

A good programmer can churn out an effective multimedia Java applet just about as quickly as a designer can create a Shockwave file. The trick is, of course, that you need a programmer, not a designer, to do it. That's the downside.

The upside is that most Java applets are smaller than comparable Shockwave or other multi-media files. That means they download and run more quickly, and in these early days of Web development, that's what Web features ultimately want to achieve--efficient use of bandwidth.

Add in the fact that the two most popular Web browsers--Microsoft Internet Explorer and Netscape Communicator--both run Java applets right out of the box, without the need for bulky plug-ins, and you've got a compelling reason to develop your online multimedia presentations using Java.

Finding Java Applets to Borrow

Most of us aren't Java programmers. Are we left behind? Not necessarily. You see, thousands of Java applet developers out there are more than willing to share their work. Some of the Java applets on the Web are commercial works; you have to pay to use them. Some are shareware; you can try them for free, but you have to pay if you use them on your site. A surprising number of Java applet creators are more than happy to let you appropriate their work for display on your Web site.

A word of caution: Make absolutely, positively sure that any applets you "borrow" for your own site have really been released for free public use. If you run into a Java applet online that you think would look cool on your site, and it's not immediately apparent that it's up for grabs, e-mail the Webmaster and make sure you can use it before just blithely sticking it on your page.

Take a look at a few of the applets that are available for public use. You can go to several good sites on the Web to browse through bundles of accessible Java applets. A good place to start is Yahoo!'s list of sites at http://www.yahoo.com/Computers_and_Internet/Programming_Languages/Java/Applets/.

If you want to find the applets themselves, you might check out the Java Applet Rating Service (JARS) at http://www.jars.com (see Figure 26.4).

FIG. 26.4
The JARS site not only lists Java applets; it also rates them.

JARS rates Java applets and awards them Top 1 percent, Top 5 percent, and so on, so it's easy to see which applets are the best (at least in the opinion of JARS's independent judges). The JARS site also lists applets by category. For example, by sifting through the listings, you can see the URL for Yuri Alkin's Fractal Explorer applet (see Figure 26.5). Fractal Explorer displays beautiful images, and it lets you tweak them to your liking. It's freeware, so you can lift and use it on your own site.

Along practical lines is David Jameson's Shared Whiteboard applet (see Figure 26.6). It lets several people sketch on the same screen. Everyone can see what the others are drawing. This applet is also freeware.

Another excellent source of Java applets is the Gamelan site at http://www.gamelan.com (see Figure 26.7).

Scan through the lists at Gamelan and you're bound to come up with some interesting applets. One great example is the film strip animator shown in Figure 26.8.

This Java applet takes a GIF filmstrip image, breaks it into animation frames, and then presents these frames as an inline animation.

FIG. 26.5
This Java applet lets you view colorful fractal graphics.

FIG. 26.6
Share sketches online with this Java applet.

Once you find a Java applet you like at JARS or Gamelan, how do you get it onto your own Web page? Easy. Each applet is accompanied by download instructions. Once you download an applet, you find a file that explains how to use it in your own pages.

FIG. 26.7
The Gamelan site offers hundreds of Java applets listed in categories. This page links to several hundred multimedia applets.

FIG. 26.8
This site provides you with a free animation applet and then shows you how to use it!

Dynamic HTML

One more way to create interactive, animated, multimedia Web pages is with Dynamic HTML. Dynamic HTML is a new set of HTML tools and standards supported in both Microsoft Internet Explorer and Netscape Communicator. Using Dynamic HTML techniques, you can create layered, animated pages with graphics that move, change, appear, and disappear, all in response to user actions. This is interactive multimedia in the truest sense of the word.

Part III, "Creating Advanced Web Pages with Dynamic HTML," covers Dynamic HTML in depth. If you're interested in creating truly dynamic Web pages using nothing but HTML, check it out.


Previous chapterNext chapterContents


Macmillan Computer Publishing USA

© Copyright, Macmillan Computer Publishing. All rights reserved.