You may have heard that Flash MX has a "new event model." What does this mean? This tutorial will show you how Flash 5 events can be handled in new ways in Flash MX. The new event model allows you to create scripted animation much more easily, using clean, object-oriented code. This new style is similar to handlers in JavaScript and Java, and is virtually the same as in FLEM. If you have invested time learning event handlers in any of these systems, your knowledge will transfer over well. In any case, I think you'll find that the new MX event model makes more sense than in Flash 5, and has many practical advantages.

Movie Clip Events in Flash 5

Let's start with a quick review of the event model as it was before MX. Flash 5 gives us these movie clip events:

• enterFrame
• load
• unload
• mouseDown
• mouseUp
• mouseMove
• keyDown
• keyUp
• data

These movie clip events are accessed by defining clip event handlers. The onClipEvent handler is placed on a movie clip instance, and this is the general syntax:

onClipEvent (event) {
    // code
}

Button Events in Flash 5

Flash 5 has events for buttons as well:

• press
• release
• releaseOutside
• rollOver
• rollOut
• dragOver
• dragOut
• keyPress

Button events have their own event handlers, which are similar to those for movie clips. This is the general syntax for button event handlers:

on (event) {
    // code
}

The main drawback with event handlers in Flash 5 is that you have to stick them on the outside of a symbol instance. This gives rise to several problems:

• you can't access onClipEvent handlers inside the movie clip in question
• you can't directly change or disable the event handlers once the movie is running
• you can't attach a movie clip from the library with attachMovie(), and then assign onClipEvent handlers to it

There are various workarounds for these issues, often involving empty movie clips inside other ones, but they can be cumbersome. Thankfully, Flash MX has a new event model that allows us to work with events much more easily, and in an object-oriented fashion.

Flash MX's Event Model

In Flash MX, an event handler is simply a property of the movie clip or button. For example, the enterFrame handler for a movie clip mc is mc.onEnterFrame. You can create a frame loop for mc simply by assigning a function to mc.onEnterFrame. The new event handlers are all functions.

Suppose you have a movie clip named ball, that you want to spin with ActionScript. In Flash 5, you would put this code on the outside of ball:

// code on "ball" instance
onClipEvent (enterFrame) {
    this._rotation += 5;
}

This script causes the movie clip's rotation to increase by five degrees every frame. Notice that you can't stop the frame loop from inside the movie clip. Once spinning, always spinning.

In Flash MX's new event model, you can put the code inside the symbol itself. This is how you would do the same thing as above:

// code inside "ball" symbol
this.onEnterFrame = function () {
    this._rotation += 5;
};

The advantage of this approach is that you can change this.onEnterFrame at any time. If you want the ball to spin the other way, you can change the event handler to a new function:

this.onEnterFrame = function () {
    this._rotation -= 5;
};

To stop the frame loop altogether, simply set this.onEnterFrame to undefined:

this.onEnterFrame = undefined;

Button and Movie Clip Events in Flash MX

In MX, buttons are now true objects, similar to movie clips in many respects. All buttons created at author-time become instances of the Button class at run-time. Here is the complete list of event handlers for buttons:

• Button.onDragOut
• Button.onDragOver
• Button.onKeyDown
• Button.onKeyUp
• Button.onKillFocus
• Button.onPress
• Button.onRelease
• Button.onReleaseOutside
• Button.onRollOut
• Button.onRollOver
• Button.onSetFocus

All the standard button events are covered, as well as new handlers for focus--onSetFocus and onKillFocus. See the ActionScript Dictionary for more details.

Here is the complete list of movie clip event handlers:

• MovieClip.onData
• MovieClip.onDragOut
• MovieClip.onDragOver
• MovieClip.onEnterFrame
• MovieClip.onKeyDown
• MovieClip.onKeyUp
• MovieClip.onKillFocus
• MovieClip.onLoad
• MovieClip.onMouseDown
• MovieClip.onMouseMove
• MovieClip.onMouseUp
• MovieClip.onPress
• MovieClip.onRelease
• MovieClip.onReleaseOutside
• MovieClip.onRollOut
• MovieClip.onRollOver
• MovieClip.onSetFocus
• MovieClip.onUnload

Notice that movie clips can now receive button events like onPress and onRollOver. This means you no longer have to use hitTest() with the mouseDown event to determine if a particular movie clip was pressed (yay!).

Example: MX Glide

The movie below, MX Glide, is a simple example of how to use the new event handlers in Flash MX. I used several movie clip events (enterFrame, mouseDown, mouseUp) as well as some button events (onPress, onRelease, onRollOver). Interact with the ball using the mouse in different ways, and notice how each event creates a different response:

Here is the code inside the ball movie clip that creates the animation and interaction:

function glideToMouse () {
   _x += (_parent._xmouse - _x) * .2;
   _y += (_parent._ymouse - _y) * .2;
}

this.onMouseDown = function () {
   this.onEnterFrame = this.glideToMouse;
}

this.onMouseUp = function () {
   this.onEnterFrame = null;
}

this.onRollOver = function () {
    this._rotation += 30;
};

this.onPress = function () {
    this._xscale = this._yscale = 120;
};

this.onRelease = function () {
    this._xscale = this._yscale = 100;
};

this.onReleaseOutside = this.onRelease;

MX Glide is an extension of the FLEM Glide example I used in the tutorial Introduction to FLEM: System Events. I recommend reading that tutorial in conjunction with this one.

The first three functions above (glideToMouse(), onMouseDown(), and onMouseUp()) are the same as in FLEM Glide. The second and third functions are event handlers for the movie clip events mouseUp and mouseDown. The difference between the code for the FLEM example and this one is that we don't need these two commands:

MovieClip.addFLEMListener (this);
Mouse.addFLEMListener (this);

These addFLEMListener() commands activate MX-style event handlers for Flash 5 movies. But in MX, the event handlers are called automatically, so we don't need to use addFLEMListener() here.

In MX Glide, I added four more event handlers, for the button events onRollOver, onPress, onRelease, and onReleaseOutside. I kept the commands in each event handler quite simple:

• the onRollOver handler rotates the movie clip by 30 degrees
• the onPress handler scales the movie clip to 120%
• the onRelease handler returns the movie clip to 100% scale
• the onReleaseOutside handler is set to the onRelease handler

Try playing around with the event handlers in the example FLA, using your own code to create different interactions. For example, you could try making the ball fade out on roll over, and fade back in on roll out. Or for an extra challenge, you could define several different behavior functions, similar to glideToMouse(), and randomly assign them to onEnterFrame each time the mouse is pressed.

In Flash MX, the choice is yours--you can use either of the old-school or new approaches to handling events. The Flash 5 onClipEvent and on event handlers are still available, and they aren't deprecated. There are some situations where the old handlers are still necessary--onClipEvent (load), in particular. However, the new event model has so many advantages that I would recommend using it as much as possible. After a while, you will probably find that your movie clips are more self-contained and your code is more object-oriented as you use the new event handlers.