Applied Studies College CSA 116: Digital Video and Audio

Macromedia Director MX 2004

MACROMEDIA DIRECTOR MX 2004

Macromedia Director is a multimedia authoring program capable of creating Shockwave content for
the web or self-contained executables for hard drive, DVD or CD-ROM.

THE DIRECTOR INTERFACE

Director's interface is designed around a movie / theatre metaphor. The media elements in a Director
project are called the Cast members, they interact on a Stage, the Score keeps track of the media over
time, and you, as the multimedia designer, become the director of a movie.

A movie is the term used for a multimedia piece you create with Director. Like animated motion
pictures, Director movies can contain animation, sound, special effects and even video. They also have
an added dimension not capable in a motion picture, interactivity. Interactivity means that the movie
responds to the choices you make. Director movies can be as simple as an animated logo, or as
complex as an online chat room or game. Every movie has several unique qualities, including stage
size, position, colour and much more. You specify the movie properties (as well as properties for other
elements) in the Property Inspector.

Director's User Interface (UI) is made up of a number of windows (also called panels). These windows
can be grouped together to form tabbed panel groups. They can also be docked (linked) together or, in
the case on some panel types, docked to the background (docking channels).

Prepared by: Mr. Basel Bani-Ismail Page (1)

Applied Studies College CSA 116: Digital Video and Audio
Macromedia Director MX 2004

When creating and editing movies, you typically work with four key windows in Director's work area.
These are: the Stage, the rectangular area where the movie plays; one or more Cast windows, where
all the movie's media elements are stored; the Score, where the movie is assembled and the Property
Inspector, which allows you to set the properties of various aspects of your movie. The Control Panel
is another useful window, providing controls for playing movies.

At the top of this page is the default workspace (panel set) layout. You can create and save your own
panel set layout from Windows > Panel Sets > Save Panel Set Layout. You can also go back to the
default layout at any time following the same process.

In the default panel set layout (as in the screenshot), the Score and Cast are docked together. The Tool
Palette is docked to the left docking channel. In the right docking channel, we see the Property
Inspector. Docked underneath is the Library Palette in a tabbed panel group with the Behavior
Inspector and Object Inspector. The Stage has a Control Toolbar built into the bottom of the
window. This toolbar is a downsized version of the Control Panel. You can remove the Control
Toolbar by choosing View > Control Toolbar (the Stage window must be active to allow you to do
this).

There are two types of windows in Director: document windows and tool windows. Document
windows are used to create or edit content. Tool windows allow you to view or modify properties of
this content. The Paint window is a document window, allowing you to create and edit images. The
Property Inspector is a tool window that allows you to view properties of that image member (in the
member tab). Some cast member properties displayed in the Property Inspector are not editable, like
the creation date, while others can be modified. The Stage, Score and Cast are document windows. The
Tool Palette, Control Panel are tool windows.

Main Windows Summary

The Score organises and controls a movies content over time in channels and frames (see below). It
also controls special effects, such as transitions.

The Cast window displays all the media that make up a movie, such as images, text, sounds, digital
video. It can be viewed as series of icons (as shown in the screen shot above) or as a text list when in
list view mode.

The Stage is the 'screen' on which Director movies are projected. It is used to determine where all the
visible media in a movie appear.

The Property Inspector displays the properties of various elements of a movie, such as cast members,
sprites, or the movie itself.

The Control Panel provides a set of controls similar to those on a VCR to do things such as pause,
play or rewind a movie.

Prepared by: Mr. Basel Bani-Ismail Page (2)

Applied Studies College CSA 116: Digital Video and Audio
Macromedia Director MX 2004

The Score is made up of:

Channels - rows that contain effects (timing controls, transitions, sounds) and sprites (visual media).
Sprites are instances of cast members on the Stage. The sprite channels represent how sprites are
displayed and controlled over time. Sprite channels are numbered, allowing visible media to be layered
on the Stage. Sprite channels can also be named (in MX 2004).

The Score can be minimised or maximised by clicking the Hide/Show Effects Channels icon.

Frames - numbered columns. A frame is a single step, or moment in time in the movie, like frames in a
traditional film. The playback head shows which frame is currently displayed on the Stage. By
clicking any frame in the Score, the playback head will move to that location in the movie.

Prepared by: Mr. Basel Bani-Ismail Page (3)

Applied Studies College CSA 116: Digital Video and Audio
Macromedia Director MX 2004

TUTORIAL 1: THE BOUNCING BALL

ANIMATING OBJECTS ALONG A PATH
We will start by creating a new movie and setting the Stage size.

1. Start a New Movie:

File > New > Movie (Shortcut = Ctrl+N)

2. Choose Modify > Movie > Properties. The Movie tab of the
Property Inspector appears. Change the Stage Size to 640 x
480. Note the other properties that can be changed.

We are now going to create a ball, using a the Vector Shape editor.

