Jonas Löwgren home page -- teaching material -- intro to director

Introduction to Director

-- lecture notes, October 25, 1999 --
 

Director from Macromedia started out as a multimedia tool for sales presentations. There are still a few traces of its origins, but by now it is best described as a multimedia programming environment. You can create mainstream-style productions with video, audio, image and text without writing code. Once you learn Director's programming language Lingo, you will find that it is a fairly powerful tool for developing interactive prototypes in general.

Director is also the current tool of choice in the multimedia industry. Lots of users means lots of third-party development. Xtras, i.e., plugins, for all purposes are available for free or sale.

This introduction covers the basic concepts and techniques. The goal is to enable you to create non-linear multiframe productions with rather straightforward user interaction. The section at the end provides a few pointers for your further learning.

The exercises below build upon each other. The goal is to create an interactive movie with two characters who behave in different ways that the user decides. My version is an Alien Relations Primer (requires Shockwave plugin).

The stage in Director is what the user of your product (movie) sees and interacts with.

When you develop your movie, there is a cast of all the "characters" that may appear on the stage. Members of the cast can be images, text pieces, sounds, video clips and so on.

The score is where you decide what goes on stage and when. It is like a table, where the columns are called frames and the rows are channels. When the user runs the product, the score is played one frame at a time. The red vertical line -- the playback head -- shows which frame is currently showing on the stage.

When a cast member is placed in the score (and on the stage), it is called a sprite.

Exercise 0: Get prepared.
Start Director. Identify the stage, the cast and the score (open the Cast window and the Score window from the Window menu if necessary).

Play with the Alien Relations Primer. Decide what your interactive movie is going to be about.

Exercise 1: One cast member, two sprites.
Create an image cast member in Director's paint tool (Window/Paint) or import a bitmap file (File/Import). Find it in the cast. Your first cast member!

Place it twice on the stage by dragging it from the cast. Look at the score. Note that it now contains two sprites.

Select one of the sprites, on the stage or in the score window. Change its size by scaling (Modify/Sprite/Properties). Note that the other sprite remains unaffected.

The top of the Score window contains many settings for sprite properties. Play around with them and find out what you can change.

When a Director movie is running, it communicates with the outside world through events. Most events come from the user: clicking on something with the mouse, typing on the keyboard, etc.

You put event handlers in your movie to decide what will happen when certain events occur.

When the user, for instance, clicks on a sprite, the sprite gets the first chance to react to the event (which, by the way, is called mouseDown). If the sprite has no mouseDown handler, the event is passed to the cast member of the sprite. No handler there either? Then the event is passed to the frame, and finally to the whole movie.

As you can see, event handlers can be put in (at least) four different places. This is one of the most common sources of confusion and error in Director programming.

Exercise 2: Catching events.
Identify the Message window. Open it if necessary (Window/Message). This is a place for communicating with running Director movies. We will use it here as a way for Director to tell us what is happening.

Select the Score window. Move the playback head to frame 1 if it is not already there. Double-click the frame script cell in frame 1.

The Script window opens. It already outlines a handler for the event exitFrame. Type the body of the handler to make it look like this:

on exitFrame
  go to the frame
end

This handler tells Director that when the movie runs and the playback head leaves frame 1 (thereby sending the event exitFrame) it should go back there again. We get a loop and the result is that frame 1 is showing the whole time.

Now type another handler in frame 1.

on mouseDown
  put "mouseDown in frame 1."
end

Whenever the running movie is in frame 1 (which is all the time, since we just made a loop to keep it there), and the user clicks the mouse button to generate the mouseDown event, this handler will take effect. It will print the text "mouseDown in frame 1." in the Message window.

Close the Script window, rewind the movie and play it (through the commands in the Control menu or the icons on the toolbar). Click around in the stage. Note that each click sends an event that is caught by our handler and acted upon (text in the Message window).

Stop the movie (Control/Stop or toolbar icon). Select your image cast member in the Cast window and then click it with the right mouse button. Select Cast member script... from the popup menu.

Ignore the mouseUp handler. Type a new handler for mouseDown, like this.

on mouseDown
  put "mouseDown on cast member 1."
end

Close the Script window, rewind and play. Click on the characters on stage, click next to them. Note that the cast member script grabs all mouseDown events it can; the rest are passed to the frame.

Stop the movie. Select the left one of the two characters on the stage. Click it with the right mouse button and select Script... from the popup menu. Type a new handler for mouseDown:

on mouseDown
  put "mouseDown on left sprite."
end

Close the Script window, rewind and play. Click on and off the two characters, note the different messages produced.

When a movie consists of more than one frame, the playback head moves through the frames as the movie runs. If a sprite is in one place in frame 12, then slightly to the left in frame 13, it will look like the sprite moves to the left. That is how I made the aliens bounce.

A very common structure is to give the user a set of choices on the screen. The movie will play different sequences depending on what choice the user makes. In Director, you would typically do this by having different sections of the score for each choice. In my case, the "love" animation sits in frames 3 through 39 in the score. "Hate" is from 40 to 77. And so on.

In the Alien Relations Primer, the first frame contains a loop (as above) and four clickable sprites. The "love" sprite, for instance, has a handler like this:

on mouseUp
  go to frame 3
end

Frame 3 is the start of an animated sequence where one alien changes color (using a sprite Ink effect) and then the other moves. The "love" section ends with a jump back to the user selection frame:

on exitFrame
  go to frame 1
end

Exercise 3. Making it interactive.
Create an interactive movie with two characters in the stage demonstrating different kinds of behavior.

Here is a suggested step-by-step approach to the task, which is considerably larger than the previous exercises.

3.1 Read the Animation section of Director's online help or paper manual. It will give you an idea of what you can do easily. Note in particular the support for Tweening, i.e., automated animation. The concept of keyframes is important.

3.2 Sketch on paper what you want to accomplish. Simple storyboards might work well.

3.3 Decide how you want to structure the score. Work on each of the different parts in turn. Hint: when the movie is stopped, you can drag the playback head in the Score window to see what the animation will look like.

3.4 Once you are happy with the parts, do the navigation. Put clickable sprites in the start frame and make them jump to the right sections. See examples above.

3.5 Use the online help, the manuals, your friends and the teachers as much as you need.

The Director Developers Center at Macromedia's own site is full of learning materials and tips for Director users. Very useful.

The Director Web is an information-rich voluntary effort. Good place to find examples. The FAQ is also good (but very ugly).

updateStage has a number of good how-to articles under Back issues in the Archive.

Jonas Löwgren home page -- teaching material -- intro to director