Interactive Elements for Your Web Site
how to use javascript and shockwave

go to: main approach _____________ shockwave + behind scenes + sites + examples +++ slide show +++ quizzer +++ calculator _____________ javascript + behind scenes + sites + examples +++ slide show +++ quizzer +++ navigator menu

about shockwave
Shockwave is the technology developed by Macromedia to allow users of its popular multimedia software Director to create interactive applications and animations as a part of a web page. Introduced in late 1995, Shockwave has become one of the more widely used add-on tools for web multimedia.

To create a Shockwave file, you must have a copy of the software program Director. Its built-in tools converts the native Director file to the compressed Shockwave format. Shockwave features a streaming audio format that allow for long, high quality sound files to be played across low bandwidth connections. Shockwave also has the ability to communicate with web server programs.

Shockwave is inserted into a web page via a special HTML code that "embeds" it into the page.

To view a web page that includes Shockwave, your web browser needs additional "pieces" to be able to play back the Shockwave portion. Users of NetScape Navigator must download and install the Shockwave plug-in. For those that use Microsoft Internet Explorer, the Shockwave functionality is downloaded to the viewers computer as an Active-X controller. Either way, this extra code must be added to the browser.

advantages of shockwave
Shockwave offers sophisticated and versatile tools for synchronizing media and creating rich, customized interactive interfaces. With a wide base of Director developers, there are many excellent examples of Shockwave equipped web sites. Shockwave audio is of extremely high fidelity. Shockwave also includes impressive compression of media for transmission over networks as well as methods for "streaming" the media.

Unlike most "animation" tools, Shockwave does not have to play sequentialy like a movie, it can play back an aninmation in an arbitrary or random, non-linear fashion, as well as in response to viewer interaction. It is quite a bit more than an animation tool.

A less obvious advantage of Shockwave is that is combines all of the downloaded media into one package. What does this mean? Java applets must download all of its media and code in a series of short but often many, individual web transactions (that is your long wait watching a blank page while you see a message "Java loading..."). Likewise, animations that rely on Dynamic HTML stalls the viewer's experience until all of the "pieces" have arrived, and must be re-loaded, even fom chace, upon exit and return to a page. However, in the hands of competent and bandwidth conscious developers, a Shockwave created piece can start to play its first portions as it downloads the remainder in the background ("Streaming" of media means that a Shockwave piece can start to play before all of it is downloaded). Plus, once the first Shockwave file is loaded, it can swap in new Shockwave files without any more overhead.

disadvantages of shockwave
One of the major drawbacks of using Shockwave is the requirement for the viewer to download and install extra software for their web browsers (NetScape plug-ins or Active-X controls). Despite several programming aids to make the installation easier, the "plug-in" issue is a major hurdle for many web site developers where clients think it is too much to expect their visitors to install extra plug-ins. Like many things on the web, Shockwave has become complicated with the differing approaches of the two competing browsers.

The route for creation of Shockwave is limited to those that have and can use Macromedia Director, not the easiest software to master. You will not find an overly abundant supply of Shockwave applications that you can re-purpose since most are developed for specific uses. But we've tracked down a few.

alternatives to shockwave
For straight-forward animation, it is much easier to create GIF animations than Shockwave. Plus, GIF animations are supported in most graphical web browsers without additional software. Macromedia has another web animation tool in Flash which has become popular for its small plug-in size, fast loading animations. Flash is useful for creating animated buttons and movement of text and shape defined (vector) graphics. Flash cannot be programmed as extensively as it does not provide anything close to the interactive progamming tools that are available to a Shockwave developer.

Some interactivity created in Shockwave can also be done in JavaScript, as we will see in the other section of this workshop. Java has had lots of hype, but to date, the development tools are complex and the multimedia capabilities are limited in comparison to the graphics engine of Shockwave.

For an idea of the many multimedia technologies available as "add-on" components, see BrowserWatch's Plug-in Plaza and Active-X Arena.

summary for shockwave

creation	best uses
needs Director	high interaction simulations testing training	synchronization of media communication with server scripts complex navigation
advantages	disadvantages	alternatives
rich media integration non-linear playback Shockwave audio wide developer base packaging of media streaming of media	requires Director software to create plug-in needs to be installed complications between browsers limited supply of re-usable code	GIF animations Flash DHTML JavaScript Java

what's next?
With this background, let's look behind the HTML scenes of a shockwave page.

If your computer is not yet equipped with Shockwave (or you are not even sure) visit the Macromedia Shockwave test and download sites.