Skip to main content
Known Participant
May 11, 2010
Answered

Flex 4 scrollers mouse wheel speed ?

  • May 11, 2010
  • 6 replies
  • 22770 views

Is there any simple way to define a constant speed or should I say predefined step at which the mousewheel will scroll the vertical scroller? For example when I programmed my scrollers in flash I've made a formula which worked this way:

1) I want to move the scrollable content area with 40px per scroll of the mouse wheel

2) it calculates the 40px/visible content area height % which I then use to calculate for how much the scroller thumb should move on the track

3) also some code for reaching the top and bottom of the total content area/scroller track.

Here the scroller has some auto calulating speed but when I put scrollers to my main application (you know.. browser like scrolls) they seem to scroll very slow. So now I've been looking for a property or something to change it somehow to be more fast but couldn't find anything. Maybe I need to make the scrollers custom but I tought that would be stupid not to have on the default scrollers... so I am asking here.

Another question of anyone knows, does Flex 4 brings the mouse wheel to the Mac ? or the scrollers are still not working there without a workaround and custom codes ?

Thanks in advance!

    This topic has been closed for replies.
    Correct answer Alex J Harui

    To the last post - it would be great if you can show an example of that, sounds so easy comming from you

    The example from the link above with the custom vscrollbar I've not tried yet. If I am getting this right.. there's no other way of adding/using this functionality without extending the vscrollbar component ? There are a bunch of things I don't understand about that example located in the AS class, the rest I understand.

    Here is what I get when I create the class myself:

    package

    components

    {

         import spark.components.VScrollBar;

         public class test extends VScrollBar

         {

              public function test()

              {

              super();

              }

         }

    }

    Here is what the example has:

    package

    {

         import flash.events.MouseEvent;

         import mx.core.mx_internal;// what ?

         import spark.components.VScrollBar;

         import spark.core.IViewport; // what ?

         use namespace mx_internal;// what ?

         public class CustomVScrollBar extends VScrollBar

         {

              /**

              * Override mouseWheelHandler to scroll by a fixed amount

              *

              * See superclass for example of how this normally works

              */

              override mx_internal function mouseWheelHandler(event:MouseEvent):void

              {

                   const vp:IViewport = viewport; // what ?

                   if (event.isDefaultPrevented() || !vp || !vp.visible)  // what ?

                   return; // what ?

                   var delta:Number = event.delta;

                   var direction:Number = 0;

                   var distance:Number = 10;

                   // figure out the direction of scroll

                   if (delta < 0){

                        direction = 1;

                   }

    else if (delta == 0){

                        direction = 0;

                   }

    else {

                        direction = -1;

                   }

                   vp.verticalScrollPosition += distance * direction;

                   event.preventDefault(); // what ?

              }

         }

    }

    I look at the vscrollbar documentation and I have no idea how the hell this guy know to use the mx_internal and that the mousewheel function is there and after that defining the viewport in some strange way  and then preventing something who knows what... can someone explain how can I know about this stuff.. where to look for it? I've added some "what ?" comments to set direction to my confusion

    I hope it's not too hard to explain, I am a flash dev and kinda new to flex and this stuff, but I learn fast


    public function mouseWHeelAccelerator():void

    {

    systemManager.addEventListener("mouseWheel", bumpDelta, true);

    }

    public function bumpDelta(event:MouseEvent):void

    {

    event.delta *= somenumber;

    }

    6 replies

    Participant
    April 8, 2013

    The better way is to catch FlexMouseEvent.MOUSE_WHEEL_CHANGING on VScrollBar or HScrollBar, ( addEventListener(FlexMouseEvent.MOUSE_WHEEL_CHANGING,mouseWheelChangingHandler)) or override VScrollBar.dispatchEvent to change the delta, for more control override LayoutBase.getVerticalScrollPositionDelta(navigationUnit:uint) method

    Note! Remember to keep sign of delta.

    August 6, 2011

    I had a slightly different problem with mouse wheel scrolling; the scroller would jump WAY too far with each click of the wheel.  I figured out a solution that I think is much simpler than trying to subclass the scrollbar or intercept mouse wheel events.  The viewport for a scroller dictates how far to scroll through the getVerticalScrollPositionDelta method in IViewport, so I extended s:Group and overrode that method to return a smaller value.  Now I just use the new group subclass as the viewport for a Scroller and set the step size to something reasonable and it works great!  This allows you to mimic the old Canvas.verticalLineScrollSize property which was very useful for solving this problem.  Here's the code, I hope this helps someone overcome the stupid scrolling in Flex4.

    ControlledScrollGroup.as

    package scroll
    {   
        import spark.components.Group;

        public class ControlledScrollGroup extends Group
        {
            private var _step_size:int = 0;
           
            public function get stepSize():int
            {
                return _step_size;
            }
           
            public function set stepSize(value:int):void
            {
                _step_size = value;
            }
           
            override public function getVerticalScrollPositionDelta(navigationUnit:uint):Number
            {
                var megaValue:Number = super.getVerticalScrollPositionDelta(navigationUnit);
               
                if(megaValue == 0)
                {
                    return 0;
                }
               
                var smallerValue:int =  _step_size;
               
                if(smallerValue ==0)
                {
                    return megaValue;
                }
               
                if(megaValue < 0)
                {
                    smallerValue = -1*smallerValue;
                }
               
                return smallerValue;
            }
           
            public function ControlledScrollGroup()
            {
                super();
            }
        }
    }

    usage:

    <s:Scroller  height="400" width="400">

         <scroll:ControlledScrollGroup stepSize="40">

              <... content what needs scrolln' ...>

         </scroll:ControlledScrollGroup>

    </s:Scroller>

    Participant
    September 13, 2011

    K-spar ,

    Your solution is the best one, thank you very much for sharing .

    daslicht
    Known Participant
    June 6, 2010

    Ok,

    I just took my Notebook in the garden with me and created a Slider Example.

    On my MacBookPro it is working ! but not on my PC.

    Here you can try the code:

    http://wensauer.info/flex/ConstantDeltaSlider/ConstantDeltaSlider.html

    For some reason it is neither working at all for a HScrollBar.

    Have a Nice Day

    Marc

    Participating Frequently
    May 18, 2011

    This problem was giving me fits, and it took me a bit to piece meal all of the "solutions" together, so for the benefit of others:

    http://wp.me/pCFcS-61

    daslicht
    Known Participant
    June 5, 2010

    Hi,

    that's what I have:

    <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"                   xmlns:s="library://ns.adobe.com/flex/spark"                   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"                   creationComplete="application1_creationCompleteHandler(event)"                   >      <fx:Declarations>           <!-- Place non-visual elements (e.g., services, value objects) here -->      </fx:Declarations>      <fx:Script>           <![CDATA[                import mx.events.FlexEvent;                               protected function application1_creationCompleteHandler(event:FlexEvent):void                {                     systemManager.addEventListener(MouseEvent.MOUSE_WHEEL,mouseWheelSpeed,true);                                    }                               public function mouseWheelSpeed(evt:MouseEvent):void {                     evt.delta *= 0.50;                }           ]]>      </fx:Script>           <s:HSlider id='hSlider'  stepSize="1" maximum="10" minimum="0" />           </s:Application>

    But this still did not solve the issue.

    When I turn the MouseWheel the Slider jumps from 0 to 2 but I want to be able to scroll trough each(1,2,...,n) value with the mouse.

    This behaviour has to be the same on any computer.

    How do I get that ?

     evt.delta *= 0.50;

    This line is interesting, so you also can use events in the other direction  and override the dispatcher of the event ?

    Anyone please like to explain that to me for deeper insight?

    Adobe Employee
    June 6, 2010

    Maybe evt.delta = 1;

    daslicht
    Known Participant
    June 6, 2010

    Hi I tried that as well(this was the first approach), but anytime the delta jumps two units :/

    I am creating a online example so that we can simply play and see what happen.

    Something else interesting seems to be the different behaviour of OSX (FP10.1) and W7

    Thank you very much for taking time !

    Marc 

    daslicht
    Known Participant
    June 4, 2010

    bump

    Adobe Employee
    June 4, 2010

    This issue has been discussed on this forum before. See past threads.

    daslicht
    Known Participant
    June 5, 2010

    Do you mean the example above ?

    Adobe Employee
    May 11, 2010

    This post might help: http://forums.adobe.com/message/2787169

    I believe mouse wheel works on Mac in Flash Player 10.1.

    FM_FlameAuthor
    Known Participant
    May 11, 2010

    Version 10,0,45,2 is the latest version at the moment, is flash player 10.1 a future version u are talking about ?

    Version 10,0,45,2 is the one my friend has on his mac and the mouse wheel scroll is not working there.

    Thanks for the link you provided, I've already found it and yeah it a solution but I was still wondering if that's the only way out there...

    Known Participant
    May 11, 2010

    You can get it at Adobe Labs, and indeed, finally mouse wheel works on Mac.

    FTQuest