3. Choose Window > Vector Shape (Shortcut = Ctrl+Shift+V)

4. Click the Filled ellipse button.

5. Draw an ellipse (circle) that fits into the Vector Shape window.
Don't worry about being precise. We will be changing the size of it
later.

6. Click on the Gradient fill button. This fills the ellipse

with the default colours, which happen to be a light grey to red
(unless someone has changed it on your computer).

7. To change the starting colour, click and hold on the colour box on
the left side of the Gradient colour control. A palette of colours will
appear. Choose a sky blue from the palette (just a colour that I like).
You will notice the Fill colour chip changes colour to your selection.

8. Change the Gradient Type pull-down menu at the top of your

window from Linear to Radial.

9. Change the Stroke Colour to white. Notice how the outline of the ellipse disappears.

We are now going to change a few other properties of this ellipse. To allow us to compare these
changes, we will make a copy of this cast member.

10. Close the Vector Shape window.

11. In the Cast Window, select the ellipse. Choose Edit > Duplicate (Shortcut = Ctrl+D). By doing this,
we created a copy (or duplicate) of the cast member in the next available cast slot. We could have
duplicated the vector cast member while it was open in the Vector Shape Editor too. Double click the
new cast member to open it in the Vector Shape Editor.

Prepared by: Mr. Basel Bani-Ismail Page (4)

Applied Studies College CSA 116: Digital Video and Audio
Macromedia Director MX 2004

12. Change the Cycles to 3 and the Spread to 200. (Again just some numbers I happen to like.)

Click the Previous Cast button and compare the 2 ellipses. Experiment with different cycles and
spreads to get an idea of what they mean.

13. Name the latest ellipse bouncing ball. This can either be done in the Vector Shape window or the
Cast Member window. (See the screenshot above to identify where the name of the cast member
appears.)

Now we are going to animate the ball.

14. Drag bouncing ball from the cast member window to the Stage. You can drag and drop a cast
member directly into the Score. This will centre it on the Stage.

15. Viewing the sprite on the stage, you will see a grey
box underneath the ball (the sprite must be selected). This
box is called the Sprite Overlay Info box.

You can change the transparency of the box by moving the black line, at the right end of the box, up or
down. Even with a very high transparency, I still find this box gets in the way, so suggest we turn it off.
Choose View > Sprite Overlay > Show Info.

16. Click on the Score to make it the active window. You will notice the ball sprite is extended over 30
frames. This is a default setting (which can be changed). Click on frame 30 of the sprite (its last frame)
and drag it to frame 40.

We are now going to resize the ellipse.

17. Click on the ball on the Stage to select it. Press Shift and, at the same time, click the bottom right
corner handle of the sprite and drag up and to the left to make it smaller. Holding down Shift lets us
resize the sprite in proportion to its original dimensions. Resize the sprite to approximately the size
shown in diagram below (picture after step 20), and move it to the left side of the stage.

18. In the Score, click on frame 40 in channel 1 to select the last (end) frame of the sprite. Then click
on the top the Stage to make it the active window. Now, holding down the Shift key, click and drag the
ellipse to the right end of the Stage. Shift, in this case, restricts the movement to 90 degrees. You will
notice a line being drawn on the Stage. This is the animation path. Rewind and play the movie to see
what you created.

19. To curve the path, we are going to insert keyframes within the sprite. Keyframes are key points
within a sprite that identify unique properties at that location. By having different properties at
subsequent keyframes, we force Director to work out the in-between steps and thereby create
animation. This process is called tweening.

Prepared by: Mr. Basel Bani-Ismail Page (5)

Applied Studies College CSA 116: Digital Video and Audio
Macromedia Director MX 2004

Click on frame 10 of the sprite and choose Insert > Keyframe (Shortcut = Ctrl+Alt+K). Create
keyframes at frames 20 and 30.

20. You will notice at each keyframe, a circle appears within the sprite in the Score as well as within
the path shown on the Stage. You can select a keyframe by either clicking on the keyframe circle in the
Score or double clicking the circle on the sprite path seen on the Stage. Select the keyframe at frame
10, and drag the circle up on the Stage. Do the same with keyframe 30, producing a path similar to that
shown below.

Rewind and play the movie.

Diagram showing animation path of ball, circles on path represent the keyframes.

Now would be a great time to save your movie as tut1.dir.

Prepared by: Mr. Basel Bani-Ismail Page (6)

Applied Studies College CSA 116: Digital Video and Audio
Macromedia Director MX 2004

You created an animation using Director's Tweening capability. Tweening is Director's term for 'in-
betweening' and allows you to define the sprite properties at keyframes with Director working out the
in-between steps for you. You can adjust the way Director tweens through the Sprite Tweening Dialog
Box.

1. Select the animated sprite by clicking anywhere between 2 keyframes.

2. Choose Modify > Sprite > Tweening. This opens a dialogue box as shown below.

