Firing Up Director MX

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).

   
   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.

   
   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.

   
   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.

   
   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.

   
   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. 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. This is how the 12th frame of Channel 2 should look.