IT82: Multimedia

Macromedia Director Practical 2

This practical will introduce you to further features of Macromedia’s Director multimedia
authoring tool. You will learn how to create simple buttons, add tool tips, create shapes and text
within Director, and do some simple animation. All of these things will be very useful when you
come to do your assignment in which you will use Director to build your own prototype
multimedia presentation. Do this practical now, even if you have not finished the first Director
practical (you can finish off the first practical later on, if you wish).

Getting Started

Firstly, let’s have a quick look at the final presentation you are going to build. It is basically an
extension of the presentation you worked on in the first Director practical.

⇒ In Windows, navigate to Groups on Wide\IT82\Director and double-click on

[Link]
⇒ Once the presentation has loaded, click on the Movie button. The presentation goes to a
new section. Notice the fancy transition and the movement of the small image
⇒ The final screen shows a picture of a motorcycle
⇒ Click “Quit” when you have finished.

Now we can get started on building this presentation. If you (nearly) finished the last Director
practical, then use that Director file as the starting point here. Otherwise, copy the file
[Link] from Groups on Wide\IT82\Director to your own file space (into the folder that
you were using last time).

⇒ Start Director and load the DIR file that you are going to use (File: Open)

Adding a Simple Button

The buttons you created in the first practical look very nice, but are quite complicated to build,
requiring three different images for each button. Director has a button tool for creating useful,
but much simpler buttons. If the Tool palette is visible, you will see a button labelled “Button”
on it (select Window: Tool Palette if it is not currently visible). We will use this to create a
button to allow the user to jump to the new section of the presentation that we are also going to
create.

⇒ Make sure that the first frame is selected in the Score

⇒ Click “Button” on the Tool palette
⇒ In a suitable position on the Stage, click and drag with the left mouse button to create
the outline of a small button
⇒ Type “Picture” as the button label
⇒ The button needs to be present until the end of the current presentation, so in the Score
window, extend the length of the button sprite until it finishes in frame 60 (you will
probably find this sprite in the next available Score channel).

The button currently does not do anything. We need to add a behaviour to it so that when the
user clicks on it the presentation jumps to the appropriate point. We will add new frames to our
presentation, beginning at frame 65, after the end of the current presentation. So the button
behaviour should execute a jump to frame 65 on “mouse up”. We could do this using a Lingo
script attached to the button sprite, as we did in the first practical. It can also be done using one
of the inbuilt Library behaviours:

⇒ Select “Window: Library Palette” to bring up the library of behaviours

⇒ Select “Navigation” from the Library
⇒ Scroll down to find the “Go to Frame X button” behaviour. Click and drag this
behaviour onto your “Picture” button on the Stage
⇒ Enter frame 65 in the dialog box that appears.

Creating the Basics of the New Presentation

Now we have to create the new part of the presentation that this button navigates to. The new
section will extend from frames 65 to 75. Firstly, we will create a simple background for our new
section that will be used instead of “The Interactive Guide to Motorcycle Maintenance”
background of the current presentation. This is most easily done using the Vector shape
window.

⇒ Select “Window: Vector shape”

⇒ In the window that appears, click on the “Fill Color” tool and select a nice background
colour
⇒ Now select the “Filled Rectangle” tool and draw a large rectangle (we will resize it later)
in the vector window
⇒ Try adding a gradient if you want something a little fancier
⇒ Close this window and you will find you have a new cast member. Click and drag this
cast member onto frame 66 of the Score, using the same channel that contains
“BikeInterface5” up until frame 60
⇒ Adjust the length of the sprite so that it finishes in frame 75
⇒ On the Stage, select this sprite and bring up its “Properties” window (right-click on the
sprite to bring up the selection menu). Change its width and height to 640 by 480 so
that it fills the Stage. Close the “Properties” window, if it is in the way
⇒ Now, add a frame script to frame 75 so that the presentation loops on this frame (either
copy the frame script that has already been used earlier in the presentation e.g. see
frame 60; or right click on this frame in the script channel, select “Frame script… ” and
add “go to the frame” as the body of the skeleton Lingo script that appears).

Now you have a background for your new section. Rewind, play your presentation and click on
your “Picture” button. Your new background should appear. Let’s make things more interesting
by adding some content to this new section. First, we will add a title, then the picture of the
motorcycle (which already exists in a file for you to import).

⇒ Stop the movie playing and select “Window: Text”

⇒ Select a font and a big size (e.g. 36pt) by right-clicking in the Text window to bring up
the background menu
⇒ For the text, type an appropriate title, such as “My Wonderful Motorcycle!”
⇒ Close the Text window and you will have another cast member containing your heading
⇒ Click and drag this cast member onto the Score at frame 66, using channel 2 (or any
other channel that is empty at that point)
⇒ Change the length of this sprite so that it finishes in frame 75
⇒ On the Stage, move the heading until it is centred near the top of the stage and resize the
sprite so that the text is all on one line.
⇒ While the text sprite is selected, set its background to “transparent” using the Ink
property in the “Properties” window

⇒ Select “File: Import” and import the file “[Link]” from the Groups on
Wide\IT82\Director\Fun folder
⇒ Click and drag this cast member onto frame 75 of the next channel that is empty at this
frame
⇒ Shorten the sprite’s length to just a single frame
⇒ Move the sprite on the Stage, if necessary, so that is does not obscure your heading (or
move the heading)

Rerun your presentation. Is everything working as it should? If not, carefully check back over all
the instructions given above and get this part of the presentation working before proceeding.

