10.12 Copying Movie Clip Event Handlers

10.12 Copying Movie Clip Event Handlers

Here's a quick point that has important ramifications : onClipEvent( ) and on( ) handlers are duplicated when a movie clip is duplicated via the duplicateMovieClip( ) function. However, event handler properties, such as onEnterFrame( ) , are not! Suppose, for example, we have a movie clip on stage named square , which has an onClipEvent(load) handler defined:

onClipEvent (load) {
  trace("movie loaded");
}

What happens when we duplicate square to create square2 ?

square.duplicateMovieClip("square2", 0);

Answer: Because the onClipEvent(load) handler is copied to square2 when we duplicate square , the birth of square2 causes its load handler to execute, which displays "movie loaded" in the Output window. By using this automatic retention of handlers, we can create slick recursive functions with very powerful results. For a demonstration, refer to MovieClip.onLoad( ) in the ActionScript Language Reference.

In contrast, suppose we have a movie clip named circle and we assign it an onEnterFrame( ) event handler property as follows :

circle.onEnterFrame = function ( ) {
  trace(this._name);
}

What happens when we duplicate circle to create circle2 ?

circle.duplicateMovieClip("circle2", 1);

Answer: Only circle 's name appears in the Output window. The onEnterFrame( ) event handler property is not copied to circle2 , so circle2 's name does not appear in the Output window. To force every duplicate of the circle clip to define an onEnterFrame( ) event handler property, we can set the property on a frame of circle 's timeline:

this.onEnterFrame = function ( ) {
  trace(this._name);
}

Even more eloquently, we can define circle as a MovieClip subclass, and define the onEnterFrame( ) handler on the circle constructor's prototype . There's much more to come on that topic in Chapter 14.

10.13 Refreshing the Screen with updateAfterEvent( )

The MovieClip event handler properties onMouseDown( ) , onMouseUp( ) , onMouseMove( ) , onKeyDown( ) , and onKeyUp( ) are executed immediately upon the occurrence of their corresponding events. Immediately means immediately —even if the event in question occurs between the rendering of frames .

This immediacy can give a movie great responsiveness, but that responsiveness can easily be lost by improper coding. By default, the visual effects of onMouseDown( ) , onMouseUp( ) , onMouseMove( ) , onKeyDown( ) , and onKeyUp( ) are not physically rendered by the Flash Player until the next available frame is rendered. To see this in action, create a single-frame movie with a frame rate of 1 frame per second. Place a movie clip named circle_mc on the Stage and attach the following code to frame 1 of the main timeline:

circle_mc.onMouseDown = function ( ) {
  this._x += 10;
}

Then, test the movie and click the mouse as fast as you can. You'll see that all your clicks are registered, but the movie clip still moves only once per second. So, if you click 6 times between frames, the clip will move 60 pixels to the right when the next frame is rendered. If you click 3 times, the clip will move 30 pixels. The cumulative effect of each execution of the onMouseDown( ) event is " remembered " between frames, but the results are displayed only when each frame is rendered. This can have dramatic effects on certain forms of interactivity.

Fortunately, we can force Flash to immediately render any visual change that takes place during a user -input event handler, without waiting for the next frame to come around. We simply use the updateAfterEvent( ) function from inside our event handler, like this:

circle_mc.onMouseDown = function ( ) {
  this._x += 10;
  updateAfterEvent( );
}

The updateAfterEvent( ) function is available for use only with the onMouseDown( ) , onMouseUp( ) , onMouseMove( ) , onKeyDown( ) , and onKeyUp( ) MovieClip events and the setInterval( ) function. It is often essential for smooth and responsive visual behavior associated with user input. Later, in Example 10-3, we'll use updateAfterEvent( ) to ensure the smooth rendering of a custom pointer. Note, however, that button events do not require an explicit updateAfterEvent( ) function call. Button events update the Stage automatically between frames.

The onMouseDown( ) , onMouseMove( ) , and onMouseUp( ) listeners were added to the Mouse object in Flash Player 6. Likewise, the onKeyDown( ) and onKeyUp( ) listeners were added to the Key object. Generally, these Mouse and Key listeners are preferred over the analogous MovieClip events. However, in Flash Player 6, the updateAfterEvent( ) function can be used only in MovieClip events. Hence, when a screen refresh is required between frames, the MovieClip event handlers must be used. Future versions of the Player will likely include support for updateAfterEvent( ) from Mouse and Key listeners.