Lesson 5 … Objects can be used to simplify the organization, handling and manipulation of data. In SWiSH Max2 and miniMax2,  shapes, text and movie clips can all be treated as objects for the purposes of scripting.  This allows a variety of dynamic effects to be applied to your movie that change not just according to time, but due to user input. It also allows things such as games to be created.

The example below shows a bouncing ball. The bounce is created using scripting. As the ball hits each wall, the new direction is re-calculated by the script and applied to the movie clip on a frame by frame basis.

Any object in the Max2 or miniMax Outline panel can be treated as an object for scripting purposes. The object must have a unique name and the Target checkbox (in the Properties panel) must be checked.

In the example to the right, the shape s1, is a scripting object.

An object is an item that contains data and behaves in a defined way.
An object may have one or more of the following:
Properties - data that the object contains. This data can affect the way the object behaves.
Methods - predefined ways in which the data can be manipulated.
Events - allow actions to be defined that control how the object behaves during certain conditions / events

Objects that have the same Properties, Methods and Events are considered as belonging to the same Class. Objects of the same Class behave in the same way.

Within the Scripting Language, a number of pre-defined objects/Classes exist. These include Button, Color, Date, Key, Math, Mouse, MovieClip, Sound, Stage, String, TextField and TextFormat. More information about these specific objects can be found in the Max2 and miniMax help files.

When referring to properties and methods within an Object, the dot ‘.’ character is used to delineate the object name and the contained property, method or event. The ‘.’ character is also used to delineate ‘child’ objects that are contained within a parent object. The pseudonyms this, _parent and _root can be used to refer to the current object, the parent object and the “top level” or parent of all objects, object.

In the example above, the object s1._x represents the x or horizontal position of the shape and s1._y represents the _y or vertical position of the shape. These could also be referred to as this.s1._x, _root.s1._x, this.s1._y or  _root.s1._y A value of x=0, y=0 corresponds to the top left hand corner.

Movie Clips can contain other Movie clips or objects.  The Outline panel to the right shows a movie clip named “SomeShapes” that contains two shape objects, s1 and s2. The position of the movie clip can be altered using scripting by setting SomeShapes._x and SomeShapes._y. Alternatively, the positions of s1 and s2 within the movie clip can be altered by setting SomeShapes.s1._x and SomeShapes.s1._y to move s1, and SomeShapes.s2._x and SomeShapes.s2._y tomove s2. It is possible to reference the position of s2 from within s1 using _parent.s2._x and _parent.s2._y

Note:
· Flash players 4, 5 and 6 have case insensitive variable names. eg. MyVariable and myvariable are the same variable.
· Flash players 7, 8 and 9 have case sensitive variable names, but case insensitive properties. eg. MyVariable and myvariable are different variables but MyVariable._x and MyVariable._X represent the same property.

Movie clip, button, text and shape objects have the following common properties:

A text field object also has the following additional properties: maxscroll, scroll and text.
All of the above properties as well as additional, object specific properties, are discussed in detail in the help manual.

The Movie Clip object also contains the following methods:

• play() – Start the movie clip playing
• stop() – Stop the movie clip from playing
• duplicateMovieClip() – Duplicate the current movie clip
• gotoAndPlay() – Goto a specific frame or label and continue playing

These methods are also described in more detail within the help file, however the above description should be sufficient to show that in the example above, SomeShapes.stop() would cause the SomeShapes movie clip to stop playing.

A Movie Clip (and shape) support a number of different events:

• onFrame (n) – Perform some action when the frame n is played.
• onSelfEvent (load) – Perform some action when the movie clip / shape is loaded.
• onSelfEvent (enterFrame) – Perform some action on each frame. Use this event with caution as it can severely load the flash player if over used. Note that this event occurs even if the movie clip is not playing.
• onSelfEvent (mouseEvent) – Perform some action according to a mouse event such as mouse over, mouse off, button press etc.

Again, all of these events are discussed in more detail in the help file, but this provides a useful introduction.

The object tree shown to the left is from the bouncing ball demonstration. The objects: ball, max_logo_shape and border are all referenced by the the script. Consequently, each of those objects has their target checkbox set. (Note that Movie clips, eg. ball, are assumed to have their target checkbox enabled.)

When viewing the objects in the Script panel (Actions panel for miniMax) the script tree is optionally shown in the left hand panel. This is depicted in the diagram to the right. The script tree shows at a glance which objects have associated script.

The script tree shows each of the objects according to its hierarchy. As the ball object contains script, it is shown in bold. In this specific example none of the other objects contiain script, although this is not always the case.

As can be seen from the Script Outline panel, the ball object contains Events for onSelfEvent (load), onSelfEvent (enterFrame), onSelfEvent(press) and on SelfEvent (release).

It also contains a function called NewPosition(). Note that this function can be called by other objects as a method. eg. If bounce wanted to update the ball positon, it could call the method ball.NewPosition().

The script for the ball is shown below:

