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.
Update your browser software: Make sure that you have the latest
versions of the Shockwave and QuickTime
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
Setting the Stage
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.
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
Inspector Gadget. The Property Inspector is a context-sensitive panel from which you can command a wide variety of parameters.
For Stage Size, enter 500 x 500, and under color, choose CCCCCC, a Web-safe neutral gray.
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.
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.
Save the file, and name it whatever you like.
Bring Out the Cast Members
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
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.
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.
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
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.
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
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
Tip: You can also alter the length of a Sprite by
using the Property Inspector and entering a value under End
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.)
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
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.
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.
Now you'll have an easier time positioning the sprites because you
can read their names in the Score.
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
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.