Mousewheel usage has been increasing now that almost everyone has a mouse with a wheel on it. Flash and specifically AS3 has capabilities to get lots of information about the mouse wheel movement and mouse movements in general.
In AS3 you wire up events like this:
stage.addEventListener(Event.RESIZE, onResizeEvent);
For mouse events you wire them up using the Mouse pseudo static enumeration MouseEvent:
stage.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheelEvent);
Inside of our flash class that we are wiring up events for we need to put the event function that we pass as an argument.
function onMouseWheelEvent(event:Event):void
{
trace("onMouseWheelEvent>>>>>>");
trace(event.delta);
}
As you can see the method passes the object in the event. Here we are getting the delta property of the object returned for the mousewheel event. You can get any of these properties that return (you can see this if you trace out the object).
//[MouseEvent type="mouseWheel" bubbles=true cancelable=false eventPhase=2 localX=261 localY=241 stageX=261 stageY=241 relatedObject=null ctrlKey=false altKey=false shiftKey=false delta=-6] [ MouseEvent type="mouseWheel" bubbles=true cancelable=false eventPhase=2 localX=261 localY=241 stageX=261 stageY=241 relatedObject=null ctrlKey=false altKey=false shiftKey=false delta=-6 ]
The delta property is the amount and direction that the mouse wheel was moved up or down. If the delta is a positive integer then the mouse wheel was moved up, if negative it was moved down.
On my computer I have scrolling set to pages so it sets to 6 or -6 on all movements. Others that have different mouse customizations might only move 1 or 2 in either direction, mine moves six. This is important to note for game development or browsing with zoomable applications. Not all mousewheels are the same.
You can also see that there is a ctrlKey property and an altKey and shiftKey property to check if the user also has these down. This could be beneficial for navigation like in a 3d program or map where if you hold down shift or ctrl the application does different actions with the mouse wheel.
The mouse positions are also passed so you could check if what to scroll specifically or zoom. These mouse positional properties are available in other mouse events as well, you can always trace(event) to the passed event to see what it contains. You can also attach these events inside individual classes so that they only reacte to their own mouse wheel events rather than on the main stage.
SAMPLE MouseWheel script test file (make a new file and set this to the document class)
package
{
import flash.display.*;
import flash.events.*;
import flash.ui.*;
public class MouseWheelMain extends MovieClip
{
public function MouseWheelMain()
{
stage.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheelEvent);
}
function onMouseWheelEvent(event:Event):void
{
trace("onMouseWheelEvent");
trace(event);
trace(event.delta); // amount mouse wheel moved
// could do something like
//movieToMove.x += event.delta/6; // or any property like scaleX, scaleY, y, depth etc.
}
}
}
May 22, 2007 at 11:31 am
i want to draw
May 29, 2007 at 1:21 pm
[...] http://drawk.wordpress.com/2007/05/13/mousewheel-event-in-as3/ [...]
February 20, 2008 at 5:14 am
Nice one, very useful, thank you for the post
March 12, 2008 at 2:58 am
Thank you for this very informative article on Actionscript & mouse wheels.
April 28, 2008 at 9:38 am
above should be
function onMouseWheelEvent(event:MouseEvent):void
{ trace(”onMouseWheelEvent”);
otherwise namespace error when using delta
(passing a mouse event, not normal event)
July 15, 2008 at 3:01 am
Does it work on Mac OS X too?
For me it doesn’t.
July 20, 2008 at 9:57 am
Thanks for the info to get met started, but what I see now is that the onMouseWheelEvent just get fired after the stage gots focus with a mouseclick or something else…
How can I avoid this ?
September 24, 2008 at 2:14 am
Thanks.
Is there any way to listen to the mouse wheel being stopped using?
September 24, 2008 at 4:21 am
If you only act on the wheel event like the script above it will automatically stop doing what it is doing when it is not being used, so no need to listen for when it stops. Do you have a specific situation where you need to do this?
You only act on the event of a scroll (up or down) and then do nothing otherwise. If you listened to the mouse wheel at a tick it would be unnecessary resources being used.
September 25, 2008 at 9:35 am
I have a process that is triggered by the trigger for the mousewheel. That second process is passed the value of delta. I need to know when the delta has become zero, however I can only read delta when it’s not zero. Does this mean I need to have another process going that constantly sets delta back to zero?
September 25, 2008 at 1:12 pm
Delta will be zero immediately after the MOUSE_WHEEL event registers the delta amount from the mouse wheel event. So you could set a flag or call an event that would run when checking this event. You can make a local scoped event variable, load it up on wheel event, then have a timer check it for zero or call an event after the wheel has completed to fix this. But since this is an event is is essentially a broadcast and not a constant real-time check. It makes for better performing apps but you won’t know the exact moment it returns to zero due to this model. You would have to have a Timer or some other check to monitor that.
September 26, 2008 at 11:05 am
Thanks Drawk! I was hoping for a !MOUSE_WHEEL, but this will have to do.
September 28, 2008 at 7:21 pm
Good Post!
October 19, 2008 at 4:11 pm
I’m very new to Flash and AS3 both, so I’m sorry if this is really basic, but I’d like to know how to use the delta value in a Conditional If code.
Once I trace the (event.delta) how can I say
if (delta > 0) {gotoAndPlay(”up”)}
else {gotoAndPlay(”down”)}
where “up” and “down” are frame labels on a movieclip.
Obviously the code won’t be exactly like that, but hopefully you understand what I’m trying to do. I’m stuck thinking in “English” and having a hard time thinking in AS3.
October 19, 2008 at 5:33 pm
Emmett,
You probably want to do it like this:
var change:Number = new Number(event.delta);
if (change > 0)
gotoAndPlay(”up”)
else if(change < 0)
gotoAndPlay(”down”)
else
// do nothing – or just the two cases since it is an event
October 19, 2008 at 9:17 pm
Thanks drawk for your quick reply.
It’s not working, buuuut it’s probably my fault. The way I have it set up now I don’t have the…
package
{
import flash.display.*;
import flash.events.*;
import flash.ui.*;
public class MouseWheelMain extends MovieClip
{
public function MouseWheelMain()
{
stage.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheelEvent);
}
part in my script. the reason being that I have no idea what it does and I thought I could avoid it. (I have an EventListener( MouseEvent.ROLL_OVER) and corresponding roll over effect working without it…) Soooo, what is that and why do I need it?
I have the Wheel EventListener in the script, but just on it’s own, like this.
Sbtn.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheelEvent);
where Sbtn is the instance name of my Movieclip.
then I have the function set up like in the example.
function onMouseWheelEvent(event:MouseEvent):void
{
trace(”onMouseWheelEvent”);
trace(event);
trace(event.delta);
var change:Number = new Number(event.delta);
if (change > 0){
Sbtn.gotoAndPlay(”up”);
}
}
Is that enough info to see what I’m doing wrong here?
October 20, 2008 at 8:12 am
I would try attaching that event to the stage. Key press events, mouse wheel events etc seem to not always work unless they are attached at the stage or a guaraneed stage add after the Event.ADDED_TO_STAGE event. It is easier to test by just attaching that event to the stage. You will see the event happen and can debug better if you aren’t getting the event at all.
October 26, 2008 at 4:14 pm
alright, so I found out MOUSE_WHEEL doesn’t work natively on a mac. go figure. there’s swfobject fix tho, so everythings much better.