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);
}
}

11 Responses to “AS3 Mouse Events and Mouse Related User Actions”

  1. Dale Fraser Says:

    Great?

    Seriously, I think it’s poor. Just because not all OS’s support right click, doesn’t mean you shouldn’t be able to detect and use it. Not everyone in the world is using Flash / Flex for cross platform purposes.

    I think Adobe need to wake up to this fact and allow developers to use what they want.

  2. drawk Says:

    Yeh its pretty limited to just left click, and ALL OTHER clicks but you can still make right click actions. On the mouse event check for the buttonDown property of the event for true/false. True if its a left-click, false if its a right click or other click (such as the mouse wheel press). and mousewheel events.

  3. Paulius Uza Says:

    Your example is NOT working:

    – CLICK event fires when button goes to down state and then goes back to up state, so the buttonDown property will always return false;
    – Right click is locked by the player and events are not firing through.
    – There is an Alt property that is reserved for future use in the MouseEvent class, we should be looking in this direction for right-click support in Flash Player 9.x or 10.

  4. drawk Says:

    Hey Paulius, hte post has been corrected yes the buttonDown event seems promising but it only listens to the left click. It can be used in tandem for draggable interfaces for drag over and drag out (seeing if the mouse is down during these actions) but if you rely on it for right clicks or other clicks it is a false positive and does not work. I was hoping right click support is in. The altKey property currently works and returns true if the mouse event is fired and the ALT key is pressed. Same with shiftKey and ctrlKey but right clicks and other mouse clicks are a nogo. Left click and mousewheel is all AS# has and no changes from as2.

  5. __etc Says:

    You can use loadBytes method of Loader to load compiled AS2 swf, which broadcasting old mouse events by the LocalConnection.
    Smth like this: http://etcs.ru/pre/MouseDown/
    But you need to add method, which returns Key.getCode value.

  6. Paulius Uza Says:

    I’ve done a hack that enables Right Click in AS3 through Javascript-AS bridge.

    http://www.uza.lt/blog/2007/08/solved-right-click-in-as3/

  7. drawk Says:

    Hey Uza that is pretty sweet. It relies on teh javascript side so might hav some issues in some browsers but for the majority and depending on audience this would be nice to add in to many apps. Maybe even pop your own context menu.

  8. Bowie van Ling Says:

    If I’m reading the documentation correctly the MOUSE_LEAVE constant is a property of the Event class not the MouseEvent class. Thought you might like to know, and many thanks for this info

  9. постер Says:

    Прелестно)

  10. de Says:

    Seems flash is good there, but… I want to have some sprites/mc’s over the “button sprite” that receives events. I want mouse events work like that sprites over button don’t exist. However, if there is some tiny graphics over my precious button, button’s actions work crappy =\
    How do you advice to work around this? Use our favourite Invisible Button-like sprite? Subscribe them for the same action as button (and detect and unsubscribe if they happen to move out)? Place them inside button (and yeah, what if they move out from button)?

  11. de Says:

    sry, mouseEnabled rocks %)


Leave a comment