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

go to:


sites for shockwave
Here is where we will begin exploring examples of shockwave and visit a site where free Shockwave files ("Baubles") are available. You will practice downloading one of these shockwave files.

sites to see shockwave
Visit these sites to find examples of what can be done with Shockwave. Be careful of loosing track of time as you explore! If you are somewhat familiar with shockwave or want to get tot he examples, just skip on down the page.

NOTE: These links will open in a second web browser window so you do not lose track of this web page.

Macromedia Shockzone
is Macromedia's main gateway to information and examples of Shockwave
http://www.macromedia.com/shockzone/

Macromedia Shockrave
is a gallery of online games, music, and other interactions.
http://www.shockrave.com/

Director Web List o' Sites
a huge list of Shockwave sites submitted by Director developers http://www.mcli.dist.maricopa.edu/director/shockwave.html

Web Review's Boss Animation of the Week
http://webreview.com/universal/previous/bad/

Shocked Web Ring
allows you to jump from one shockwave site to another
http://venus.aros.net/~jjreese/shocked/

HotWired Animation Express
http://www.hotwired.com/animation/

sites to learn more about shockwave
If you want to learn more about shockwave, here are a few starting points. They are generally geared toward the multimedia developer, but Macromedia offers some general information about Shockwave, its features, and its distribution.

Macromedia's Shockwave Support Center
http://www.macromedia.com/support/shockwave/

What is Shockwave?
http://www.macromedia.com/shockwave/productinfo/whatis/

ShockeR listserv
http://www.chinwag.com/shockwave.html

shockwave "baubles"
We are going to zero on one particular site that features a large collection of Shockwave files. These Shockwave "baubles" are offered from @dver@ctive, a company that specializes in customized Shockwave development for major corporations.

What is a "bauble"? It's a small (<12k) Shockwave file that you can download and use for free. Each "bauble" includes an example to see it, the dimensions of the Shockwave file (as we saw behind the scenes, we need to know this information to code the HTML), and a link to download the file.

So here is what we will do to introduce you to the Bauble site and walk you through the steps for downloading one.

  1. Go to the main page at
      http://www.adveract.com/shokbobl/abtboble.htm
    Explore some of the Baubles via the two listing options at the top of the page.

  2. Let's say we are interested in the Shockwave Calculator
      http://www.adveract.com/shokbobl/baubles/calc.htm
  3. We make note of the dimensions provided at the bottom of the page (64 wide x 90 high) and then click on the link to download. (Note: if this link is unavailable, we have set up an alternative download).
  4. The link connects to a file that ends in ".sb" a file type that web browsers will not know how to handle. Don't panic! This is intentional. You should be prompted with a dialog box asking you what to do, and look for an option to Save File
  5. After you select the location on your computer to save the file, it should quickly download (after all, these are less than 12k each!).
  6. Go to your computer desktop, find the downloaded file, "calc.sb" and change its name to "calc.dcr" With this new name, your web browser will recognize it as a Shockwave file.
  7. You may test the shockwave by dragging the icon for the "calc.sb" file and dropping it directly into a web browser window.
Note that a Shockwave file can play directly in a web browser. In one of our later examples, we will see how you integrate this calculator into other HTML elements of a web page.

what's next?
It's time to go to web work with Shockwave, so we will introduce our three examples for you to try. Each one includes detailed instructions for how to download Shockwave files and create HTML pages that include Shockwave. You may try these in any order or move on to the JavaScript section.