Skip navigation
Currently Being Moderated

Flex 4 scrollers mouse wheel speed ?

May 11, 2010 11:04 AM

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!

 
Replies
  • Currently Being Moderated
    May 11, 2010 11:26 AM   in reply to FM_Flame

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

     

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

     
    |
    Mark as:
  • Currently Being Moderated
    Calculating status...
    May 11, 2010 2:35 PM   in reply to FM_Flame

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

     

    FTQuest

     
    |
    Mark as:
  • Currently Being Moderated
    May 11, 2010 4:24 PM   in reply to FM_Flame

    Did you try the code sample in the thread that I linked above?


     
    |
    Mark as:
  • Currently Being Moderated
    May 11, 2010 4:49 PM   in reply to FM_Flame

    Try grabbing the MouseWheel event in capture phase or high-priority and

    upping the delta before the Scroller gets it.

     
    |
    Mark as:
  • Currently Being Moderated
    May 11, 2010 10:55 PM   in reply to FM_Flame

     

        public function mouseWHeelAccelerator():void

        {

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

        }

     

        public function bumpDelta(event:MouseEvent):void

        {

            event.delta *= somenumber;

        }

     
    |
    Mark as:
  • Currently Being Moderated
    May 12, 2010 10:16 AM   in reply to FM_Flame

    Import mx.core.mx_internal;

    Use namespace mx_internal;

     

    That pair is how you get at undocumented, unsupported APIs in Flex.

     

    IsDefaultPrevented/preventDefault is how one listener signals to other later

    listeners that it already took some action on the event.

     

    To control the speed for a single component, use a high priority listener on

    the component itself.

     

        public function mouseWHeelAccelerator():void

        {

            myList.addEventListener("mouseWheel", bumpDelta, false, 100);

        }

     
    |
    Mark as:
  • Currently Being Moderated
    May 13, 2010 10:26 AM   in reply to FM_Flame

    There is no API for it.  Check around and see if someone else has an

    example.

     
    |
    Mark as:
  • Currently Being Moderated
    May 30, 2010 5:11 AM   in reply to FM_Flame

    Hello,

    I've realized smooth scrolling simply by animating the content of a <s:HGroup: with a slider.

    Here is an example:

     

    http://ansolas.com/dev/flex/SimpleA/release3/mainapp.html

     

    Thats why I asking how to override the MouseWheelDelta.

     

    Once I have managed this we could scroll horizontal through pages

     

    Same for the <s:List's in my Applikation.

     

    It would be nice to be able to Scroll animated one Element up or down ,exactly as I did it with the <s:HGroup.

     

    Any help is welcome and much appreciated.

     

    Marc

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 4, 2010 5:26 AM   in reply to FM_Flame

    bump

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 4, 2010 4:19 PM   in reply to daslicht

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

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 5, 2010 3:33 AM   in reply to Flex harUI

    Do you mean the example above ?

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 5, 2010 4:08 AM   in reply to FM_Flame

    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?

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 5, 2010 9:44 PM   in reply to daslicht

    Maybe evt.delta = 1;

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 6, 2010 2:28 AM   in reply to Flex harUI

    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 

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 6, 2010 3:21 AM   in reply to FM_Flame

    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

     
    |
    Mark as:
  • Currently Being Moderated
    May 18, 2011 11:54 AM   in reply to daslicht

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 5, 2011 5:33 PM   in reply to FM_Flame

    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>
    
     
    |
    Mark as:
  • Currently Being Moderated
    Sep 13, 2011 4:11 AM   in reply to K-spar

    K-spar ,

     

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

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 4, 2011 8:18 AM   in reply to K-spar

    Thanks for this solution K-Spar. It works like a charm and very easy to implement

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 30, 2012 8:10 AM   in reply to K-spar

    Thanks a lot for the solution, It worked great for me.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 25, 2013 9:47 AM   in reply to K-spar

    K-spar, I can't thank you enough for your solution! Works great. Boy was I pulling my hair out to solve this problem...

     

    For others reading this, note that Flex 4 default <s:Scroller> with a child that is <s:VGroup> will jump one vertical page height when using the mouse THUMBWHEEL when you rotate the thumbwheel one click. This may be too much for some applications.

     

    Conversely, if you use a child of <s:Group> or <s:HGroup> then the Flex 4 behaviour is to jump 1 (or maybe it's two, but it's very small) pixel with each tick (or click) of the mouse thumbwheel. This is likely too small for many applications.

     

    K-spar's solution above allows you to adjust the scroll step size to whatever you like, without adding an event listener (event listeners may impact performance).

     

    UPDATE:

     

    After using this solution a while, I observed that mouse left-clicking in the scroller gutter doesn't follow the usual convention of moving the scrollbar a large jump (the scrollbar behaves as if the user had simply clicked the thumbwheel once). So, the following if-else statement restored this feature:

     

      if (megaValue==1 || megaValue==-1)

      return smallerValue;

      else

      return megaValue;

     

    Then, just comment out the last return. Here's the full code for reference:

     

     

    package path.for.my.package

    {   

              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;

                                  }

     

      if (megaValue==1 || megaValue==-1) // allows mouse left-click in gutter to jump scrollbar into new position

                                            return smallerValue;

      else

                                            return megaValue;

     

      //return smallerValue; // commented out

                        }

     

                        public function ControlledScrollGroup()

                        {

      super();

                        }

              }

    }

     

    Message was edited by: abc123456@!#

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 9, 2012 6:38 AM   in reply to K-spar

    THANKS A LOT SIR !!!

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 8, 2013 3:16 AM   in reply to FM_Flame

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 15, 2013 6:33 PM   in reply to FM_Flame

    This worked best for me and it produces very smooth scrolling in a spark list component:

     

     

      protected function list_creationComplete(e:FlexEvent):void

                                  {

           list.addEventListener(MouseEvent.MOUSE_WHEEL, list_mouseWheel, true);

                                  }

      protected function list_mouseWheel(e:MouseEvent):void

                                  {

           e.preventDefault();

           e.stopImmediatePropagation();

           list.scroller.viewport.verticalScrollPosition  -= e.delta;

                                  }


     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points