29d. Hit Me With a Shockwave
"Interactive multimedia inside a web page?" I am shocked!"
Yes you are, you can have shockwave with your HTML
and "knock 'em out" with impact...
Objectives
After this lesson you will be able to:
- Identify the benefits of interactive multimedia
- Describe the issues related to using shockwave over the web
- Write the HTML to insert a shockwave file into your web page
Lesson
Shockwave is a technology introduced in early 1996 by Macromedia that leverages the strength of its powerful and widely used multimedia development program, Director, so that interactive multimedia content can be included withing a web page. To get a small taste of what web based multimedia can do, visit Macromedia's Gallery.
| media type:
| shockwave
|
| what it does well:
| synchronized media, animations, simulations, manipulatives, communicate with databases, realistic interfaces, non-linear content
|
| issue to consider |
rating |
comments |
| "hurdle" or barrier for creating media |
low  high
 |
To create Shockwave content you need Macromedia Director software and the ability/skills to design and program in it. |
| "breadth" of audience that can view media |
narrow wide
|
Playing shockwave within a web page requires extra software (ActiveX controls for Internet Explorer/NetScape Plug-ins), but estimates show more than 50% of web users have this already. Technology has improved so it can automatically update its components when needed. |
| bandwidth consumption |
low high
|
Quite variable as it depends on the type of interaction, media used, and the programming skills of the content creator. Shockwave content can now be "streamed" so it can be delivered in small chunks as the viewer starts interacting with it. It is very capable of internally compressing the size of its media to make it move more "quickly" across the internet. Shockwave audio is high quality and fully streams without special hardware. |
What Director does well, and thus Shockwave allows you to do in a web page, is to deliver "rich" content experiences that may include text, graphics, animation, sound, video, in almost any kind of visual design you can imagine. It is powerful because it can manipulate and synchronize these different media types, as well as communicate with other systems, such as databases or other software.
The challenge to the average web page designer is that to do Shockwave well, they must learn Director, well, no small task, and not cheap software to buy. Because most shockwave designs are unique, often they cannot be easily re-purposed like "clip art" but there are some exceptions we will point out later.
One of the limitations is that Shockwave calls for extra software functionality to work in your web browser. Many web browsers and new computers are shipped with this already installed. The technology has improved enough so that if a person accesses a site that requires Shockwave, it can either start downloading the needed "parts" or send you to a site so you can easily install Shockwave on your computer. Once you have it installed for one web site, any other web site can now use this functionality.
This lesson will not cover the creation aspects of Shockwave, but will show you how to add an existing shockwave application to your web site. Shockwave files always end in ".dcr"
Because of the way Shockwave is implemented in web browsers, we actually have to write almost duplicate HTML that works for both; Internet Explorer uses a <object> tag while NetScape uses the <embed> tag (similar to what we saw for video, lesson 29b and audio, lesson 29c, but with a few different parameters).
The general HTML code looks like:
<object classid="clsid:166B1BCA-3F9C-11CF-8075-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/director/sw.cab#version=7,0,2,0"
WIDTH="480" HEIGHT="300" NAME="sw" ID="swmovie">
<PARAM NAME="SRC" VALUE="sw_file.dcr">
<PARAM NAME="BGCOLOR" VALUE="#FFFFFF">
<embed src="sw_file.dcr"
width=480 height=300 bgcolor=#FFFFFF
pluginspage="http://www.macromedia.com/shockwave/download/">
</embed>
</OBJECT>
As you may see, the <embed> tag for NetScape (shown in purple) is contained within the Internet Explorer <object> tag (shown in red). What it means is that the NetScape browser will ignore the <object> tags and the Internet Explorer browser will ignore the <embed> tags. Here is a bit more explanation of the other options in the tags:
| purpose of option |
OBJECT tag |
EMBED tag |
| web location of shockwave installer code, redirects browser there to download needed software if not present |
object classid="....."
codebase="http://...." |
pluginspage="http://..." |
| dimensions in pixels |
width=..., height=... |
width=..., height=... |
| identification code, can be used with browser scripting (JavaScript, VBScript) |
NAME="..", ID="..." |
NAME=".." (not required) |
| relative file location of shockwave file |
<PARAM NAME="SRC" VALUE="sw_file.dcr"> |
src="sw_file.dcr" |
| background color while loading, helps blend with color of page |
<PARAM NAME="BGCOLOR" VALUE="#FFFFFF"> |
bgcolor=#FFFFFF |
Adding Shockwave
Note: If you do not have the working documents from the previous
lessons, download them now.
In this lesson, we are going to add a shockwave application that can read in any number of photographic images of volcanoes, and has tools to allow you mark the height and width of the volcano and calculate this as a ratio. Because of the way it has been designed, you can add any number of additional volcanoes by collecting more images and editing two lines of the HTML code.
We could have provided quite a bit more function in this if we chose to. We could have programmed it so that after you used the tool, it could save the data to our web server by having Shockwave send data to a CGI form. We could have added a button that would send an email message to an instructor. We could have created another button that would allow you to print or save the results from using the tool. We could have...
But we decided to keep it simple, as this is not a real site!
The shockwave file itself is only 22k in size, and the images it uses are dynamically linked only when needed. This makes shockwave load quicker in the web page plus allows you to add the additional images without having to re-program the shockwave file.
Before you start, you can visit a copy of the page you will build. This will allow you to try the shockwave application, as well as test if it is already installed on your computer.
If you are ready, we can now show you how to set up this web page that includes shockwave:
- Create a new directory/folder in your workspace named dswmedia. This is the place we will store our shockwave file and the images it uses. We must place shockwave files within a folder with this name for all of its features to work when run from your desktop computer.
- Go to the Lesson 29d Image Studio to download four images of volcanoes that we will use within Shockwave. Save these inside your dswmedia folder.
- Now you will have to get a copy of the shockwave file.
- To do this you will need to access the "secret" menu by either right mouse clicking (Windows, Unix) or clicking and holding the mouse down (Macintosh) on this link to the shockwave file (volc_hw.dcr) until you see a pop-up menu.
- From the pop-up menu that appears, select Save this Link As... or Save Target As...
- When a dialog box appears, be sure to select Source if there is menu labeled Format.
- Save it as a file named volc_hw.dcr inside your dswmedia folder. This folder should now contain 4 image files and one shockwave file.
- Create a new file in your text editor, name it measure.html, and save it in the same workspace folder/directory as your other HTML files.
- Enter the following HTML in this new file:
<html>
<head>
<title>Measuring Volcano Shapes</title>
<body bgcolor=#000000>
<center>
<!-- begin ---------= s h o c k w a v e =-------------------
The OBJECT tag is used by Internet Explorer and the EMBED tag
is used by NetScape Navigator. You can add/edit the volcano
functionality by editing the values for:
sw1 : names of all volcanoes
sw2 : the file names of the volcano images ------------------>
<!-- OBJECT tag used by Microsoft Internet Explorer ----------->
<object classid="clsid:166B1BCA-3F9C-11CF-8075-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/director/sw.cab#version=7,0,2,0"
WIDTH="480" HEIGHT="400" NAME="volcs" ID="hw">
<PARAM NAME="SRC" VALUE="../dswmedia/volc_hw.dcr">
<PARAM NAME="BGCOLOR" VALUE="#000000">
<PARAM NAME="sw1"
VALUE="San Francisco Peaks AZ,Black Butte CA,Mauna Kea HI,Popacatepetl Mexico">
<PARAM NAME="sw2"
VALUE="sfpeaks.jpg,black_butte.jpg,mauna_kea.jpg,popo.jpg">
<!-- EMBED tag used by NetScape Navigator --------------------->
<embed src="../dswmedia/volc_hw.dcr"
width=480 height=400 bgcolor=#000000
pluginspage="http://www.macromedia.com/shockwave/download/"
sw1="San Francisco Peaks AZ,Black Butte CA,Mauna Kea HI,Popacatepetl Mexico"
sw2="sfpeaks.jpg,black_butte.jpg,mauna_kea.jpg,popo.jpg">
</embed>
</OBJECT>
<!-- end -----------= s h o c k w a v e =--------------------->
<form>
<input type="button" value="close tool" onClick="self.close()">
</form>
</center>
</body>
</html>
</font></pre>
NOTE: Most of this HTML code is for including the Shockwave application; the only other feature is a JavaScript Form at the bottom that creates a button for closing the window.
The height and width of the shockwave file is 480 pixels wide and 400 pixels high (you cannot scale shockwave files like images; if the dimensions in the HTML code are smaller, it will crop out part of the shockwave content). The shockwave file is located in the dswmedia folder, which is one level above the file location of this HTML file.
The values of the parameter sw1 lists in order, the titles of each of the images that will be read into the Shockwave file. Likewise, the values of the parameter sw2 lists in order, the corresponding image file names. Note how this information is included twice, once for the Internet Explorer OBJECT tag and once for the NetScape EMBED tag.
- Save and Load this html file in your web browser. Verify that the Shockwave application loads and plays.
NOTE:
If there is a problem loading the images, make sure that you have entered the sw1 and sw2 strings exactly as shown above (there should be no spaces after the commas).
Once our shockwave page is working, we need to add a link that will open it in its own browser window, like we have done in the previous multimedia lessons.
- Open the file term.html in your text editor.
- After the section we created in the last lesson (the header "Volcanoes in Action" with the link to the QuickTime movie), add this HTML:
<h3>Shapes of Volcanoes</h3>
Their general "shape" can help you classify volcanoes by a
measure known as the <b>aspect ratio</b>, or the ratio of
height to width. Since this value is a ratio, it does not
matter if we measure it in actual dimensions
(feet, meters, etc) or if we use a ruler on a photograph.
Use the <a href="measure.html" onClick="window.open('measure.html',
'plinian', 'width=500,height=480,status,menubar'); return false"
onMouseOver="window.status='aspect ratio measuring tool';
return true">Volcano Web tool</a> to measure the aspect
ratio of several volcanoes. (Requires
<a href="http://www.macromedia.com/shockwave/">Shockwave</a>)
- Save and Reload in your web browser. Test this and make sure it opens a browser window that then loads the Shockwave equipped page.
Check Your Work
Compare your web pages with this sample
of how it should appear. If your pages are different from the sample or the hypertext links do not work correctly, review the text you entered in the text editor. Compare your work to the HTML of the samples (look for something like Source from your browser's View menu).
Review
Review topics for this lesson:
- What are some of the things you can do in Shockwave that make it useful?
- What are some of the limitations of using Shockwave?
- What is the HTML for including a Shockwave file? Why does it have some duplicate information?
Independent Practice
Experiment with the Shockwave page you created. See if you can figure out how to change the order in which the volcanoes are displayed. Try to find some other images of Volcanoes and see if you can add them to the set of four that we used here.
We also have created two Shockwave templates that you can use without having to know anything about how Shockwave works. These are part of an online workshop that shows you how to add Shockwave and JavaScript functionality to your own web pages.
- The Quizzer allows you to create sets of multiple choice quizzes, where each time the quiz is taken, the order in which the questions appear, and the order in which the answers for each are displayed, are randomized.
- The Clicker allows you to create web-base slide shows that may include multiple sets of captions (two languages) and can have audio associated with each of the slides.
More Information
This is but one example of how shockwave turn a web site into a place that is much more than a static collection of text and pictures. You can find numerous other examples of Shockwave from: