Custom Classes in Director

Custom Classes in JavaScript

Creating objects in Director – an overview

Director, using Javascript, has a prototype-based OOP system which is slightly different to that used by ActionScript and Java. It does not use the class keyword to define object templates, but creates then as subclasses of the function object type (note that Director can create class files, called parent scripts, if you are using the Lingo scripting language).

In Director using Javascript, an object (instance) is created from a function definition contained in a movie script through the use of the new keyword: -

myObject = new MyCustomFunction();

In Javascript, a class can contain 3 things: -

Variables or properties which hold each instance’s data.
Code which initialises the instance.
Functions or methods which allow each instance to do things.

Because there is no explicit constructor function (as there are in ActionScript or Java class definitions), any code that is not inside a function definition (e.g. the showGreeting() function in the above example) will be executed when an instance is first created.

To use this class, we make a new instance, sending it the greeting we wish it to have, and then get it to display that greeting by calling its showGreeting() function: -

// make new instance var myGreeter = new Greeter(“Hello World!”); // get it to display greeting myGreeter.showGreeting();

Example 1 – Following the mouse – a Timer object

In this example, we will make a simple timer object which can cause things to happen at a regular interval. We will use this to move a sprite towards the current mouse position. Since we will only move it part of the way on each update, it will appear to ‘follow’ the mouse, changing direction and speed as it moves.

Make a new Director movie.

In the paint window, create a simple ball shape (which we will make follow your mouse around).

Drag your new cast member onto the stage to make a sprite in channel 1.

Click on the script editor icon to open the script editor.

Make sure the script's type is movie.

Carefully type the following (remove the word line breaks): -

// the Timer function definition function Timer(interval, target){ // --- properties and initialisation --- this.target = target; // the object to notify of a result (should have an update() function) this.interval = interval; // the the timer interval(milliseconds) this.timer = undefined; // this object's timer // --- function definitions --- // starts the timer going this.startTimer = function() { this.timer = new timeout("timer_"+this.target.toString(),this.interval, symbol("checkTask"), this); } // stops the timer this.stopTimer = function(){ this.myTimer.forget(); } // function that is called this.checkTask = function(){ this.target.update(); } }

Name your script Timer class.

Right-click the ball sprite on the stage or in the score and select Script… from the pop-up menu.
Type the following: -

var myTimer; function beginSprite(){ // make a new timer when sprite is first drawn // make it check 30 times a second myTimer = new Timer(33,this); // start the timer going myTimer.startTimer(); } function update(){ // find how far away the mouse is var xdif = _mouse.mouseH - sprite(this.spriteNum).locH; var ydif = _mouse.mouseV - sprite(this.spriteNum).locV; // move ball a tenth of the way toward mouse sprite(this.spriteNum).locH += (xdif/10.0); sprite(this.spriteNum).locV += (ydif/10.0); }

Check your code syntax and close the script window. Your movie is finished.

Further developments

Fading in a sprite
Try editing the update function so that instead of moving the ball, when the mouse goes over the ball, the timer is started and the update function gradually increases the blend property of the ball sprite - and then stops the timer (by calling the stopTimer() function) when it reaches 100.

Fading out when the mouse leaves
Try amending your fade-in example so that when the mouse leaves the ball, it is faded out again.

Changing the size of a sprite
A common Flash effect is for the instance to grow when the mouse goes over it and then shrink back when the mouse leaves. This is slightly more difficult in director since sprites do not have a built-in scale property. However, you can give them one! See if you can do this (declare a scale variable in the sprite’s behavior script and add code to calculate its value from the ratios of width and height of the sprite and cast member) and then get the timer to cause the sprite to grow and shrink depending on where the mouse is.

This is particularly effective when a (large) number of shapes are on stage. In Director, you can simply drop your sprite behavior script onto lots of sprites to give them the functionality (no need for more scripting as in Flash).

This page was last updated on 16th January 2009