1 Reply Latest reply on Oct 29, 2009 10:28 AM by acath

    Dragging elements with Catalyst

    Pixtur

      Hi,

       

      I want build a prototype for some kind of map application. For this I want to have a Component filling the complete screen and in this Component a larger image of a map. By dragging the image/content in the component, I want to simulate dragging a map similar to google maps.

       

      I tried to use a "Scroll Pane" for this, but couldn't figure out, how to do it correctly.

       

      Any hints? Would something like this be possible with Catalyst?

       

      If yes, I have some more questions...

       

      1. How would it limit the scroll range of the scrollable content?

      2. How could I implement "Flicking" like on the iPhone.

      3. How could I limit the drag-axis to on direction?

      4. How could I override the physical behavior of the dragged elements, e.g. by adding my own AS code?

       

        Best regards,

        tom

        • 1. Re: Dragging elements with Catalyst
          acath Level 4

          Hi Tom,

           

          Unfortunately, the current version of Catalyst can't be of much assistance here. A Scroll Panel is close to what you want, but Scroll Panels have scrollbars, not draggable content. You'll have to do this in Flash Builder.

           

          If you're willing to write some AS code, here are some tips:

           

           

           

          •   Put your scrolling content (the map) inside a Group and set clipAndEnableScrolling="true" on the Group. Set the width and height of the group to the viewable area of the map.

           

          •   Group implements an interface called IViewport, with methods like setHorizontalScrollPosition(). These are the same methods that scrollbars use to interact with a group. You will want to use these methods.

           

          •   Listen for a mouseDown event on the group. When that happens, start listening for a mouseMove event. A mouseDown followed by a mouseMove corresponds to the user dragging your object. Each time you get a mouseMove, compute the delta between the current mouse position and the last one - this is how far the user moved the mouse. You can then change the scroll position of the viewport accordingly.

           

          If you do start doing this in AS, I'd recommend posting questions to the Flex forum - those guys are the experts.

           

          -Adam