10.6.1. Attaching Event Handlers to Buttons and Movie Clips

Figure 10-1. Attaching an event handler to a button

Let's try making a simple event handler function for both a button and a movie clip. To create a button event handler, follow these instructions:

1. Start a new Flash movie.

2. Create a button and drag an instance of it onto the main Stage.

3. With the button selected, type the following code in the Actions panel:

   on (release) {
     trace("You clicked the button");
   }

4. Select Control Test Movie.

5. Click the button. The message, "You clicked the button," appears in the Output window.

When the movie plays and we press and release the button, the release event is detected by the interpreter and it executes the on (release) event handler. Each time that we press and release the button, the message, "You clicked the button," appears in the Output window.

Now let's try making a slightly more interesting event handler on a movie clip. Once again, follow the instructions:

1. Start a new Flash movie.

2. On the main movie Stage, draw a rectangle.

3. Select Insert Convert to Symbol.

4. In the Symbol Properties dialog box, name the new symbol rectangle and select Movie Clip as the Behavior.

5. Click OK to finish creating the rectangle movie clip.

6. Select the rectangle clip on stage, and then type the following in the Actions panel:

   onClipEvent (keyDown) {
     _visible = 0;
   }
   
   onClipEvent (keyUp) {
     _visible = 1;
   }

7. Select Control Test Movie.

8. Click the movie to make sure it has keyboard focus, then press and hold any key. Each time you depress a key, the rectangle movie clip disappears. Each time you release the depressed key, rectangle reappears.

Notice that we don't manually issue any handler-invocation statements -- the interpreter automatically invokes our event handler when the corresponding event occurs.

Flash doesn't support attaching and removing handlers via ActionScript while the movie is playing. Event handlers must be assigned to buttons and movie clips using the Flash authoring tool. The following imaginary syntax, therefore, is not legal:

myClip.onKeyDown = function ( ) { _visible = 0; };

10.6.2. Attaching Event Handlers to Other Objects

For the XML and XMLsocket objects, ActionScript uses predefined properties to hold the name of the event handlers. For example, the onLoad property holds the name of the handler to be executed when external XML data has loaded.

To set the onLoad property for an XML object, we use the following code:

myDoc = new XML( );
myDoc.onLoad = function ( ) { trace("all done loading!"); };

Alternatively, we can define the handler function first, and then assign it to the onLoad property of our object:

function doneMsg ( ) {
  trace("all done loading!");
}
myDoc.onLoad = doneMsg;

In the future, more ActionScript objects may support assigning event handlers using object properties, so it's a good idea to get used to this style now. If you're not using the XML or XMLSocket objects, you can still practice making handlers in this way with HTML documents and JavaScript. The beauty of this approach is its flexibility; any event handler function may be easily reassigned or even removed during movie playback.