29 Replies Latest reply: Apr 15, 2013 6:33 PM by Christian Gotschim RSS

    Flex 4 scrollers mouse wheel speed ?

    FM_Flame Community Member

      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!

        • 1. Re: Flex 4 scrollers mouse wheel speed ?
          Shongrunden Adobe Employee

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

           

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

          • 2. Re: Flex 4 scrollers mouse wheel speed ?
            FM_Flame Community Member

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

            • 3. Re: Flex 4 scrollers mouse wheel speed ?
              FTQuest Community Member

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

               

              FTQuest

              • 4. Re: Flex 4 scrollers mouse wheel speed ?
                FM_Flame Community Member

                thanks ! that's great news

                 

                So the question stays for the mouse wheel speed, at the moment when I use my scrollers on content area of any height with the mousewheel I scroll like 10 px per rotate... so u can figure out it's rediculous to scroll a browser page with that speed..  it should be around 50-100 px or so...

                • 5. Re: Flex 4 scrollers mouse wheel speed ?
                  Shongrunden Adobe Employee

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


                  • 6. Re: Flex 4 scrollers mouse wheel speed ?
                    Flex harUI Adobe Employee

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

                    upping the delta before the Scroller gets it.

                    • 7. Re: Flex 4 scrollers mouse wheel speed ?
                      FM_Flame Community Member

                      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

                      • 8. Re: Flex 4 scrollers mouse wheel speed ?
                        Flex harUI Adobe Employee

                         

                            public function mouseWHeelAccelerator():void

                            {

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

                            }

                         

                            public function bumpDelta(event:MouseEvent):void

                            {

                                event.delta *= somenumber;

                            }

                        • 9. Re: Flex 4 scrollers mouse wheel speed ?
                          FM_Flame Community Member

                          this worked like a charm and seems better than that custom component code I added above! But of course this works for all the application and the other one just for the custom component. It also had me look in the SystemManager class and what's it used for, lots of new stuff there. Any quick hints where else do you use it.. not in detail just overall.

                           

                          If anyone can explain the code I pasted for the custom component above just a little bit I would be very grateful!

                          • 10. Re: Flex 4 scrollers mouse wheel speed ?
                            Flex harUI Adobe Employee

                            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);

                                }

                            • 11. Re: Flex 4 scrollers mouse wheel speed ?
                              FM_Flame Community Member

                              Thanks a lot for the enlightment.. now at least I know why I don't find anything on the docs about this.. cause I am supposed to use the api for it eg addEventListener rather than extending and editing the component, which would be only in cases there's no other way around.

                               

                              I have one last probably a simple question, when you use the scroller no matter wheel or just draging the thumb, the content area or viewport not sure how it's called moves up and down right.. so I think I've read it somewhere here but I still want to make this topic complete for me and the people who read it so... what's the best way to add an easing effect to it, to it slides up or down with animation (so called smooth scrolling). Do I need to make a custom component and override some function again or there's another way like for the scroll speed? Please post a small example and I think with this the topic will be complete

                               

                              Thank you a lot for the great answers, you were very helpful!

                               

                              P.S. I found this link on one of the topics but it's for flex 3 and I would really like to see a flex 4 example... http://npacemo.com/wordpress/2009/10/24/flex-3-animated-scrolling-aka-smooth-scroll/

                              • 12. Re: Flex 4 scrollers mouse wheel speed ?
                                Flex harUI Adobe Employee

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

                                example.

                                • 13. Re: Flex 4 scrollers mouse wheel speed ?
                                  daslicht Community Member

                                  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

                                  • 15. Re: Flex 4 scrollers mouse wheel speed ?
                                    Flex harUI Adobe Employee

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

                                    • 16. Re: Flex 4 scrollers mouse wheel speed ?
                                      daslicht Community Member

                                      Do you mean the example above ?

                                      • 17. Re: Flex 4 scrollers mouse wheel speed ?
                                        daslicht Community Member

                                        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?

                                        • 18. Re: Flex 4 scrollers mouse wheel speed ?
                                          Flex harUI Adobe Employee

                                          Maybe evt.delta = 1;

                                          • 19. Re: Flex 4 scrollers mouse wheel speed ?
                                            daslicht Community Member

                                            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 

                                            • 20. Re: Flex 4 scrollers mouse wheel speed ?
                                              daslicht Community Member

                                              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

                                              • 21. Re: Flex 4 scrollers mouse wheel speed ?
                                                Ir0nClad

                                                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

                                                • 22. Re: Flex 4 scrollers mouse wheel speed ?
                                                  K-spar Community Member

                                                  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>
                                                  
                                                  • 23. Re: Flex 4 scrollers mouse wheel speed ?
                                                    Amer Bakeer Community Member

                                                    K-spar ,

                                                     

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

                                                    • 24. Re: Flex 4 scrollers mouse wheel speed ?
                                                      Toni-Z

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

                                                      • 25. Re: Flex 4 scrollers mouse wheel speed ?
                                                        Srikanth.Gajula Community Member

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

                                                        • 26. Re: Flex 4 scrollers mouse wheel speed ?
                                                          abc123456@!# Community Member

                                                          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@!#

                                                          • 27. Re: Flex 4 scrollers mouse wheel speed ?
                                                            Mitesh Sharma Community Member

                                                            THANKS A LOT SIR !!!

                                                            • 28. Re: Flex 4 scrollers mouse wheel speed ?
                                                              Valentin Luchko Community Member

                                                              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.

                                                              • 29. Re: Flex 4 scrollers mouse wheel speed ?
                                                                Christian Gotschim Community Member

                                                                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;

                                                                                              }