Web DevCenter    
 Published on Web DevCenter (http://www.oreillynet.com/javascript/)
 See this if you're having trouble printing code examples

Firing Up Director MX

by David Weiss

Director is one of the most popular tools for authoring CD-based multimedia, and it can also be used to author applications for kiosks or Shockwave media for the Web. But how easy would it be for someone with very little scripting ability, like me, to pick up Director MX and weave together a little interactive video? I haven't become an expert, by any stretch of the imagination, but in just three days, I was able to learn enough of Director MX to do a little damage. So what I'm going to show you here is just the very tip of Director's iceberg, but I want to show that if you've worked with a little HTML, then you'll probably find it easy to get into Director. Once you do, you'll be hard-pressed to discover where the possibilities end.

What You'll Need

Director MX (Note: Free trial versions of Director MX are available from Macromedia.)

Preparing for the Tutorial

  1. Download the tutorial files (media.zip).

  2. Update your browser software: Make sure that you have the latest versions of the Shockwave and QuickTime plug-ins.

  3. View and experiment with the completed project. (This is a small version of an application that could be downloaded relatively quickly over DSL. A version for CD duplication could, of course, be much larger and of higher quality.)

Setting the Stage

  1. Start Director, and make sure that the Score, the Stage, and the Property Inspector are visible on the stage. If they're not, select them from the Window menu.

  2. Click on the Stage to make it active, and then click on the Movie tab on the Property Inspector. Just to the left of the Help button (question mark), you'll see a button that looks like six lines arranged in two columns. Make sure that this button is not selected (highlighted).

    Property Inspector
    Inspector Gadget. The Property Inspector is a context-sensitive panel from which you can command a wide variety of parameters.

  3. For Stage Size, enter 500 x 500, and under color, choose CCCCCC, a Web-safe neutral gray.

  4. Now we'll import the media. Choose Import from the File menu, and navigate to the Media folder which you downloaded (media.zip). Click on one of the files in that folder; the Add All button will light up. Click the Add All button and then click the Import button. On the Image Options dialog box, choose Image (32 bits) for Color Depth, choose Trim White Space under Image, and leave Dither unchecked. Finally, check Same Settings for Remaining Images and click OK.

  5. Your Cast will now be populated by 11 new Cast Members. Uncheck the List View button (second to the left in the upper-left corner of the Cast Window) to view thumbnail images of each member.

    Cast Window
    All-Star Cast: The Cast Window shows all the media that star in your movie: Images, QuickTime files, scripts, and sounds.

  6. Save the file, and name it whatever you like.

Bring Out the Cast Members

  1. Now we're going to start arranging the Cast Members on the Stage. First, choose Preferences from the Director menu, and then select "Sprite…" Under Stage Selection, choose "Current Frame Only," leave both options for Span Defaults unchecked; for Span Duration, click the radio button next to the Frames field and enter "1". Leave Terminate at Markers unchecked.

  2. Using the controls at the bottom of the Stage Window, click the Rewind button to make sure that the Playhead is located in the first frame of your movie. Drag the Cast Member called "Full" from the Cast Window onto the stage, and position it in the center.

    Samba Stage
    All the World's a Stage. The Stage Window is where all the action of your movie takes place.

    A Word of Explanation: When a Cast Member is dragged onto the Stage, that action creates a "Sprite" of that Cast Member. A Sprite is like an instance of a library element.

    On the Score, you'll see a blue dot in the first frame, indicating that there is now a Sprite in the first frame. Hold down the Option key and drag the Sprite to the 10th frame. The Sprite now takes up 10 frames, and the name of the File, "Full", is now the name of the Sprite. Now click on the Sprite in the Score and drag the Sprite to the right, so that it occupies frames 2 through 11.

    Samba Score
    Keeping Score. The Score is a timeline-based interface for organizing the sequence of events that make up your movie.

  3. Click in the second frame of Channel 2 to select the frame. Drag the Cast Member called "Interface2" from the Cast Window onto the stage, so that it covers the video clip; release the mouse button. You'll see that the interface appears behind the video. We'll fix that soon. But first, on the Score, Option-drag the Sprite in channel 2 so that it spans frames 2 through 11, just like the video Sprite.

  4. Now let's fix the layering problem. In the Cast Window, click on Full, and then in the Property Inspector, click on the QuickTime tab. Uncheck DTS. The video clip will appear in its proper layer. What's going on? "DTS" stands for "direct to stage". When a QuickTime movie has this property, it will always appear in the topmost layer. You would use this command if you wanted the user to have full access to the QuickTime interface when they're playing your movie.

    Tip: The Channels in Director work in the exact opposite way that Layers work in Photoshop or Fireworks. That is, the higher number channels appear on top, and lower number channels appear on the bottom.

  5. Now let's adjust the position. On the Score, click Full to select the Sprite. Using the arrow keys, move the video so that the dancer appears in the center of the interface and the unsightly open door is hidden from view. Also make sure that there's no white space peaking out above the video.

    Positioning Video
    Getting Into Position. Using the arrow keys, move the video approximately as shown.

  6. Now we'll make room for more media. Shift-select Full and Interface2 on the Score, and drag them down one channel, so they now occupy channels 2 and 3, respectively. Make sure to keep them in frames 2 through 11.

  7. Place the cursor in the 2nd frame of the now-vacant 1st channel to select that spot in the Score, and then drag the Feet video onto the stage so that it roughly covers the other video. Again, it will appear in the topmost layer, so uncheck DTS in Property Inspector on the QuickTime tab (You may need to click again on the Feet video in the Cast). The Feet video has now disappeared behind the other Sprites, but as with Photoshop's Layers, Director's Channels can be turned on or off to aid in designing. Click the small box to the left of Channel 2 in the score to hide it. Click once on the Feet sprite in the score to select it. Then, returning to the Property Inspector, and clicking on the QuickTime tab, uncheck the Audio: we'll be relying on the audio from the Full video clip. Making sure the Feet sprite is still selected on the score, use the arrow keys to position the feet in the center of the frame from left to right, but make sure that no white space appears above the video. Finally, Option-drag the Feet sprite in Channel 1 so that it spans frames 2 through 11, like the others. Then click the box next to Channel 2 to make it visible again.

    Tip: You can also alter the length of a Sprite by using the Property Inspector and entering a value under End Frame.

  8. Click once on Interface2 on the score to select it. Reading from the Property Inspector, jot down the X and Y coordinates. Then place the cursor in the empty 1st frame of channel 3, and drag Interface1 from the Cast onto the stage. Select Interface1 on the score--it will appear as a simple dot in frame 1, channel 3--and, using the Property Inspector, change the X and Y coordinates to match those of Interface2. (When the user moves from one interface to the other, the only thing that will appear to change will be the contents of the frame graphic.)

  9. Repeat these steps to place FeetButton, FullButton, PlayButton, PauseButton, and RewindButton on the Stage, approximately as shown in Figure 1, making sure that each button occupies a separate channel, 4 through 8. Don't forget to select the spot in the score before you drag the graphic.

    Figure 1
    Figure 1. Position the buttons so that they look approximately like this.

    Crucial Tip: to change the position of an object, select it on the Score, not the Stage. If you try to select objects directly on the Stage, sooner or later, you'll drag the wrong thing, which is a drag in both senses of the word.

  10. Once you have the buttons approximately where you want them to go, shift select channels 1 through 8 on the Score, and using the Property Inspector, set the End Frame at 11 in line with the others. You can't use the Option-drag technique on multiple Sprites.

  11. Now you'll have an easier time positioning the sprites because you can read their names in the Score.

  12. Place the cursor in the empty 12th frame of Channel 1 and drag Interface3 onto the Stage. Making sure Interface3 is selected in the Score, enter the same X and Y coordinates as Interfaces 1 and 2 using the Property Inspector, so that Interface3 appears in the correct location on the Stage.

    Click in the empty 12th frame of Channel 2 and drag the ReplayButton onto the stage, positioning it as shown in Figure 2.

    Figure 2
    Figure 2. This is how the 12th frame of Channel 2 should look.

Scripting the Action

At this point, your score should look exactly like this:

Figure 3

  1. Before we start scripting, let's see how the movie runs as-is. Hit the Rewind button directly underneath the Stage. Notice that the playhead obediently jumps to the first frame. Making sure that the Loop Playback button is selected (5 buttons to the right of the Rewind button), hit the Play button below the Stage, and watch both the Stage and Score for a little while and then press the Stop button below the Stage. Annoying, no? What's happening is that the playhead is whipping through the frames, returning to the beginning when it gets to the end and then continuing. It hasn't been told otherwise. We'll soon address this problem.

  2. Double-click in the Script channel of Frame 1, directly above the 1 in the Score. A scripting pane will open that contains the code:

    1 on exitFrame me
    3 end
  3. A blinking cursor will appear in the blank line 2, and at that prompt enter "go to the frame" (without quotes), name the script "Hold", which you do by entering the name in the blank field at the top of the scripting window, and close the window. You'll see a new Cast member in the Cast Window, and its number will appear in the scripting channel. So what does that accomplish? It's telling Director that as the playhead leaves frame 1 it should go to the frame its currently on. So the playhead remains paused at that frame, waiting for further instructions.

    A Simple Script. The Script window has menus that call up many lines of prefabricated code, making it easy to experiment.

    Why "me"? You may have noticed the tiny word "me" in line 1 of the above. That simply means "this frame". Though it doesn't seem necessary, that's what the script says by default, so I figured I'd just leave it alone.

  4. We're going to need this exact script again, on frame 12, but instead of typing it out again, just drag it from the Cast to the Scripting channel of the score at frame 12.

  5. Click in the gray area directly above the Scripting Channel for the 2nd frame. A triangle will appear with the text "New Marker". Replace that text with the name "VidStart" (without quotes). Why are we doing this? When we write the button scripts, we'll refer to this marker.

    Tip: In a script, referring to specific frames is a bad idea. What if you changed things around a bit and inserted media into various frames of your movie? All the frame numbers would be wrong. You'd have to change each and every script. If you use a marker, and you make changes, you just move the marker; there's no need to touch your scripts!

  6. We're going to write one more short frame script before we script the buttons. Double-click in the Script channel of the 2nd frame, the one under the VidStart marker, and type the following script:

    1. on exitFrame me
    2.  sprite(2).movieRate = 1
    3.  sprite(1).movieRate = 1
    4. end

    Name the script "Resume" and close the window.

    This script will ensure that whether a user presses Play for the first time, or presses Play after pressing Pause, the video (actually both videos) will continue playing right where they left off.

Scripting the Buttons

  1. Click on the FullButton on the Score and then click the Behavior tab on the Property Inspector. Click the plus-sign button to call up the Behavior Popup and scroll to select New Behavior. Name the behavior "Full View" and click OK. Click the scroll icon above the new behavior to call up the Script Window; at the prompt, type the following code and close the window:

    1. on MouseUp me
    2. set the blend of sprite(2) to 100
    3. end MouseUp 
  2. Repeat Step 1 for the FeetButton, naming the new behavior "Feet View". The script for Feet View is exactly the same as Full View, but line 2 of Feet View contains the code "set the blend of sprite(2) to 0" (without quotes).

    What we're doing here is making the video in Channel 2 transparent (where the blend = 0) or opaque (where the blend = 100). So when a user clicks the Feet View button, even though the video of the Full View is transparent, they still hear the exact same audio, and since the two videos begin and end at the same point relative to the music, the feet keep time with the music from the other video.

  3. Follow the same steps for PlayButton, PauseButton, and RewindButton, naming the behaviors Play, Pause, and Rewind, and using the following scripts for each:

    1. on MouseUp me
    2. go to frame "VidStart"
    3. end
    1. on MouseUp me
    2.  sprite(2).MovieRate = 0
    3.  sprite(1).MovieRate = 0
    4.  end
    Rewind Button:
    1. On MouseUp me
    2.  sprite(2).movieTime = 0
    3.  sprite(2).movieRate = 0
    4.  sprite(1).movieTime = 0
    5.  sprite(1).movieRate = 0
    6.  end

    What just happened? We told each of these buttons that after you click on them (MouseUp) several things should happen to several sprites. The MovieRate property says, "The video is playing (1)" or "The video is not playing (0)." And the MovieTime property says "When the MovieTime is 0, the video is at the beginning."

  4. We're almost there. Click the Rewind button below the Stage and then the Play button (also below the Stage). The movie will present the first frame and then pause, waiting for input. Click the Play button in your movie and watch both the stage and the score. The film plays from beginning to end and then pauses at the final frame. However, the video clip should play for about 30 seconds, and we're only getting about 5 seconds out of it. The problem is that the video has an independent timing from that of the playhead. To get around this problem, add the following script in the Script channel of frame 11, and name it Video Loop:

    1. on exitFrame me
    2.	myMember = sprite(2).member
    3.	myDuration = member(myMember).duration
    4.	myMovietime = sprite(2).movieTime
    5.	if myDuration > myMovietime then
    6.	go to the frame
    7.	else
    8.	go to the frame + 1
    9.	end if
    10. end

    This is a very long-winded way of saying that if the video is over, proceed to the next frame, but if the video is not over, that is, if "My Movie's Time" is less than the duration of the video, then keep playing the video. Lines 2 through 3 set up the variables that are calculated in line 5. How did I, a non-programmer, come up with code such as this? I copied it verbatim from Macromedia's Help file, substituting "sprite(2)" for the sprite name. Because the navigation ensures that both movies will always play simultaneously, I need only reference one of the videos, in this case, the video playing in Channel 2.

  5. All that remains is one little detail: the Replay button in frame 12. But because we want it to do the exact same thing as the Play button in frames 1 through 11, we won't have to rewrite the script. Just select the ReplayButton in the Score (12th frame, 2nd channel), hit the Behavior pop-up button on the Property Inspector as you did before, but instead of creating a new behavior, just scroll down and select Play.

  6. Creating a Shockwave version of this file required a few extra steps that go beyond the scope of this tutorial. But to create a self-running version of the movie for distribution (a "projector"), choose Create Projector from the file menu and follow the steps to create a projector of your .dir file (to quit the projector, hit Command-Q). When you distribute the projector, include copies of the QuickTime movies in the same folder; these aren't included in the packaging process.

And with that, you're done. Hit Rewind and Play in the control strip below the stage and then hit Play in the movie. Switch between Full View and Feet View. Experiment with Pause, Rewind, and Replay. And now that you've learned all there is to know about Samba, get up from the computer and hit that dance floor!

David Weiss is an Oakland, California based freelance writer. He's worked as a senior editor at Macworld magazine, and as the lead editor of MacHome Journal. Read more about David at www.davidweiss.net.

Return to the Web Development DevCenter.

Copyright © 2009 O'Reilly Media, Inc.