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])
// 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 = 0×00CCFF;
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); } }
If you’re looking for computer parts or want to learn the best way to build or buy a computer to access online music, then check out this information today.
This information was taken from http://drawk.wordpress.com
Brgds,
CP
| Copy and Paste the code below | |
| Email and IM | |
| Websites | |
| Forums | |
follow:
June 12th, 2007 at 2:29 pm
It would be good to point out the differences between MOUSE_OVER and MOUSE_OUT vs. ROLL_OVER and ROLL_OUT (mouse over/out is affected by propagation, roll over/out is not)
June 12th, 2007 at 5:58 pm
It’s too bad, there is not a direct way to detect a release outside (a MOUSE_UP_OUTSIDE would have been nice).
At this moment the only way to detect this is to check for a MOUSE_UP on the stage and also check if the mouse is not still over the DisplayObject…
July 16th, 2007 at 3:27 pm
So what are people doing about that? No replacement for onReleaseOutside?
I just add the MOUSE_UP listener after the person already hit the MOUSE_DOWN handler and apply it to root.
function mouseDownHandler(input:MouseEvent){
root.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler)
}
function mouseUpHandler(input:MouseEvent){
if(root.hasEventListener(MouseEvent.MOUSE_UP){
root.removeEventListenerMouseEvent.MOUSE_UP, mouseUpHandler);
}
}
}
July 25th, 2007 at 5:46 pm
@kent: You should use stage instead of root when listening for a mouse up outside event. Additionally, set useCapture to true so that you ensure you get the event.
stage.addEventListener(MouseEvent.MOUSE_UP, handler, true)
July 25th, 2007 at 5:52 pm
Regarding ROLL_OVER vs MOUSE_OVER: You will receive only one ROLL_OVER event when you roll over children of a clip, however using MOUSE_OVER, you will continue to get events when your mouse enters the children of a clip. (That is unless you set the mouseChildren to false)
September 12th, 2007 at 8:08 am
Hi, As you have written above as “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. ” But when I tried this I got result as false when I left clicked and nothing on right click or wheelClick.
I am new to wordPress creating a new blog too.
September 22nd, 2007 at 7:12 am
[...] gotcha, was the removal of releaseOutside. The comments here somewhat cover it. Though for my own solution I ended up using rollOver and rollOut to register the [...]
October 31st, 2007 at 8:22 pm
Actually, it is the Event.MOUSE_LEAVE, NOT MouseEvent.MOUSE_LEAVE. And you register it the “stage” like this: stage.addEventListener(Event.MOUSE_LEAVE, onMouseLeave)
December 13th, 2007 at 3:05 pm
Hi,
For using right click in AS3 check out this link:
http://www.uza.lt/blog/2007/08/solved-right-click-in-as3/
Hope this helps,
Sidney
January 21st, 2008 at 1:20 am
Lanny thanks you so much for the bit about useCapture for releaseOutside, I could not figure out why this was not working for me and you saved me many future headaches
July 17th, 2008 at 4:18 pm
Do I have to call this line “import flash.events.MouseEvent;” to use the mouse events?
November 21st, 2008 at 9:05 pm
I am currently a student at a technical college. My question concerns that of a Flash nature (I think). I want to create an image with lighting and shadows, but I want the the lighting and shadows to move with the position of the mouse, as if the mouse were the lightsource. I was wondering if this were possible, and if so, would the file size be excrutiatingly huge. I know this question may be very elementary, but, as i said before, I am a student who is still in the learning phase, and I think it would make a cool effect on my portfolio page.
December 20th, 2008 at 6:04 am
The good resource should be brought in bookmarks
April 9th, 2009 at 11:52 am
Event.MOUSE_LEAVE not MouseEvent.MOUSE_LEAVE
May 13th, 2009 at 11:33 am
OMG Actionscript is such a bodged language. Java programmer, the everything is extremely un-Java in my opinion.
addEventListener(MouseEvent.CLICK, ClickMe)
function Clickme(e:MouseEvent){}
The examples I’ve seen used all over, I see people cutting and pasting this sort of function dozens of times.
And why doesn’t Clickme require a MouseClick event to be passed in?
Shouldn’t that be something like (I know this doesn’t work, but I’m trying to make a point!)
addEventListener(MouseEvent.CLICK, ClickMe(New MouseEvent(), “myClickedValue”);
function Clickme(e:MouseEvent, String myString){
gotoAndBugger(myString);
}
I’ve played around with the API, some decent examples in the Documentation, but its a frustratingly illogical language IMO. With lack of decent Codecompletion, and vague Fuzzy typing, it makes for a real hacked mess. And why ‘e:String’ not ‘String e’? And why not public void function…not public function(mess):void?
Maybe more time will make things see less bodged.
July 31st, 2009 at 12:33 pm
@DavidC – Yes, you do
@Paulie – it was even more illogical in AS2, but very easy to use for beginners
@Webmaster – useful tute, good stuff
kbai
August 4th, 2009 at 3:23 am
thank you for sharing this one!very usefull stuff!
August 10th, 2009 at 5:55 am
thank you for – it helped me alot !
February 10th, 2010 at 9:10 pm
[...] Flash Enabled Blog – Everything Flash » Blog Archive AS3 Mouse Events and Mouse Related User Acti… [...]