3 Replies Latest reply on Nov 26, 2010 1:25 PM by Shongrunden

    Smooth <s:Scroller> Component in Flex4

    Francesco_C

      Hi at all,

       

      can i create a smooth <s:Scroller> component in Flex4?

      I would like moving the thumb movement was smooth.

       

      <s:Scroller width="80%" height="80%"
                      horizontalCenter="0" verticalCenter="0">       
              <local:Dummy id="dummy"
                       clipAndEnableScrolling="true" />
          </s:Scroller>

       

      Dummy components contains an Image 2000x2000px

       

      Thanks

        • 1. Re: Smooth <s:Scroller> Component in Flex4
          Shongrunden Adobe Employee

          When you say "smooth" do you mean you want to animate the scrollbars?

           

          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                         xmlns:s="library://ns.adobe.com/flex/spark">

              <fx:Declarations>
                  <s:Animate id="myAnimate" target="{scroller.viewport}">
                      <s:SimpleMotionPath property="verticalScrollPosition" valueBy="100" />
                      <s:SimpleMotionPath property="horizontalScrollPosition" valueBy="100" />
                  </s:Animate>
              </fx:Declarations>

              <s:controlBarContent>
                  <s:Button label="scroll" click="myAnimate.play()" />
              </s:controlBarContent>

              <s:Scroller id="scroller" width="300" height="300">
                  <s:Group>
                      <s:Button label="large button" width="1200" height="1200" />    
                  </s:Group>
              </s:Scroller>
              
          </s:Application>
          1 person found this helpful
          • 2. Re: Smooth <s:Scroller> Component in Flex4
            Francesco_C Level 1

            Thanks for your reply.

            Not exactly, moving the thumbs  to move the vieport content.. like this:

             

             

             

            scroller.addEventListener(ScrollEvent.SCROLL, scrollHandler, true);

             

            private function scrollHandler(e:ScrollEvent):void
                    {
                        e.stopImmediatePropagation();
                        switch (e.direction) {
                            case ScrollBarDirection.HORIZONTAL:
                                TweenMax.to(scroller.viewport, .5, {horizontalScrollPosition:e.position*-1});
                            break;
                           
                            case ScrollBarDirection.VERTICAL:
                                TweenMax.to(scroller.viewport, .5, {verticalScrollPosition:e.position*-1});
                            break;
                        }
                    }

             

             

            but scroller dont't dispacth SCROLL event when i move the tracks!!

            • 3. Re: Smooth <s:Scroller> Component in Flex4
              Shongrunden Adobe Employee

              The viewport's layout dispatches events when the scroll position changes, you might want to try listening for those events.  There is an example here: http://forums.adobe.com/message/2872718