⇒ Save your presentation! (Do this regularly throughout).

Adding a Frame Transition

Now let’s join the old and the new presentations together and create a fancy transition between
the two. You may be wondering why we created a jump to frame 65 from the “Picture” button,
yet the new presentation starts at frame 66. Frame 65 will act as the transition point between the
two parts of the presentation.

⇒ In the Score, extend the length of the “BikeInterface5” sprite so that it finishes in frame
65
⇒ Now create a transition between this frame and your new background in frame 66 by
right-clicking on frame 66 in one of the effects channels (above the frame marker) and
selecting “Transition… ”
⇒ Choose one of the many transitions available e.g. Dissolve, Boxy Rectangles
⇒ Click OK and your transition will be added to the “Transition” channel (three channels
above the “Frame script” channel)
⇒ Rerun your presentation and see what happens now when you click “Picture”
⇒ If you want to alter your transition, double-click on it in the “Transition” channel and
the dialog box will reappear. Play to your heart’s content with different transitions!
You may also like to alter the duration and smoothness of the transition.

Tweening Animation

Let’s add another image to the background for frames 66 to 75, and make it move around using
tweening animation.

⇒ Import the animated GIF file “[Link]” from the Groups on Wide\IT82\Director\Fun
folder (this is a little, self-contained animation; but we will also make the whole image
move across the Stage)
⇒ Create a sprite from this cast member that extends from frames 66 to 75 in a spare
Score channel
⇒ Select frame 66 and move the sprite image on the Stage to the top left-hand corner (but
do not obscure your title!)
⇒ Select the sprite (if not still selected) and click on blue dot (with the red centre) in the
centre of the sprite with the left mouse button. Holding the mouse button down, drag
the mouse towards the bottom right-hand corner of the Stage and release the mouse
near the bottom corner.

A yellow line containing dots and terminating in a large red dot should have appeared where you
dragged the mouse. Rerun your presentation and see what happens now when you click “Movie”.
After the transition, the image appears and moves from the top left to the bottom right. You have
created a simple “tweening” animation. The dots that appeared on the line from the image when
you dragged the mouse represent each of the frames from 66 to 75. Director has automatically
calculated where the image should be in each frame to move it between your selected start and
end points in a smooth fashion. The path does not have to be straight, you can make it curved…

⇒ Stop your movie, select frame 66 and then select the animated image on the Stage
⇒ While holding down the Alt key, click and drag with the left mouse button on one of the
dots near the middle of the line. You will see that the entire line bends to form a curve.
Play around until you have a path that you like
⇒ Rerun your movie to see what happens.

Other properties of a sprite, such as its colour, can be tweened to change smoothly over a range of
frames, in the same way that we have tweened its position. I will leave it as an exercise to
explore these possibilities if you wish (Director’s online Help will tell you about this).

Adding a Sound Track

To finally complete our new presentation we will add a short sound track.

⇒ Import the sound file “[Link]” from the Groups on Wide\IT82\Director\Fun folder
⇒ Create a sprite from this cast member that extends from frames 66 to 75 in sound
channel 1 of the Score (you will find two sound channels just above the script channel,
which itself is just above the frame marker)
⇒ Just for now, turn sound on but make sure the volume is low (using the buttons on your
computer’s monitor). Rewind and play the presentation.

Unlike images, sound tracks have a natural duration that is not altered by extending or shortening
their sprite’s duration on the Score. A sound track will stop once the movie moves out of the
frames in which it is present or once the sound track has come to its end, irrespective of whether
its duration in the Score is longer than that. To make a sound file play continuously, it can be
made to loop.

A couple more things and we are done. Firstly, if your original presentation has “Home” and
“Quit” buttons, extend their duration right up until frame 75. Now, finally…
Adding Tool Tips

Most software packages these days implement tool tips – short messages that appear when the
mouse is placed over an object (typically a button or menu option). We will finish this
presentation by adding a tool tip to the “Picture” button to explain what it does. This is a little bit
complex in Director, so pay attention!

⇒ Select frame 1 in the Score

⇒ Click “Field” on the Tool palette and create a small field somewhere on the Stage.
There is no need to add any text to it. It simply acts as a place-holder for our tool tip
message
⇒ Open “Window: Library Palette” and select “Controls”
⇒ Find the “Display Text” behaviour in the Library and click-and-drag it onto your field
⇒ Select “tooltip” in the dialog box that appears
⇒ Now find the “Tooltip” behaviour in the “Controls” Library and drag this onto the
“Picture” button
⇒ Type a suitable text message, such as “Go to see my wonderful motorbike!”, in the
dialog box that appears. The default values of the other parameters should be ok (note
that the cast member number for the sprite to display the text message should
correspond to the field that you have just created)
⇒ Finally extend the duration of your “field” up to frame 60.

Rerun your presentation. The “field” disappears, and watch your tool tip message appear when
you leave the mouse over the “Picture” button! Why not now create a “Projector” of your
presentation, so that you can run it as a stand-alone programme (see the first Director practical if
you have forgotten how to do this)?

And that’s it. I hope you have been saving your presentation regularly along the way. If not, do
it now. There is lot’s more the learn about Director. The online Help facility should be your first
port of call to find out how to do things. Or check out some of the many web sites that contain
Director examples. Some things you could do now are to change the colours and font of your
“Picture” button, or the colour of your title in the new presentation.

Bruce Graham, Spring 2002