flash interactivity_coordinates

For all mouse actions, the graphic objects broadcast flash.events.MouseEvent object events. This class has numerous properties:

• MouseEvent.altKey: indicates if the ALT key is pressed at the time of the click.

• MouseEvent.buttonDown: indicates if the main mouse button is pressed at the time of the click.

• MouseEvent.delta: indicates the number of lines that need to scroll when the user turns the mouse wheel once.

• MouseEvent.localX: indicates the X coordinates of the mouse in relation to the coordinate space of the clicked object.

• MouseEvent.localY: indicates the Y coordinates of the mouse in relation to the coordinate space of the clicked object.

• MouseEvent.relatedObject: indicates the object to which the mouse is pointing on the MouseEvent.MOUSE_OUT event.

• MouseEvent.shiftKey: indicates if the SHIFT key is pressed at the time of the click.

• MouseEvent.stageX: indicates the X coordinates of the mouse in relation to the coordinate space of the Stage object.

• MouseEvent.stageY: indicates the Y coordinates of the mouse in relation to the coordinate space of the Stage object.

By tracing the event object, a toString() representation is triggered:

// subscription to the MouseMove event of a button
myButton.addEventListener ( MouseEvent.MOUSE_MOVE, mouseMove );
function mouseMove ( pEvt:MouseEvent ):void
{
//displays : [MouseEvent type="mouseMove" bubbles=true cancelable=false
eventPhase=2 localX=28 localY=61 stageX=158.95000000000002 stageY=190
relatedObject=null ctrlKey=false altKey=false shiftKey=false delta=0]
trace(pEvt);
}

These properties allow us to know what position the mouse is in, in relation to the coordinates of the rolled-over object:

// subscription to the MouseMove event of a button
myButton.addEventListener ( MouseEvent.MOUSE_MOVE, mouseMove );
function mouseMove ( pEvt:MouseEvent ):void
{
/*displays :
X position of the mouse in relation to the button: 14
Y position of the mouse in relation to the button: 14
*/
trace("X position of the mouse in relation to the button: " + pEvt.localX);
trace("Y position of the mouse in relation to the button: " + pEvt.localY);
}

The following image illustrates the localX and localY properties:

In order to know where the mouse is in relation to the stage and therefore the main timeline, we always use the stageX and stageY properties of the MouseEvent object type:

// subscription to the MouseMove event of a button
myButton.addEventListener ( MouseEvent.MOUSE_MOVE, mouseMove );
function mouseMove ( pEvt:MouseEvent ):void
{
/*displays :
X position in relation to the stage: 184
Y position in relation to the stage: 204
*/
trace("X position of the mouse in relation to the stage: " + pEvt.stageX);
trace("Y position of the mouse in relation to the stage: " + pEvt.stageY);
}

The following image illustrates the stageX and stageY properties:

Note that when the Stage object is the target of a mouse event, the stageX, stageY and localX and localY properties of the event object return the same value.

Worth remembering

• The localX and localY properties return the coordinates of the mouse in relation to the local coordinates of the clicked object.
• The stageX and stageY properties return the mouse coordinates in relation to the main stage.