multimedia:

Basic Scripting in Director JavaScript - Navigation, Making things clickable, making buttons...

JavaScript is one of the scripting languages you can use in Director MX 2004. With JavaScript you can write little scripts and attach them to things. You can decide what causes the script to execute (to start up and do what it's supposed to do).

Commonly, scripts are attached to frames or to sprites (there are other places to put scripts, but they are beyond the scope of this explanation).

Attaching scripts to frames is useful for controlling (in some way) how the director movie plays. Remember, without scripting, the movie plays straight from the first frame through to the last frame. Scripts that are attached to frames are called frame scripts.

You attach a script to a frame by double-clicking in the desired frame in the scripting channel. The scripting channel is the channel right above the grey bar that numbers the frames in the score.

When you double-click on a frame in the scripting channel, a blank scripting window opens up. Often it will not be entirely blank, but will prompt you with the following (if JavaScript is the language chosen in the script window):

function exitFrame(me) {

}

An "exitFrame" is when the playback head leaves the current frame as it tries to play through the director movie.

"exitFrame" is the event that would have to happen to make the above script execute --- it triggers the script to run.

"exitFrame" means: when the director playback head reaches this frame and leaves it, then do whatever lines of script follow, up until the ending }

So you will notice that many frame scripts start with
function exitFrame(me) {
and end with
}

If we wanted to set up a director movie that waits for the user to click on a sprite before going on to the rest of the movie, we would put the following as a frame script in the frame we want director to wait on:

function exitFrame(me) {
    _movie.go(_movie.frame);
}

Now that we have director stuck in that frame, we can put one or more sprites in that frame to serve as buttons. We need to loop over this frame because that will allow the user time to click on one of the sprites serving as our buttons.

Even though it may look like Director is not playing while it is looping over the frame, you will notice that Director's play button for controlling the movie will still be down. The fact that Director is still playing while it is on one frame allows Director to detect when the user clicks on a sprite.

So now we have a sprite in the same frame as the script that is making Director loop. Now we want to attach a script to that sprite.

back to top

Attaching scripts to sprites is useful for making sprites clickable (making them into buttons) or for making them interactive in some other way.

There are several different ways to attach a script to a sprite, and some of these differ depending on which version of Director you have. Scripts attached to sprites are called sprite scripts. Here I link to a page showing how to attach scripts to sprites in Director MX 2004:

attaching a script to a sprite in Director MX 2004

function mouseUp(me) {

}

A "mouseUp" is when the user releases the mouse button after clicking.

In the above sprite script, "mouseUp" is the event that has to happen to make the script execute -- it is the event that triggers the script to run.

"mouseUp" means: when the user presses the mouse down and then releases it, then do whatever lines of script follow, up until the }

So you will notice that many sprite scripts start with
function mouseUp(me) {
and end with
}

To make our sprite clickable, we will use the following script, which will, when the user clicks on the sprite, jump the Director movie forward to frame 101 (in which, let's say, you are planning to start an animation of gorillas eating leaves):

function mouseUp(me) {
    _movie.go("bluemoon");
}

This is the basic idea behind navigation in Director: First you set up a loop over a frame (or over a short sequence of frames) which keeps the movie on that one frame or that sequence of frames, forcing the user to click on a sprite in order to get anywhere. Clicking on the sprite jumps the user somewhere else in the director movie, where the next thing you want the user to see is set up.

back to top

Using Markers:

The best way to send users to another place in the director movie is to jump to markers rather than to frame numbers.

In the score, immediately above all the white channels above the grey counting bar that are divided into frames is a channel that is totally blank and does not have the frame lines dividing it. This channel is the marker channel.

Markers are little triangular flags you can add to the channel and use to mark off starting points for different sections in a director movie.

To create a marker, you just click once in the marker channel above the frame you want the marker to be in. After you click, a little triangular marker will show up, and director will be ready for you to type in a name for the marker (always name your markers).
To get rid of a marker, just hold down on it with the mouse, and drag it up or down off the marker channel and release.
To move a marker, just hold down on it with the mouse, and drag it right or left and release it over the frame you wish.
To rename a marker, click once on it, and a little blinking cursor should show up and allow you to rename it by tying in a new name.

Using markers is usually preferable to using frame numbers because markers are easy to adjust and correct, while frame numbers are chained to the frame sequence, which is inconvenient if you delete or insert frames into the score. So instead of the script on the sprite sending the user to frame 101, it would be preferable to create a marker over frame 101, name the marker something, and then use the marker name in the script.

Assuming I named the marker over frame 101 "red", this is the script you would put on the button sprite to jump the user over to the animation (starting in frame 101) of gorillas eating leaves:

function mouseUp(me) {
    _movie.go("red");
}