Chapter 29

Shocking Your Web Site

by Eric Ladd

• Macromedia Director Basics
  • Program Components
  • Importing Cast Members
  • Composing the Score
• Creating Animations in Director
  • Step Recording
  • Real-Time Recording
  • In-Betweening
  • ANIMWIZ Features
• Using Lingo
  • Frame Scripts
  • Cast Scripts
  • Sprite Scripts
  • Movie Scripts
• Preparing Your Director Movie for the Web
  • Tips for Making Your Movie as Small as Possible
  • Saving Your Movie
  • Hit the Afterburner
  • Placing the Movie on a Web Page
• Expanding Shockwave's Capabilities
  • Creating a Streamed Audio File
  • Creating a Compressed Audio File
  • Placing a Streamed Audio File in a Director Movie
  • Using Lingo to Control Audio

Macromedia became a household name almost overnight when it released Shockwave for Director-a Netscape Navigator plug-in that allows Director movies to be played right in the browser window. Director movies are carefully orchestrated multimedia presentations that combine text, graphics, audio, and video content into stunning desktop displays. Multimedia artists commonly use Director to author CD-ROM titles, kiosk exhibits, and desktop multimedia presentations. Now, thanks to Shockwave, they can also author presentations specifically for the Web.

This chapter discusses the essentials of Macromedia Director and how to prepare your Director movies for the Web.

Macromedia Director Basics

Before learning how to do some of the cool things you can do in Director, you need to spend a little time familiarizing yourself with the basic tools of the program and how they work together.

Program Components

Imagine that you are a director whose job it is to create a movie. What things do you need at your disposal to accomplish your task? Your answer might include things like the following:

• A sound stage
• A cast of characters
• A script
• A way of reviewing what you've created (playback room or editing booth)

Macromedia Director uses a movie-making metaphor as the backdrop for the program. Director has four basic program components that are analogous to the preceding list of items (see Figure 29.1). They are

Figure 29.1 : Lights! Camera! Action! Macromedia Director helps you create multimedia presentations with a cast, stage, score, and control panel.

• The stage
• The cast
• The score
• The control panel

Each of these components is discussed in the sections that follow.

The Stage  As you might suspect, the stage is where all the action occurs. When you play a movie, the cast members do their thing on the stage according to the actions prescribed in the score. Figure 29.2 shows the stage with a movie playing.

Figure 29.2 : When you watch a Director movie, you see cast members performing on the Director stage.

When the cast, score, or control panel windows are open, they obscure your view of the stage. To remove them from sight, you can use options under the Director Window menu. Choosing Window, Control Panel removes the control panel. Similarly, choosing Window, Score gets rid of the score. You can hide any casts you're using by choosing Window, Cast and select the type of cast you want hidden from the pop-up list.

The Cast  A cast is a collection of multimedia elements that are the building blocks of the presentation. You can make just about any kind of multimedia file a cast member. Director supports the following file types for inclusion in the cast:

• Graphics files, including those in the GIF, JPEG, Windows bitmap, TIFF, PC Paintbrush, Macintosh PICT, or MacPaint formats
• Encapsulated Postscript files
• Photo CD files
• Windows metafiles
• Color palettes
• Sound clips
• Video clips
• FLC or FLI files
• Lingo scripts
• Other cast files
• Other Director movies

A new feature supported by Director 5.0 is multiple casts. Every movie has an internal cast that can be used only in that movie (see Figure 29.3). Beyond that, you can create external casts that are shared between movies. This is very handy when you're making movies that have several cast members in common. These cast members can be stored in an external cast and made available to all of the movies, rather than having to place them in the internal casts of each movie.

Figure 29.3 : You populate the cast window with multimedia elements you want to use in your presentation.

The Score  The score is the most complicated of the program components, but it's also where you can be at your creative best. The Director score window is shown in Figure 29.4.

Figure 29.4 : The score governs how cast members, sound, color, and other pieces of your presentation are displayed on the stage.

