Macromedia Director and Shockwave

CS6204: Java and the WWW

How Could You Add Interactive Multimedia to Web Pages?

Add a Quicktime movie:

Permits animation, video, sound, but not interaction

Add a Adobe PDF file:

Better -- can include

Quicktime movies
Hyperlinks (but not in movies or animation)
Still images
Text

Add a Shockwave file:

Best -- handles all media types and integrates interaction into animation

Shockwave Characteristics

Adds multimedia to Web pages (animation, sound)
Well suited to

adding "entertainment" to Web pages:

games
animated interfaces
interactive ads and demos
streaming CD-quality audio for music and speech

creating instructional and educational presentations

Free Shockwave plug-in allows execution from Web browser.
Shockwave player streams:

Animation and sound files start playing immediately while media downloads in the background.

Shockwave is created by any one of three Macromedia tools: Flash, Director, or Authorware.

Examples of Shockwave in Web Pages

Macromedia's Shockwave Gallery

HTML to include a shockwave file:

<embed SRC="shockhomepage.dcr" type=application/x-director 
  width=100% height=75%>

An example with audio
Assembling puzzle
A simple game: Celebrity Slugfest
Use of Shockwave to Prototype a User Interface

Using Director Is Unlike Using a Web Authoring Tool (e.g., FrontPage)

You create a movie, or at least a sequence of frames
You have a cast of characters, or sprites.
Characters are either

drawn with Director's drawing tool, or
imported from a file (e.g., a bitmap)

You create a score.

In music, a score shows the actions of each instrument in time.
In Director, a score shows the movement of sprites and content of two audio channels in time.

When you are done, you can

Save as a Director file + a viewer program, to replay on another computer
Export as a Quicktime movie
Compress and save as a Shockwave file via Afterburner

Example of Using Director to Create Shockwave

Click here to see animation of bird flying up from a field.

Overall picture of Director Screen:

Image of Director screen showing various control windows

Screen above contains four elements:

Preview screen showing multimedia composition

Image of bird on grass with woman standing in field

Control panel with VCR-like controls to play composition:

Image of Director's control panel with VCR-like controls

Cast window that lists all sprites.

Every sprite is named.
Clicking on a sprite allows editing with drawing tool.
Sprites can also contain text.

Image of Director's Cast window.

Score window that shows time coordination of sprites.

Columns are frames (i.e., time), rows are channels.
You assign sprites to cells to control what's drawn when.
You can drag and drop cell contents to rearrange your presentation.
There are two audio channels, and you can assign an audio segment to each cell for synchronization with the images.
Rows are painted top to bottom, so you can control overlays.
You can specify looping over frame subsequences.

Image of Director's Score window

Other Director Features

Director has a very rich set of features. It is complex to learn, but powerful.

If you fill in the initial and final locations of a sprite, Director will interpolate movement. (Can do movement on straight line, curve, can increase size, fade.)
Includes Television-production sorts of effects:

Fades between frames
Titles

Lingo scripting language permits implementation of

entire user interfaces
hypertext links to other portions of director presentations
even games

Return to CS6204 home page.

Send comments to abrams@vt.edu

Last modified on 25 April 1997.
[This is http://ei.cs.vt.edu/~jwww/courseNotes/shockwave/index.html.]