1 Reply Latest reply on Nov 7, 2010 10:31 PM by Shongrunden

    Scrolling with the mouse

    dillydadally

      Hi, I was wondering if someone could give me some pointers to get started with a personal project.  My app is going to be much larger than the screen size.  Instead of having the user use scrollbars to scroll around the app, I was hoping to make it so the screen would scroll in the direction of the mouse cursor automatically if the user places his mouse cursor near the edge of the window.  The scrolling would only happen if you were near the edge of the window (2 1/2 inches) and would increase in speed the closer you got to the edge of the screen.

       

      Would anyone mind giving me some pointers as to where to start?  What properties and objects should I use?

       

      Thanks for your help!

        • 1. Re: Scrolling with the mouse
          Shongrunden Adobe Employee

          Here is a very primitive sample that should get you started:

           

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

                         xmlns:s="library://ns.adobe.com/flex/spark" creationComplete="init()">

              <fx:Script>

                  <![CDATA[

                      protected function init():void {

                          viewport.addEventListener("mouseMove", handle);

                      }

           

                      private function handle(e:MouseEvent):void {

                          viewport.horizontalScrollPosition++;

                      }

                  ]]>

              </fx:Script>

           

              <s:Group>

                  <s:Rect width="100%" height="100%">

                      <s:fill>

                          <s:SolidColor color="red" />

                      </s:fill>

                  </s:Rect>

           

                  <s:Group id="viewport" clipAndEnableScrolling="true" width="400" height="200">

                      <s:Button label="large content 1" />

                      <s:Button x="500" label="large content 2" />

                      <s:Button x="1000" label="large content 3" />

                  </s:Group>

              </s:Group>

           

          </s:Application>

           

          This demonstrates how to listen for mouse move events on a container and how to change the scroll position of that container.  From here you will want to be smarter about which direction to scroll and by how much.