A given column of the score holds the contents of a given frame of the movie. As a movie plays, the playback head moves along the frames in numerical order (unless told to do otherwise by a script), displaying the contents of each frame as it passes by.

Each row of the score is called a channel. There are six reserved channels (the first six you see in the figure) and 48 channels you can use to place cast members. The reserved channels are used to control certain aspects of the movie. From top to bottom, the reserved channel are as follows:

• Tempo  Sets the rate (in frames per second) at which the playback head moves through the score. The default playback rate is 15 frames per second.
• Color  Controls what color palette is in use. You can use the color channel to create color cycling and other color-related effects.
• Transition  Allows you to use one of Director's many pre-programmed transitions (for example, a fadeout from one scene to another).
• Sound 1  Holds the primary soundtrack for the movie.
• Sound 2  Holds a secondary soundtrack for the movie.
• Script  Holds scripts written in Lingo. You can use scripts to gain very fine control over how the movie is presented.

The remaining 48 channels are for you to use for whatever you choose.

Each individual box in the score is called a cell. Generally, you choose members from the cast and place them in cells in the score. When you do this, you really place a copy of the cast member, not the cast member itself, into the score. The copy of a cast member in a given cell is called a sprite. For this reason, Director channels are also sometimes called sprite channels.

The Control Panel  The control panel is like a remote control for Director's playback functions (see Figure 29.5). In addition to Stop, Play, and Rewind buttons, you can find controls for the movie tempo (in frames per second or seconds per frame), volume (muted or levels 1 through 7), looping playback, and for stepping forward or backward in the sequence of frames. The numerical readout displays the number of the frame that the playback is currently on.

Figure 29.5 : The Director control panel lets you play a movie at different speeds and volume levels.

Importing Cast Members

One of the first things you're likely to do when getting ready to author a movie is gather your cast together. When you start a new movie (choose File, New, Movie), you automatically get an internal cast. To populate the cast, follow these instructions:

1. Choose File, Import to reveal the dialog box you see in Figure 29.6.
   Figure 29.6 : You can import just one cast member or several at a time.

2. Browse to the first cast member you want to import. If this is the only cast member you want to add, just click the Import button. If there are others you want to add, click the Add button to add the file to the list of members to import (see Figure 29.7).
   Figure 29.7 : Building a list of cast members to import can save lots of time over importing them one at a time.

3. Repeat step 2 for any other cast members you want to add.
4. When you finish browsing for cast members, click the Import button in the dialog box.
5. Depending on the type of file you're importing, you may see a subsequent dialog box asking you to confirm some attributes of the cast member. For example, the JPEG image Drew.jpg prompts Director to present you with the dialog box you see in Figure 29.8. Here, you can choose options for color depth and palette.
   Figure 29.8 : Director confirms properties of certain cast members. You see this dialog box whenever you import an image.

Remember that members of an internal cast are only available to the movie you're currently authoring. If you want some cast members to be available to other movies, you should consider placing those cast members in an external cast. To create an external cast, you need to follow these steps:

1. Choose File, New, Cast to reveal the dialog box shown in Figure 29.9.
   Figure 29.9 : You can create new internal and external casts, depending on what you choose in this dialog box.

2. Give your new cast a name other than Untitled and choose the External radio button. If you want the new cast to be available to the current movie, be sure to click the Use in Current Movie check box. When you're done, click the Create button.
3. The new cast appears in the Director window. You can click the new cast window to highlight it and populate it the same way you did the internal cast.

One of Director's many nice features is the Paint window. By double-clicking a cast member, you open up a copy of it in the Paint window. There you can edit the cast member using the many functions provided.

Composing the Score

With a cast in place, you're ready to write the score-the script for your movie. While there are many ways to do this, one of the most basic tasks is placing cast members on the stage. To place a cast member on the stage, follow these steps:

1. Click the cast member you want to place to highlight it.
2. Drag the cast member onto the stage.
3. The cast member shows up as a sprite in the first available channel in the score (see Figure 29.10). The red dot that shows up next to the channel number lets you know what channel the sprite went to.
   Figure 29.10 : The newly pasted cast member becomes a sprite in the movie score.

