2 Replies Latest reply on Nov 15, 2011 3:29 PM by pcoyne1979

    Strange behavior with scroller,  zoom in/zoom out and Pan

    Antoine Barrau

      hi,

      i'm currently developping a mobile application, and i have hard work with zoom/pan development.

       

      I'm using a simple scroller containing and image (see code at the end), and capture gestureZoom and gesturePan.

      My problem is that when i zoom in, pan the image and then zoom out, it goes of the viewport. I tried to capture effectEnd event to reposition scroller and image dynamically, but it does'nt work (in fact it work, but the scroller goes back mysteriously to its previous position after forcing the scrollPosition to 0).

       

      Does anybody have a solution, or can tell me what i'm doing wrong?

      Thanks

       

      Antoine

       

       

           scroller

      <s:Scroller id="scroller" verticalScrollPolicy="on" horizontalScrollPolicy="on" width="1024" maxWidth="1024" height="768" maxHeight="1024" x="0" y="-50">

              <s:Group id="imageGroup"  top="0" left="0" gesturePan="handlePan(event)" gestureZoom="handleGestureZoom(event)">

                  <s:Image id="image"  source="{myModel.currentConfig.photosArray.getItemAt(data as int)}" width="1024" height="768" top="0" left="0"/>

              </s:Group>

      </s:Scroller>

           handler

      private function handleGestureZoom(evt:TransformGestureEvent):void {

                     

                      if ((evt.scaleX<1)&&(evt.scaleY<1)) {

                          if (imageGroup.scaleX>1) {

                             

                              //Zoom out

                              imageGroup.x = imageGroup.y = 0;

                              scroller.verticalScrollBar.value=0;

                              scroller.horizontalScrollBar.value=0;

                             

                              var scale:Scale = new Scale(imageGroup);

                              scale.autoCenterTransform = true;

                              scale.scaleXTo = 1;

                              scale.scaleYTo = 1;

                              scale.play();

                              scale.addEventListener(EffectEvent.EFFECT_END, handleEndReduction);

                          } else {

                              imageGroup.scaleX = imageGroup.scaleY = 1;

                          }

                         

                      } else if ((evt.scaleX>1) && (evt.scaleY>1)){

                          //Zoom in

                          if (imageGroup.scaleX<2) {

                              var scale:Scale = new Scale(imageGroup);

                              scale.autoCenterTransform = true;

                              scale.scaleXTo = 2;

                              scale.scaleYTo = 2;

                              scale.play();

                          } else {

                              imageGroup.scaleX = imageGroup.scaleY = 2;

                          }

                      }

                     

                  }

                 

                  private function handleEndReduction(evt:Event):void {

                      (evt.target as Scale).removeEventListener(EffectEvent.EFFECT_END,handleEndReduction);

                      scroller.validateNow();

                      callLater(repositionScroll);

                  }

                 

                  private function repositionScroll():void {

                     

                      imageGroup.x = imageGroup.y = 0;

                      scroller.verticalScrollBar.viewport.verticalScrollPosition=0;

                      scroller.horizontalScrollBar.viewport.horizontalScrollPosition=0;

                  }

                 

                  private function handlePan(evt:TransformGestureEvent):void {

                     

                      imageGroup.y += evt.offsetY;

                      imageGroup.x += evt.offsetX;

                  }