• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Introducing Interactivity > Introducing nonlinear interactivity

Introducing nonlinear interactivity

In our movie, a lot is happening on the Stage—but the playback head isn't going anywhere. In the last chapter's experiments, it didn't get around much either; it moved, but only to start at frame 1 and plow through until it reached the end. Our next few forays into behaviors will aim to boss around that playback head, to make it leap from one location in the Score to another.

Departing from the monorail track of the Score is one of the best ways to introduce true interactivity into your productions. A typical way to do this in Director is to have separate areas of the Score, each encapsulating a different function or element of a movie. Then build centralized areas (such as a Main Menu screen) that let the user decide where to go next. The user makes a choice, and the playback head goes dancing off to that particular segment.

Ready to give it a try? We're going to approach this by having three distinct locations in the Score:

  • A segment where nothing happens to the sprite

  • A segment where the sprite is draggable

  • A segment where the sprite turns to follow the mouse

Setting up

To begin, let's leave our sprite in the Score but detach the behaviors we attached to it earlier.

  1. In the Behavior pop-up menu (next to the Behavior Inspector button), choose Clear All Behaviors.

Choosing Clear All Behaviors removes all behaviors currently attached to a sprite or sprite segment. This isn't strictly necessary for what we're going to do, but it will make the following steps a bit more streamlined.

Clearing out:

Choose Clear All Behaviors to stream line your sprite.

Figure .

It's also a good habit to get into, because too many extraneous behaviors can make your movies harder to debug if something goes awry. Notice that when we detached (cleared) the behaviors from the sprite, we did not automatically delete them from the Cast.

  1. Click frame 1 of the marker channel to create a new marker; name it Neither.

  2. Add a marker at frame 10 named Followand a marker at frame 20 named Drag.


Since we're using only a single frame for each section of our movie, we could easily place the sections in frames 1, 2, and 3 of the Score. Why not do that? For readability's sake, that's why.

Although you might think that you'll remember everything about your movie, trust me: Once you set it aside for a while and come back to it (days or weeks later), you'll find the familiarity has evaporated, leaving you disoriented in your own Score. Separating disparate sections with empty spaces will make the movie easier to understand—both for you and for anyone else who needs to work with your movie. If that's not enough reason for you, do it simply because the extra space allows the marker labels to be visible and readable.

  1. In the Score, use the Shift-click technique to select and copy both the behavior in the behavior channel and the eight ball sprite together.

  2. Click the behavior channel in frame 10 and paste. Do this again at frame 20.

We now have three distinct sprite segments, each with an eight ball that does nothing, a marker, and a frame behavior that will hold the playback head at that frame (if it ever gets there). Your Score should look like this:

Making distinctions:

After selecting and pasting the behavior and sprite, you'll have created three distinct sprite segments in the Score.

Figure .

  1. From the Cast, drag the Turn Towards Mouse behavior onto the eight ball sprite at frame 10 of the Score. Set the parameters as we did before or in a manner of your choosing.

  2. Drag the Draggable behavior from the Cast to the sprite in frame 20.

Now we're set. The eight ball sprite at frame 10 will follow the mouse, and at frame 20 it will be draggable. All we need is a way to get from the place where the sprite does nothing to a place where the sprite does something.

Building the buttons

OK; so we have some interactive behaviors attached to our sprites and a behavior in the behavior channel that prevents the playback head from moving. Now we need another interactive element (a button) that overrides that limiting behavior.

The physical button

We have to make a home for any behaviors that we'll use to navigate around our movie. We'll do that by creating buttons (Cast members) and then attaching behaviors to them. Anything that can appear as a sprite on the Stage can be a button: graphics, text, vector shapes, or whatever. What makes a sprite a button is the behavior attached to it—if a sprite does something when the user clicks it, then it's a button. For this experiment, we'll use the Button tool from the Tool Palette, but the same rules would apply if you were using an image you created with the Paint window.

  1. Select frame 1, channel 3, of the Score. That's an unused cell.


Just as we made the markers more readable by leaving some frames open, it's a good idea to group similar sprites together and leave open channels between them. This makes the Score much easier to decipher—which is especially useful now that Director allows up to 1,000 channels.

  1. Open the Tool Palette and select the Button tool.

  2. Use the Button tool to draw a box in the lower-left corner of the Stage.

A cursor appears, flashing in the middle of the button box.

  1. Type Draggable inside the button.