Note in the score window that when you highlight a cell containing a sprite, the cast member the sprite is made from shows up in the upper-left corner. You can double-click this smaller copy of the cast member to open it in the Paint window.

Very often, you need the same cast member in the same channel for several subsequent frames. Fortunately, you don't have to drag the cast member to the stage for each new frame that you need it. To extend the cast member you just placed out to frame 25, you can do the following:

1. Click the cell containing the sprite to be extended.
2. Press the Alt key (Windows) or the Option key (Macintosh) and drag the select sprite down to frame 25 (see Figure 29.11).
   Figure 29.11 : You can drag a copy of a sprite to any new frame you want.

3. Click the sprite in frame 1 and then, holding down the Shift key, click the sprite in frame 25. This highlights the range of cells between the two sprites.
4. Choose Modify, In Between to fill in the highlighted region. Figure 29.12 shows that the same sprite is now present in channel 1 from frame 1 to frame 25.
   Figure 29.12 : Director's In Between function is an important time-saving asset for movie authors.

Remember that a sprite is an image of a cast member at a given point in the score. A sprite has several properties that a cast member alone does not have. These properties include the following:

• Size (in height and width)
• Scale (as a percentage of the cast member's original size)
• Location relative to the top left of the stage
• Blend percentage (opaqueness)

You can alter any of a sprite's properties by doing the following:

1. Click the cell containing the sprite whose properties you want to edit.
2. Choose Modify, Sprite, Properties to open the Sprite Properties dialog box (see Figure 29.13).
   Figure 29.13 : Sprites differ from cast members in that sprites have properties associated with their being on the stage.

3. Make the changes you want and click OK.

Creating Animations in Director

Probably Director's most exciting capability is how easy it is to generate animations. Director animations come in many flavors, as follows:

• Step-recorded animations
• Real-time recorded animations
• Animations done with in-betweening
• Animations created with ANIMWIZ, Director's animation wizard

Each of these is reviewed in the sections that follow.

Step Recording

Step recording is the most painstaking way to create an animation. The basic idea is that you record the position of a sprite in one frame, advance to the next frame, move the sprite to a new position, record the new position, advance to the next frame, and so on until you're done.

If you want to make your CD-ROM graphic move across the stage, you can do so with a step-recorded animation as follows:

1. Click the cell in the score where you want the animation to start.
2. Drag the CD-ROM graphic from the cast to the position on the stage where it should start in the animation. This creates a sprite in the highlighted cell in the score. The channel containing the sprite has a red dot (the step-recording light) next to its channel number.
3. Press the 3 button on your numeric keypad to advance to the next frame.
4. Drag the sprite to its new position.
5. Repeat steps 3 and 4 until the CD has been moved all the way across the stage (see Figure 29.14).
   Figure 29.14 : Step recorded animations are created one frame at a time.

6. Click a new frame to stop the recording.

Real-Time Recording

To create a real-time recorded animation, you move the cast member you want to animate across the stage, and Director records it and writes it into the score.

To animate your CD-ROM icon with real-time recording, follow these steps:

1. Click the cell in the score where you want the animation to start.
2. Click once on the cast member to be animated. You should not drag this cast member onto the stage.
3. Hold down Ctrl+Spacebar to activate real-time recording. You'll see the real-time recording light come on in the channel where the animation will reside.
4. Point your mouse point to the position on the stage where the animation is to begin.
5. Drag the pointer along the path you want the animation to take (see Figure 29.15).
   Figure 29.15 : In a real-time animation, Director records the position of the animated cast member as you move it.

6. Release the mouse button to stop recording.

In-Betweening

In-betweening is a very easy way to create an animation. All you need to do is place the beginning and ending frames of the animation and then ask Director to fill in the rest!

To animate your CD-ROM using in-betweening, follow these steps:

1. Click the cell in the score where you want the animation to start.
2. Drag the cast member to be animated to the point on the stage where the animation should begin.
3. Hold down the Alt (Windows) or Option (Macintosh) key and drag the cell you just created farther down the channel. This creates a new copy of the sprite.
4. Drag the sprite in the stage to the point where the animation should end.
5. Highlight the region between the start and end frames by clicking the start frame, holding down the Shift key, and clicking the end frame.
6. Choose Modify, In-Between to fill in the frames between the beginning and ending frames (see Figure 29.16).
   Figure 29.16 : In-betweening automatically sets up the frames of an animation.

The in-betweening function takes care of figuring out how the position of the sprite on the stage has to change to produce a smooth animation.

ANIMWIZ Features

The ANIMWIZ feature is new to Director 5.0, though Director 4.0 had a similar feature called Auto Animate. To access ANIMWIZ and reveal the dialog box shown in Figure 29.17, choose Xtras, ANIMWIZ.]

