HOWTO: Using the MouseWheel Event in AS3

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.
}
}
}

More on Mouse Events in AS3/Flash9/Flex here

Advertisements

19 Responses to “HOWTO: Using the MouseWheel Event in AS3”

  1. bj Says:

    i want to draw

  2. ElSasquash Says:

    Nice one, very useful, thank you for the post

  3. Bill Says:

    Thank you for this very informative article on Actionscript & mouse wheels.

  4. nano Says:

    above should be

    function onMouseWheelEvent(event:MouseEvent):void
    { trace(“onMouseWheelEvent”);

    otherwise namespace error when using delta

    (passing a mouse event, not normal event)

  5. Yikulju Says:

    Does it work on Mac OS X too?
    For me it doesn’t.

  6. Filip Beunens Says:

    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 ?

  7. Coert Says:

    Thanks.

    Is there any way to listen to the mouse wheel being stopped using?

  8. drawk Says:

    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.

  9. Coert Says:

    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?

  10. drawk Says:

    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.

  11. Coert Says:

    Thanks Drawk! I was hoping for a !MOUSE_WHEEL, but this will have to do.

  12. Oliver Says:

    Good Post!

  13. Emmett Says:

    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.

  14. drawk Says:

    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

  15. Emmett Says:

    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?

  16. drawk Says:

    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.

  17. Emmett Says:

    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.

  18. Luis Espinal Blog | HOWTO: Using the MouseWheel Event in AS3 | [ draw.logic ] Says:

    […] HOWTO: Using the MouseWheel Event in AS3 | [ draw.logic ]. […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: