AS3 Mouse Events and Mouse Related User Actions

Flash is great for monitoring all actions by a user from what they type to what their mouse is doing and for how long. We have many tracking systems that rely on script in Flash and HTML when not using flash that can detect user interaction with our applications. Many tracking companies also use this info for hotspot or heat maps to see what your users are messing with.

To do all this interaction logging and tracking you need mouse events. Mouse events drive games, applications, cool user controlled interfaces, expected user direction and simplify your application. Understanding all the mouse events possible is important.

Here is a list of all the events that are clearly implemented in AS3:

CLICK : String = “click” MouseEvent
Used to detect mouse clicks.

DOUBLE_CLICK : String = “doubleClick” MouseEvent
Used to detect double clicks.

MOUSE_DOWN : String = “mouseDown” MouseEvent
Checks when mouse is pressed down.

MOUSE_LEAVE : String = “mouseLeave” Event
Monitors when the mouse leaves the stage.

MOUSE_MOVE : String = “mouseMove”
Monitors when the mouse moves.

MOUSE_OUT : String = “mouseOut”
Monitors when the mouse moves out of the attached to object of the event.

MOUSE_OVER : String = “mouseOver”
Monitors when the mouse moves over the attached to object of the event.

MOUSE_UP : String = “mouseUp”
Monitors when the mouse moves up the attached to object of the event from a click.

MOUSE_WHEEL : String = “mouseWheel”
Monitors when the mouse wheel moves, detect the positive or negative delta property for distance and direction moved.

Wiring up Events in AS3 is easier than its ever been.

// attach the event listener to this object, if you want a global event outside
// the current class attach to stage.addEventListener([event],[callback])
this.addEventListener(MouseEvent.CLICK, onMouseClickEvent);

// then make the callback
public function onMouseClickEvent(event:Event)
{
trace(event);
if(event.buttonDown) // if primary button down, left mouse button
trace("left button was down");
else
trace("left button was not down");
}

What about right clicks?

Well not all mouse equipment has right click so its not always best to implement but for the ones that have right click capabilities and other buttons there is both mouse wheel and right click support in Flash mouse events.

To detect right click:

In the MouseClick event there is a buttonDown property on the event that returns true if its a left click, false if its any other mouse button. So you could have a menu drop down on a mousewheel click, right mouse click or other mouse button clicks.

Detecting right clicks or other mouse clicks is impossible in Flash AS3. I got excited and error in testing and thought the buttonDown helped to determine the button pressed but it only listens to the left click.

What about drag over and drag out?

The buttonDown property is mainly used for drag over or drag out events (which are not an actual event) but you could do something like:

function onMouseOver(event:MouseEvent):void
{
if(event.buttonDown==true)
{
// mouse is down and dragged over.
trace('onDragOver');
}
}

function onMouseOut(event:MouseEvent):void
{
if(event.buttonDown==true)
{
// mouse is down and dragged over.
trace('onDragOut');
}
}

To detect when the mouse leaves the screen:

Use the MouseEvent.MOUSE_LEAVE event on your main document class or a class instantiated that assigns this event to the stage. This can be used for high intensity flash sites where performance is preserved when the user is not interacting with certain elements.

More on mouse events and timers shortly. Here’s a sample from the docs:
http://livedocs.adobe.com/flex/2/langref/flash/events/MouseEvent.html#constantSummary

package {
import flash.display.Sprite;

public class MouseEventExample extends Sprite {
private var size:uint = 100;
private var bgColor:uint = 0xFFCC00;

public function MouseEventExample() {
var child:ChildSprite = new ChildSprite();
addChild(child);
}
}
}

import flash.display.Sprite;
import flash.events.MouseEvent;

class ChildSprite extends Sprite {
private var size:uint = 50;
private var overSize:uint = 60;
private var backgroundColor:uint = 0xFFCC00;
private var overColor:uint = 0xCCFF00;
private var downColor:uint = 0x00CCFF;

public function ChildSprite() {
draw(size, size, backgroundColor);
addEventListener(MouseEvent.CLICK, clickHandler);
addEventListener(MouseEvent.DOUBLE_CLICK, doubleClickHandler);
addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
addEventListener(MouseEvent.MOUSE_WHEEL, mouseWheelHandler);
}

private function draw(w:uint, h:uint, bgColor:uint):void {
graphics.clear();
graphics.beginFill(bgColor);
graphics.drawRect(0, 0, w, h);
graphics.endFill();
}

private function clickHandler(event:MouseEvent):void {
trace("clickHandler");
}

private function doubleClickHandler(event:MouseEvent):void {
trace("doubleClickHandler");
}

private function mouseDownHandler(event:MouseEvent):void {
trace("mouseDownHandler");
draw(overSize, overSize, downColor);

var sprite:Sprite = Sprite(event.target);
sprite.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
sprite.startDrag();
}

private function mouseMoveHandler(event:MouseEvent):void {
trace("mouseMoveHandler");
event.updateAfterEvent();
}

private function mouseOutHandler(event:MouseEvent):void {
trace("mouseOutHandler");
draw(size, size, backgroundColor);
}

private function mouseOverHandler(event:MouseEvent):void {
trace("mouseOverHandler");
draw(overSize, overSize, overColor);
}

private function mouseWheelHandler(event:MouseEvent):void {
trace("mouseWheelHandler delta: " + event.delta);
}

private function mouseUpHandler(event:MouseEvent):void {
trace("mouseUpHandler");
var sprite:Sprite = Sprite(event.target);
sprite.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
sprite.stopDrag();
draw(overSize, overSize, overColor);
}
}