Figure 29.17 : ANIMWIZ makes it easy to create banners, zooms, rolling credits, and bulleted lists.

Banner  Figure 29.17 also shows you the Banners tab of the ANIMWIZ dialog box. From this tab, you can set up a scrolling text message on the stage. To do this, follow these steps:

1. Click the cell where you want the banner to be in the score.
2. Choose Xtras, ANIMWIZ.
3. Set the Style options for the banner, including typeface, scrolling direction, total duration, and the desired number of frames per second.
4. Specify the text that should be displayed in the banner along with how many pixels from the top of the stage the banner should be, how much of a delay before starting, and how many times it should cycle through the banner text.
5. Click the Create button.

Zooms  Zooms make text grow larger or smaller, depending how you set them up. To create a zoom, you need to complete the Zooms tab of the ANIMWIZ dialog box. This is accomplished with the following steps:

1. Click the cell where you want the zoom to occur in the score.
2. Choose Xtras, ANIMWIZ and click the Zooms tab.
3. Set the Style options for the zoom, including typeface, zoom direction (in, out, or some combination), total duration, and the desired number of frames per second.
4. Specify the text that should be displayed in the zoom along with what the minimum and maximum sizes of the text should be, how many pixels from the top of the stage the zoom should be, how much of a delay before starting, how long to hold the zoom, and how many times it should cycle through the zoom text.
5. Click the Create button.

Credits  A rolling list of credits is typical at the end of a movie and you can create the same effect with Director. By choosing the Credits tab of the ANIMWIZ dialog box (see Figure 29.18), you can specify all the options you need to create the credits list. To accomplish this, you just:

Figure 29.18 : Give credit where credit is due with the ANIMWIZ's Credits feature.

1. Click the cell where you want the credits to be in the score.
2. Choose Xtras, ANIMWIZ and click the Credits tab.
3. Set the Style options for the credits, including typeface, individual or scrolling presentation, total duration, and the desired number of frames per second.
4. Specify the text that should be displayed in the credits (roles and names) along with how much of a delay before starting, and how long it should hold each credit.
5. Click the Create button.

Bullets  Bulleted lists are frequently used in PowerPoint presentations or HTML pages to convey information in an easy-to-understand format. You can create bulleted lists in Director and get many of the nice presentation effects you get when creating with PowerPoint.

To create your animated bulleted list, follow these steps:

1. Click the cell where you want the bulleted list to be in the score.
2. Choose Xtras, ANIMWIZ and click the Bullets tab.
3. Set the Style options for the list, including typeface, animation effect (instant, wipe, roll, ripple), total duration, and the desired number of frames per second.
4. Specify the text that should be displayed in the list along with how much of a delay before starting, how long to hold each list item, and whether or not you want the title animated.
5. Click the Create button.

Using Lingo

Lingo is Director's scripting language. It is based on English-language words and, if read out loud, it describes what the script is doing. To see for yourself, consider the following simple Lingo script:

on mouseDown
   puppetSprite 4, TRUE
   set the locV of sprite 4 to 324
end

The script says that when the mouse button is pressed down, Director should set the vertical location of sprite 4 to 324 pixels below the top of the stage.