The Sprite Tweening dialog indicates which properties are tweened as well as how the properties are
tweened. By default, the sprite settings allow for all properties to be tweened, including sprite size,
location, rotation, among a few. We will be looking at some of these sprite properties in later tutorials.

3. Click and drag the curvature slider to the extreme left. You will notice the path diagram in the top
left corner become more linear.

4. Drag the curvature slider to the extreme right and and observe how the path changes.

5. Click the Continuous at Endpoints checkbox and notice what happens.

6. Experiment with the various curvature options and play the movie to see how they affect the
animated path of the ball.

Next we'll look at the Ease-In and Ease-Out properties

1. Delete the animating ball and recreate the ball animating along a straight line.

2. Select the sprite and open the Sprite Tweening dialog.

3. Drag the Ease-in slider to 50%, then rewind and play the movie.

Prepared by: Mr. Basel Bani-Ismail Page (7)

Applied Studies College CSA 116: Digital Video and Audio
Macromedia Director MX 2004

The ball starts moving slowly and then speeds up. The animated path line seen on the Stage displays
keyframes as circles and Director's in between steps over each frame as dots. Normally, the dots will be
evenly spaced between keyframes. By choosing the Ease-in option, the dots are closer together at the
start of the sprite and more spread out towards the end.

4. Experiment with various Ease-In and Ease-out settings.

You can create animation using two other techniques - Step Recording and Real-Time Recording.

Step Recording is where you work out the new position/sprite property at each frame. By selecting the
sprite and choosing Control > Step Recording, you can step forward frame by frame using the Control
Panel. At each subsequent frame, a keyframe will automatically be created, allowing you to set new
sprite properties.

Real-time Recording allows you to record sprite movement when you drag it around the Stage.
Director will record the path in real-time, creating keyframes at appropriate locations. You can access
the Real-time recording capability through Control > Real-time Recording.

Prepared by: Mr. Basel Bani-Ismail Page (8)

Applied Studies College CSA 116: Digital Video and Audio
Macromedia Director MX 2004

TUTORIAL 2: ANIMATING SPRITE SIZE

THE SHRINKING BALL

1. Open tut1.dir.

2. In the Score, click on the end frame of the ball sprite and drag it to frame 60. Notice how all the
keyframes spread out proportionally. Click on each keyframe and move the ball so the path looks
something like the diagram below.

3. Change the size of each keyframe making the ball smaller as it moves along the path. Notice while
you resize the balls, the path changes and you will need to edit the path again.

Diagram showing path of shrinking ball, with the large, starting ball slightly off screen.

Rewind and play the movie.

Now would be a great time to save your movie as tut2.dir.

Prepared by: Mr. Basel Bani-Ismail Page (9)

Applied Studies College CSA 116: Digital Video and Audio
Macromedia Director MX 2004

TUTORIAL 3: MORE ANIMATED BALLS

Animating with the Property Inspector

The next series of tutorials animate other sprite properties.

The diagram to the left shows the Property Inspector. The
Property Inspector allows you to set properties for various
elements of your movie, including sprites, cast members and
even the movie itself.

The sprite properties can also be viewed as an extension to

the Score window, called the Sprite Toolbar. The Sprite
Toolbar can be turned on and off by selecting View > Sprite
Toolbar (while the Score is selected).

In Director MX 2004, sprites can have unique names. Sprite

channels can also have their own unique name, independent
of the sprite name.

The Moody Ball - Animating sprite colour

1. Open tut1.dir.

2. Open the Property Inspector through Window > Property Inspector. The property tab for the movie
will most likely be displayed. Click on Sprite to display the sprite tab as shown in the diagram above.

3. Click on the keyframes in the Score, and change the Foreground colour
chip to different colours. I chose white, then pale pink, then a light bluish green, then yellow, and that
worked well - feel free to experiment with any colours you like.

Changing the foreground colour is Director's way of putting a coloured film over your sprite. The
resulting colour is a mixture of the member's original colour and the 'film'. For this reason, light colours
work better than dark colours for this effect.

Rewind and play the movie.

Prepared by: Mr. Basel Bani-Ismail Page (10)

Applied Studies College CSA 116: Digital Video and Audio
Macromedia Director MX 2004

The Disappearing Ball - Animating sprite transparency

Open tut1.dir. Click on the keyframes in the Score, and in the

Property Inspector, change the Blend Transparency to 100, 75, 50, 25, 0 for the consecutive
keyframes. The Blend property is shown to the right of the Ink property and is displayed as a %, with
the default setting at 100%.

Rewind and play the movie.

The Deforming Ball - Animating sprite shape

Open tut1.dir. Click on the keyframes in the Score, and change the Skew Angle to 0, 20,
40, 60 and 80 for the consecutive keyframes.

Rewind and play the movie.

Prepared by: Mr. Basel Bani-Ismail Page (11)