Skip to main content
Known Participant
November 1, 2011
Question

Simultaneous Zoom, Pan & Rotate (TransformGestureEvent)

  • November 1, 2011
  • 1 reply
  • 4502 views

It seems to me that air is not capable of responding to more than one gesture event at a time. Running an app on ios I find if I place two fingers onto an object and scale using a pinch gesture I cannot then pan without lifting my fingers from the screen to end the zoom gesture and then placing them back on the screen and performing a pan gesture. This is a bit clunky and not really what users would expect.

Ideally I would like to be able to place two fingers onto the screen and then scale, pan and rotate without having to lift my fingers from the screen. Anyone know if this is possible?

This topic has been closed for replies.

1 reply

markc888
Inspiring
November 2, 2011

The trick here is to use the Zoom and Rotate Gestures along with a startDrag/stopDrag.


import flash.events.GestureEvent;

import flash.events.TransformGestureEvent;

import flash.events.TouchEvent;

//this is only required if you want to limit the draggable area of the item

private var theDragItem:*;

//itemToMove would be your symbol name

itemToMove.addEventListener(MouseEvent.MOUSE_DOWN, fl_StartDrag, false, 0, true);

itemToMove.addEventListener(MouseEvent.MOUSE_UP, fl_StopDrag, false, 0, true);

itemToMove.addEventListener(TransformGestureEvent.GESTURE_ZOOM, fl_ZoomHandler, false, 0, true);

itemToMove.addEventListener(TransformGestureEvent.GESTURE_ROTATE, fl_RotateHandler, false, 0, true);

Multitouch.inputMode = MultitouchInputMode.GESTURE;

//PINCH TO ZOOM

function fl_ZoomHandler(e:TransformGestureEvent):void

{

          e.target.scaleX *= e.scaleX;

          e.target.scaleY *= e.scaleY;

}

//ROTATING

function fl_RotateHandler(e:TransformGestureEvent):void

{

          e.target.rotation += e.rotation;

}

//DRAG

function fl_StartDrag(e:MouseEvent):void

{

          e.currentTarget.startDrag(false);

          theDragItem = e.currentTarget;

//optional

          stage.addEventListener(Event.ENTER_FRAME, testMouseLocation, false, 0, true);     

}

private function testMouseLocation(e:Event):void{

//optional... this is to limit the area that the item can be moved within.

          if (stage.mouseX < 80 || stage.mouseX > 620 || stage.mouseY < 280 || stage.mouseY > 470) {

                    theDragItem.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_UP));

                    stage.removeEventListener(Event.ENTER_FRAME, testMouseLocation);       

    }

}

function fl_StopDrag(e:MouseEvent):void

{

          e.currentTarget.stopDrag();

}

timdiaconAuthor
Known Participant
November 3, 2011

Are you saying that zoom and pan are capable of being detected at the same time but pan is not?

markc888
Inspiring
November 3, 2011

No, not nesessarily. I'm just giving you a usable example of how you could implement the functionality it looks like you're after.