The Behavior of Events

ActionScript 3 events is a huge topic. In this How-To we illustrate a few less known but very important facts about mouse events. Among others, we demonstrate the difference between MOUSE_OVER and MOUSE_OUT versus ROLL_OVER and ROLL_OUT. We show the Flash Player level event Event.MOUSE_LEAVE in action, and examine MOUSE_UP when the cursor is outside of the display area. Click on the image below to open the applet in a new window.

Download

Download the well-commented source file corresponding to the applet above, events.fla.

Comments and Code

Below is the code for the Flash movie presented here and comments regarding the behavior of events.

We placed on the Stage a TextField, txtOutput, and an instance of the Flash's UIScrollBar component, verScrollBar. txtOutput is a dynamic text field. We set its mouseEnabled property to false so the cursor wouldn't change to the beam when the user mouses over the text field.

txtOutput.mouseEnabled=false;

We created on the Stage, stored in the Library, and linked to AS3 the MovieClips: BigBoard, BlueChild, and RedChild. (They could be Sprites or MovieClips created programmatically. It wouldn't affect the way events are dispatched.) We create instances, board, blueChild and redChild of those clips at runtime. board is a child of 'this' - the MainTimeline, blueChild is a child of board, redChild is a child of blueChild.

var board:MovieClip = new BigBoard();

this.addChild(board);

board.x = 330;

board.y = 48;

var blueChild:MovieClip=new BlueChild();

board.addChild(blueChild);

blueChild.x=40;

blueChild.y=90;

var redChild:MovieClip=new RedChild();

blueChild.addChild(redChild);

redChild.x=-60;

redChild.y=70;

We add event listeners to our objects. board listens to MOUSE_OVER, MOUSE_OUT, ROLL_OVER, and ROLL_OUT. The events handlers display information in txtOutput whenever any of the events occurs. The differences between MOUSE_OVER and ROLL_OVER (as well as between MOUSE_OUT and ROLL_OUT) become apparent. MOUSE_OVER (MOUSE_OUT) is dispatched when the mouse enters (leaves) board or ANY of board's interactive object decendands. ROLL_OVER (ROLL_OUT) is dispatched when the cursor enters (leaves) board. For example, when the cursor moves from redChild to blueChild while within board, MOUSE_OUT and MOUSE_OVER are dispatched: MOUSE_OUT because the cursor is leaving redChild, MOUSE_OVER as the cursor is entering blueChild. ROLL_OVER and ROLL_OUT are not dispatched as the cursor remains within board.

board.addEventListener(MouseEvent.MOUSE_OVER,overMouse);

 

function overMouse(e:MouseEvent):void {

txtOutput.appendText("\nboard-MOUSE_OVER");

verScrollBar.update();

verScrollBar.scrollPosition=verScrollBar.maxScrollPosition;

}

 

board.addEventListener(MouseEvent.ROLL_OVER,overRoll);

 

function overRoll(e:MouseEvent):void {

txtOutput.appendText("\nboard-ROLL_OVER");

verScrollBar.update();

verScrollBar.scrollPosition=verScrollBar.maxScrollPosition;

}

 

board.addEventListener(MouseEvent.MOUSE_OUT,outMouse);

 

function outMouse(e:MouseEvent):void {

txtOutput.appendText("\nboard-MOUSE_OUT");

verScrollBar.update();

verScrollBar.scrollPosition=verScrollBar.maxScrollPosition;

}

 

board.addEventListener(MouseEvent.ROLL_OUT,outRoll);

 

function outRoll(e:MouseEvent):void {

txtOutput.appendText("\nboard-ROLL_OUT");

verScrollBar.update();

verScrollBar.scrollPosition=verScrollBar.maxScrollPosition;

}

We add listeners to MouseEvent.CLICK to stage and to 'this' that stands for the MainTimeline. The difference: when the user clicks over the empty area the Stage, stage hears the event but the MainTimeline does not. When the user clicks on an object on the Stage, the MainTimeline hears the event as well as stage. (The stage listener is triggered in the bubble phase of MouseEvent.CLICK.)

stage.addEventListener(MouseEvent.CLICK,clickStage);

 

function clickStage(e:MouseEvent):void {

txtOutput.appendText("\nstage-CLICK");

verScrollBar.update();

verScrollBar.scrollPosition=verScrollBar.maxScrollPosition;

}

 

this.addEventListener(MouseEvent.CLICK,clickThis);

 

function clickThis(e:MouseEvent):void {

txtOutput.appendText("\nthis-CLICK");

verScrollBar.update();

verScrollBar.scrollPosition=verScrollBar.maxScrollPosition;

}

We register MOUSE_UP with stage. The reason: this is the only mouse event that is heard even if the cursor is outside of the Flash movie display area. If the user depresses the mouse button over the Stage mouses away from the Stage and then releases the button, MOUSE_UP is heard. At least it is so in most of newer browsers. In older versions of Mac and in some browsers e.g. Opera, the event is not heard.

stage.addEventListener(MouseEvent.MOUSE_UP,upStage);

 

function upStage(e:MouseEvent):void {

txtOutput.appendText("\nstage-MOUSE_UP");

verScrollBar.update();

verScrollBar.scrollPosition=verScrollBar.maxScrollPosition;

}

Event.MOUSE_LEAVE is a Flash Player level event and not a MouseEvent. It is dispatched when the mouse cursor leaves the Flash movie's display area. It is NOT dispatched, however, if the cursor leaves the area while the mouse button is depressed. Not until the button is released and only if the browser hears MOUSE_UP.

stage.addEventListener(Event.MOUSE_LEAVE,leaveStage);

 

function leaveStage(e:Event):void {

txtOutput.appendText("\nstage-MOUSE_LEAVE");

verScrollBar.update();

verScrollBar.scrollPosition=verScrollBar.maxScrollPosition;

}

The button btnClear clears the output text field.

btnClear.addEventListener(MouseEvent.CLICK, clearText);

 

function clearText(e:MouseEvent):void {

txtOutput.text = "";

txtOutput.appendText("\nbutton-CLICK");

verScrollBar.update();

}

Back to AS3 How-Tos and Tips              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.