There are four types of scripts you can write in Director. Each type is written in Lingo, but they are at different positions in Director's script hierarchy. The following are the four main types:

• Frame scripts
• Cast scripts
• Sprite scripts
• Movie scripts

Frame scripts are lowest on the pecking order. They yield control to any other type of script. Cast scripts yield control to sprite and movie scripts. Sprite scripts can be overridden only by a movie script.

Frame Scripts

You place a script in a frame using the script channel in the score. To begin the script, just double-click the cell where the script should go. This action opens the script editing window you see in Figure 29.19.

Figure 29.19 : The script channel plays host to frame scripts, each of which becomes a new member of the cast.

Note in Figure 29.19 that the script shows up near the top of the score window. The large button that shows some of the lines of code in the script can be clicked to reopen the script editing window if you need to edit it later. Note also that the new script becomes part of the cast.

A commonly used frame script is:

on exitFrame
   go to the frame
end

This instructs Director to go back to the frame that it is leaving, thereby creating an "infinite loop." Having such a loop is useful because you can stop the action on a frame with the loop and set up some special condition (a particular keystroke, for example) to jump you out of the loop.

Cast Scripts

Cast scripts are scripts affiliated with a particular cast member. Whenever you place a cast member that has its own script, the script comes along for the ride and becomes part of the score. You compose a cast script inside the cast script editing window (see Figure 29.20).

Figure 29.20 : Cast scripts override frame scripts and apply each time you place the associated cast member.

Cast scripts are appropriate when you always want to associate certain functionality with a cast member. For example, if you have a cast number that is a clickable button, you could give it the cast script:

on mouseDown
   set the backColor of member 10 to 255
   updatestage
end

With the script above, Director changes the background color of cast member number 10 to white whenever a user clicks the button.

Sprite Scripts

You can make a script part of a given sprite, but you need to make the sprite a puppet before it will yield to a sprite script. To declare a sprite as a puppet, you use the following Lingo in the script channel of the frame where the sprite resides:

on exitFrame
    puppetSprite 1, true
end

After the sprite is puppeted, you can compose the sprite script in the Movie Script editing window (see Figure 29.21).

Figure 29.21 : Once puppeted, a sprite can have its own Lingo script.

You need to puppet a sprite whenever you want to control sprite properties using Lingo commands. One common task is to move the sprite to a new location on the stage. To do this, you can use a sprite script like the following:

on mouseUp
   puppetSprite 17, TRUE
   set the locH of sprite 17 to 142
   set the locV of sprite 17 to 327
end

Once you puppet sprite 17, you can change its horizontal (locH) and vertical (locV) coordinates on the stage using the Lingo set command.

Movie Scripts

Previous versions of Director only supported one movie script. The movie script was something of a "master script" that overrode all other types of scripts and governed the playback of the entire movie. Director 5.0 lets you compose multiple movie scripts to give an added degree of flexibility. Movie scripts are written in the movie script window.

Movie scripts become cast members just like any other script, so after you create it, you can double-click its cast member to go back and edit it.

Movie scripts are available to the entire movie and are used to control events that should occur when a movie starts, stops, or pauses. An example movie script might look the following:

on startMovie
   global clickCounter
   set clickCounter = 0
end startMovie
on stopMovie
   set the backColor of the stage to 0
end stopMovie

This script initializes a global variable clickCounter and sets it to zero when the movie begins. At the end of the movie, the script changes the stage's background color to black. Movie scripts are good for these types of "initialization at the beginning" and "cleanup at the end" tasks.

Preparing Your Director Movie for the Web

When you're happy with your movie, it's time to get it ready for the Web. There are three basic steps to accomplishing this, as follows:

1. Make the movie as compact as you can.
2. Save the movie.
3. Compress the movie using Macromedia's Afterburner utility.

Tips for Making Your Movie as Small as Possible