onSelfEvent (load) {
    // generate random speed.
    // dx is amount we move in x direction each frame
    // dy is amount we move in y direction each frame
    dx = Math.randomInt(5)+1;
    dy = Math.randomInt(5)+1;
    drot = 2;    // rotation speed, degrees per frame

    // calculate the boundaries based on the border shape and the size and width of this object.
    // note that as this is this object, _width is the same as this._width etc.
    // this assumes that both border and containing movie clip both have reference and transform points
    // set to top left hand corner.
    xMin = _width / 2;
    xMax = _parent.border._width - _width / 2;
    yMin = _height / 2;
    yMax = _parent.border._height - _height / 2;

    isPressed = false;
    framecount = 0;
}

function NewPosition() {
    // move to new position
    _x += dx;
    _y += dy;
    max_logo_shape._rotation += drot;

    // see if collided with RHS
    if (_x > xMax) {
        dx = -dx;    // reverse x direction
        _x = xMax; // move to RHS
        if (dy > 0) {
            // moving down, force anti clockwise
            drot = -Math.abs(drot);
        } else {
            // moving up, force clockwise
            drot = Math.abs(drot);
        }
    }

    // see if collided with LHS
    if (_x < xMin) {
        dx = -dx;
        _x = xMin; // move to LHS
        if (dy > 0) {
            // moving down, force clockwise
            drot = Math.abs(drot);
        } else {
            // moving up, force anti clockwise
            drot = -Math.abs(drot);
        }
    }

    // see if collided with Top
    if (_y < yMin) {
        dy = -dy;    // reverse y direction
        _y = yMin;
        if (dx > 0) {
            // moving right, force anti clockwise
            drot = - Math.abs(drot);
        } else {
            // moving left, force clockwise
            drot = Math.abs(drot);
        }
    }

    // see if collided with Bottom
    if (_y > yMax) {
        dy = -dy;
        _y = yMax;
        if (dx > 0) {
            // moving right, force clockwise
            drot = Math.abs(drot);
        } else {
            // moving left, force anti clockwise
            drot = -Math.abs(drot);
        }
    }
}

onSelfEvent (enterFrame) {
    if (isPressed) {
        // count the number of frames while pressed.
        framecount++;
    } else {
        NewPosition();
    }
} 

onSelfEvent (press) {
    trace("press");
    X0 = _x;    // save the current x position
    Y0 = _y;    // save the current y position
    isPressed = true;    // process press event.
    framecount = 1;
    this.startDrag(false);    // drag the ball with the mouse.
}
onSelfEvent (release) {
    trace("release");
    isPressed = false;
    // calculate new dx and dy based on release position - press position.
    // framecount is used to calculate the average speed.
    dx = (_x - X0)/framecount;
    dy = (_y - Y0)/framecount;
    stopDrag(); // stop dragging the ball.
}

Script Description

onSelfEvent (load)

As mentioned previously, this event occurs when the object is loaded. In this case it is used to initialise variables and assign an initial speed (dx and dy) to the ball.

dx is the number of pixels the ball moves to the right each frame (- indicates movement to the left).
dy is the number of pixels the ball moves to down each frame (- indicates movement up).

function NewPosition()

This function moves the current _x position by dx and the current _y position by dy.

Note that
_x+=dx;
is equivalent to
_x=_x+dx;

The logo within the ball is also rotated: max_logo_shape._rotation += drot;
Note that only the logo is rotated as I wanted to leave the reflection in the same position (top left hand corner).

The function also checks to see if the ball has moved past any of the boundaries. If it has, then the direction is reversed (dx = -dx or dy = -dy), the direction of rotation is updated depending on the direction along the other axis.

The border calculations assume that the border and the containing movie clip both have their reference and transform points set to top left hand corner. The reference and transform points are discussed in more detail in the help file.

onSelfEvent (enterFrame)

This event is called on each frame. If the left mouse button is currently pressed, the variable framenumber is incremented. This variable is used to record the number of frames between the initial left mouse button press and the left button mouse release.

If the left mouse button has not been pressed, the ball is moved to the new position by calling the function NewPosition().

onSelfEvent (press)

When this event occurs, the current _x and _y position is saved to X0 and Y0. The variable isPressed is set to true so that the press status is recorded. The method, this.startDrag(false) allows the current Movie clip to be dragged.Note that this is a pseudonym for the current object. _parent can be used as a pseudonym for the parent or container movie clip and _root can be used as a pseudonym for the top level movie.

onSelfEvent (release)

When this event occurs, the isPressed variable is set to false to reflect the new status. The new speed (dx and dy) is then calculated based on the current position (_x,_y) – the original position (X0, Y0) averaged over the number of frames (framecount) between the left mouse button press and the left mouse button release. The event also releases the Movie clip from dragging via the stopDrag() method.

That’s it for this lesson. If you find this lesson series useful, or if there are particular topics you’d like us to cover, please leave a comment.

Finally, the demonstration movie at the top can be downloaded here - bouncedemo.zip.

Tags: Max2, miniMax2, scripting, tutorial

This entry was posted on Tuesday, December 16th, 2008 at 2:59 pm and is filed under Max2, miniMax2, scripting, tutorials. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.