Director automatically places the new sprite in the cell you selected. A new Cast member is also placed in the Cast window, with a button icon.

  1. Use the handles on the button's selection border to resize the box to suit your taste.

Time out now for a little test: Rewind and play the movie; then click the button. You'll find that while something happens (the button's color inverts when the button is selected), the button doesn't yet live up to its name. That's because we haven't told it what to do—we haven't attached a behavior to tell the button what job we want done.

The Jump to Marker behavior

Now that we have the button Cast member and sprite, the next step is to add a behavior. We'll use another behavior from the Library Palette for this. Since we want the button to jump us to a new location in the movie, we will use the Jump to Marker Button behavior.

  1. On the Library Palette, click the Library List button to view the Controls group of behaviors.

  2. Find the Jump to Marker Button behavior and drag it onto the button sprite on the Stage.


You can drag a behavior onto a sprite on the Stage as well as onto a sprite in the Score.

A Parameters dialog box appears. The first parameter is On mouseUp, Jump to Marker. This parameter tells us that the action will take place when the mouse button is released on the sprite. We don't have any choice about whether the action takes place on a mouseUp or mouseDown event, but we can set the destination for the jump. In the pop-up list for that parameter, you should see several choices, including all markers currently used in the Score.

Jump to drag:

In the pop-up list, you can tell the button to jump to the Drag marker when the mouse button is released.

Figure .

  1. In the pop-up list for On mouseUp, Jump to Marker, select Drag. That's the marker we want to go to with this button.

  2. For Jump Mode, select Go To.

  3. Make sure that Remember Current Marker for Back Button? is not checked.

Time for another test. Play the movie and click the Draggable button. The playback head should jump to frame 20 and stay there, and the eight ball should be draggable. Too bad we're stuck there. But we can fix that by adding some more buttons. First, stop the movie.


If you're like me, you have so many windows open all of the time you can hardly see the Stage, and opening and closing them to test your movie can be a time consuming process. The Enter key on the numeric keypad provides a quick and easy shortcut. Enter by itself runs the movie, but Shift+Enter clears the screen and displays just the running movie. Press Enter again, and the movie stops and all your windows are back.

Copying and modifying the button

We have a Draggable button; now we need a Follow button and a Neither button. We could go back to the Tool Palette and draw another couple of buttons, but it's a good idea to make both new buttons the same size and shape, and the best way to guarantee that is by copying the original.

  1. Select the Draggable button's slot in the Cast window.

  2. Copy the button.

  3. Select a vacant slot in the Cast.

  4. Paste the button.

  5. Double-click the new Cast member.

A Text window appears where you can change the button's text. Notice that its column width is set to the width of the button. If you change this width, you'll automatically reconfigure the button as well.

  1. Change the text inside the new button from Draggable to Follow the Mouse.

  2. Repeat steps 3 through 6 to create a third button; call this button Neither.

  3. Click frame 1, channel 4, of the Score. Drag the two new buttons to the Stage so they align vertically with the original Draggable button already there.

That takes care of the buttons'appearance. The buttons should be in channels 4 and 5 in frame 1 of the Score. Now we will add behaviors to the new buttons.

  1. Drag the Jump to Marker behavior from the Cast window to the Follow the Mouse button.

That's right; we can drag the same behavior to a different sprite. A Parameters dialog box appears, and we can set parameters for this sprite that won't affect the parameters set for the other button. Director remembers the set of parameters for each use of a behavior.

  1. Set the parameters: Set the behavior to jump to the Follow marker, set Jump Mode to Go To, and make sure Remember Current Marker for Back Button? is not checked. Then click OK.

  2. Drag the Jump to Marker behavior to the Neither button and set the parameters similarly, except make this button jump to the Neither marker when it's clicked.

Now we've placed three buttons in frame 1. Clicking them will get us to the other sprite segments in the movie, but we still need to be able to change locations from those segments.

  1. Copy the three button sprite segments in the Score and paste them in frames 10 and 20.

This gives us identical buttons in all three sprite segments.

Figure .

Now play the movie. You should be able to jump to any of the three sprite segments by clicking a button from any one of them. Of course, a user wouldn't know anything about there being three segments; that's all invisible to the user, to whom it would simply appear that clicking a button makes the eight ball draggable or makes it turn to follow the mouse.

We could still do a lot with our FollowTheMouse movie to make it fancier: We could add titles for each location or maybe add instructions. But let's move on and apply some of these techniques to the Rolling.dir movie we created in the previous chapter. While we're at it, we can expand our techniques to use Lingo as well as behaviors.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint