"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...
After this lesson you will be able to:
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.
|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="....."
|dimensions in pixels||width=..., height=...||width=..., height=...|
|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|
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:
<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>
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.
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.
<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>)
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 topics for this lesson:
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.
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:
Sit back as we try to pour a hot cup of J A V A !
Writing HTML: Lesson 29d: Hit Me with a Shockwave!
©1994-1999 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges
The 'net connection at MCLI is Alan Levine
Comments to firstname.lastname@example.org