Creating Director Shockwave

Publishing Shockwave movies

Distributing Director movies for web delivery requires the files to be converted into a Shockwave (dcr) format. This publishing process compresses the data in the movie and optimises it for web playback. Unlike a projector, a Shockwave movie does not have to be made for a particular platform. However, a Shockwave movie will only play through a web browser provided that the user has the correct version of the Shockwave plugin installed.

Shockwave Publish Settings

1. Choose File > Publish Settings...
Tick the Shockwave File (DCR) and HTML checkboxes.

2. Click on the Shockwave tab.
The Shockwave options (seen below) allow you to select the player (plugin) version, how images and sound are compressed and how users can interact with the movie.

Version
Allows a movie to be published for the Shockwave Player 10 or Shockwave Player 8.5.

Image Compression
Standard option applies a basic compression to images without any drop in quality to the graphics. It is is suitable for graphics with few colors.
JPEG option allows images to compressed to a greater degree, resulting in much smaller file sizes but impacts on the quality of the image. The higher the percentage on the slider, the less the image will be compressed. Higher compression (low percentage settings) will result in smaller sized images, but creates lower quality graphics.

Audio Compression
Compression enabled applies audio compression to sound in the movie. If a sound member is already in SWA or MP3 format (is already compressed), it will not be able to be compressed further.
The level of audio compression can be selected from the kBits/second drop-down menu.
Convert Stereo to Mono does what the name suggests, converts the file from having 2 sound channels (stereo) to one (mono).

Context Menu Items
Include Cast Member Comments allows you to include comments entered in the Comments field of the Property Inspector.
Allow movie scaling allows a shockwave movie to be resized / stretched in a browser (however these will be more CPU intensive).
Transport Control adds a control for rewinding, stopping and stepping through a movie.
Volume Control allows users to adjust the volume of the sound.

4. Click on the Html tab.
The Html tab (shown below) contains options for the formatting of the html page that calls the dcr file.

Page Background
The background colour of the HTML file can be changed by either clicking the Page Background colour box and selecting a colour, or entering a value in the hexadecimal field.

Stretch style
Affects the way the shockwave movie will be displayed and includes:
No Stretching - movie does not resize and plays at original size
Preserve Proportions - movie resizes keeping the original aspect ratio.
Stretch to Fill - movie fills the browser window size without maintaining the original proportions.
Expand Stage Size allows the movie to be resized from the HLML code.

Stretch position
Determine the alignment of the movie when one of the stretch options is enabled.

Dimensions
Gives values in the OBJECT and EMBED tags (covered below) in the HTML file. The default is Match Movie and makes the DCR movie match the dimensions of your DIR movie. This option can be changed by selecting either Pixels or Percent of Browser Window, and typing new dimensions in the Width and Height fields. A movie will not resize if you have the No Stretching option is selected

Writing the HTML

To incorporate the Shockwave in a web page.

There are 2 tags for calling a shockwave movie from HTML. These are the EMBED and OBJECT tags. EMBED was the original Netscape tag and now is the tag preferred by Mozilla Firefox. OBJECT allows for ActiveX control (and thereby added functionality) supported by Microsoft Internet Explorer. All Shockwave-compatible browsers support EMBED; newer browsers support OBJECT. Both tags should be used to ensure that a movie plays on as many compatible browsers as possible.

The text below outlines the HTML code you would use to call a Shockwave movie. This should be typed into Notepad or some other text editor and saved with the extension .htm or .html

This file is HTML.
Start the "header"
Browser's "banner"
End the "header"
Start the "body" (use a white background)

Some text centered and bold

Calling the shockwave called shock.dcr (explained below)

End the "body"
End the HTML document

<HTML>

          <HEAD>

          <TITLE>Shockwave Tutorial</TITLE>

          </HEAD>

          <BODY> 

          <BODY BGCOLOR ="white">

          <H2><CENTER>This is Dean's Shockwave tutorial movie<BR> 
          <I>Multimedia in Design - the best subject around</I>

          </CENTER> 

          </H2> 

          <H2><BR> 

          <OBJECT CLASSID="clsid:166B1BCA-3F9C-11CF-8075-444553540000";

          CODEBASE="http://download.macromedia.com/pub/shockwave/

          cabs/director/sw.cab#version=11,6,0,0"

          WIDTH="320" HEIGHT="240">

          <PARAM NAME="SRC" VALUE="shock.dcr">

          <EMBED SRC="shock.dcr" WIDTH=320 HEIGHT=240 
          TYPE="application/x-director" PlayerVersion="11" PLUGINSPAGE=

          "http://www.adobe.com/shockwave/download/"> 

          </EMBED> 

          </OBJECT>  

          </BR> 

          </H2> 

          </BODY> 

          </HTML>

WIDTH and HEIGHT - values set to the dimensions of the stage. You can crop a Shockwave by making these dimensions smaller than the stage. Likewise, you can increase the "window" but this would be a waste of RAM
SRC - value that points to the path name of the shockwave movie. The above script requires shock.dcr to be in the same directory as the HTM file.
TYPE - value that defines the shockwave object as a Director Shockwave, letting the browser know what plugin to use.
PLUGINSPAGE - points to a URL where the plugin can be downloaded if not found.

To view the Shockwave in your browser, a Shockwave plugin must be installed. To detect for the Shockwave plugin or ActiveX control, JavaScript and/or VBScript is generally used. This is usually accompanied with the NOEMBED tag is to call an alternative image or text to replace the shockwave file. For example, the following calls for an alternate image called alt_image.jpg:
<NOEMBED><IMG SRC="alt_image.jpg" WIDTH=320 HEIGHT=240> </NOEMBED>

Note: If you want your Director movie to be viewable online, make sure you upload your file to a web host that is configured for Shockwave - like Bluehost.

Director Tutorials