Everyone knows how important it is to keep files small on the Web. Users with slow connections are likely to lose patience waiting for huge files to download. Graphics are one type of file that you need to keep small. Because of their complexity, Director movies need to be kept as small as possible as well. To help you achieve this, try some of these tips:

• Keep your stage as small as possible.
• Use a white stage and make your backgrounds rectangular, colored with one color.
• Minimize the size of each cast member-especially bitmaps, sound, and video files.
• Use rescaling to make images larger. Increasing the size of a bitmap in the Paint window makes the movie larger.
• Don't use a color depth that is more than you need.
• When importing an image that uses a different color palette, use the Modify, Transform Bitmap option to convert the image. Do not use dithering.
• Keep sound files small by making their duration as short as possible. Reduce high sampling rates to 11kHz.

Saving Your Movie

After making your movie as small as possible, you can save it using File, Save; File, Save As; or File, Save and Compact. The result of each of these is a file with the .Dir extension that contains your movie. A movie saved with File, Save and Compact is optimized to make the .Dir file as small as possible.

Hit the Afterburner

Afterburner is a utility program that compresses a Director movie further and gets it ready to go up on the Web. To use Afterburner, just double-click its icon and browse to the movie file it should compress. The result is a file of the same name, but with the .Dcr extension. This is the file that should be placed on your server.

Placing the Movie on a Web Page

Incorporating a movie into a Web page is just a matter of using the HTML <EMBED> tag. <EMBED> takes the SRC attribute to tell the browser where it can find the .Dcr file containing the movie and the WIDTH and HEIGHT attributes. A typical <EMBED> tag might look like the following:

<EMBED SRC="mainpage.dcr" WIDTH=580 HEIGHT=244>

When a browser enabled with the Shockwave plug-in sees this tag, it reserves a 580´244 pixel space, loads the movie, and plays it on-screen.

Expanding Shockwave's Capabilities

Macromedia has recently added streamed audio capability to Shockwave. This feature lets the Shockwave browser plug-in play a sound as it is downloaded, rather than downloading the entire sound file and then going back and playing it. The Shockwave Audio (SWA) family of products-Director 5, SoundEdit 16 plus Deck II, and SWA compression Xtras-also enable you to compress audio files at ratios as high as 176:1. This feature is invaluable when you consider how important it is to keep download times to a minimum.

Creating a Streamed Audio File

The SWA Export Xtra for SoundEdit 16 is the key to creating streamed audio files. You'll find this as an option under SoundEdit 16's Xtras menu.

The most important step in creating a streamed audio file is selecting the bit rate. Your choice here will impact how fast the audio is streamed-a high bit rate produces a high streaming rate. The bit rate also has an effect on sound quality. You might choose a lower bit rate to slow down the streaming rate for users on a slow connection, but that will reduce the quality of the sound. Table 29.1 gives you some rules of thumb to use when making a decision about bit rate selection.

Creating a Compressed Audio File

Compression of audio files is done from Director 5, not from SoundEdit 16. The choices you make when setting up the compression are similar to those made when creating a streamed file. You can use the rules of thumb in Table 29.1 when choosing bit rates for the compressed files as well.

It is important to understand that the Director 5 Compression Xtra doesn't actually perform the compression. You use the Xtra to configure the compression parameters. Once that is done, you need to use Afterburner to complete the compression.

Placing a Streamed Audio File in a Director Movie

To make a streamed audio file available to a Director movie, you should place the file on your Web server. Then, you can import the file from a Lingo movie script, like the following:

on startMovie
   set the URL of member "swafile" to
   "http://www.your_server.com/swa/greeting.swa"
   set the preLoadTime of member "swafile" to 10
end

The preload time specifies a number of seconds of audio to preload before starting to play the audio. Higher preload times can increase the time a user has to wait, but it will help ensure the integrity of files created with higher bit rates, especially over slower connections.

Using Lingo to Control Audio

Macromedia has expanded Lingo to include elements that support streamed audio files. Two of these are the URL and preLoadTime elements you saw used in the script to preload a sound file. Some of the other key additions are summarized in Table 29.2