Flex Examples

The following example demonstrates a very simple Flex application which listens for the mouseWheel event (represented here by the MouseEvent.MOUSE_WHEEL constant) and updates a Label control on the display list.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/28/detecting-the-mouse-scroll-wheel-in-a-flex-application/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init()">

    <mx:Script>
        <![CDATA[
            private function init():void {
                systemManager.addEventListener(MouseEvent.MOUSE_WHEEL, doMouseWheel);
            }

            private function doMouseWheel(evt:MouseEvent):void {
                num += evt.delta;
            }
        ]]>
    </mx:Script>

    <mx:Number id="num">0</mx:Number>

    <mx:NumberFormatter id="numberFormatter" />

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="Click the stage and scroll mouse wheel to begin." />
    </mx:ApplicationControlBar>

    <mx:Label text="{numberFormatter.format(num)}"
            fontSize="96" />

</mx:Application>

View source is enabled in the following example.

Oops, I had to remove the SWF since it was competing with IE’s scroll (I’m using a weird <iframe /> solution for inline samples). To see the sample, click here.

And no, the number has absolutely no significance. It is just a quick way to see if the mouse wheel was responding.