how to pinch zoom picture from point of gesture as3 - actionscript-3

Question

I create an image object and I was able to enlarge .
but images can only be in view of the center of the image .
so how I can enlarge the image of the point of the gesture ??
picture.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);
function onZoom(e:TransformGestureEvent){
picture.scaleX *= (e.scaleX+e.scaleY)/2;
picture.scaleY *= (e.scaleX+e.scaleY)/2;
}

Answer 1

Try this...
import flash.events.TransformGestureEvent;
import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;
import fl.motion.MatrixTransformer;
Multitouch.inputMode = MultitouchInputMode.GESTURE;
stage.addEventListener(TransformGestureEvent.GESTURE_ZOOM , onZoom);
function onZoom(event:TransformGestureEvent):void
{
//trace(e.localX);
var locX:Number=event.localX;
var locY:Number=event.localY;
var stX:Number=event.stageX;
var stY:Number=event.stageY;
var prevScaleX:Number=gambar.scaleX;
var prevScaleY:Number=gambar.scaleY;
var mat:Matrix;
var externalPoint=new Point(stX,stY);
var internalPoint=new Point(locX,locY);
gambar.scaleX *= event.scaleX;
gambar.scaleY *= event.scaleY;
if(event.scaleX > 1 && gambar.scaleX > 6){
gambar.scaleX=prevScaleX;
gambar.scaleY=prevScaleY;
}
if(event.scaleY > 1 && gambar.scaleY > 6){
gambar.scaleX=prevScaleX;
gambar.scaleY=prevScaleY;
}
if(event.scaleX < 1.1 && gambar.scaleX < 1){
gambar.scaleX=prevScaleX;
gambar.scaleY=prevScaleY;
}
if(event.scaleY < 1.1 && gambar.scaleY < 1){
gambar.scaleX=prevScaleX;
gambar.scaleY=prevScaleY;
}
mat=gambar.transform.matrix.clone();
MatrixTransformer.matchInternalPointWithExternal(mat,internalPoint,externalPoint);
gambar.transform.matrix=mat;
}
gambar.addEventListener(MouseEvent.MOUSE_DOWN, f_begin);
gambar.addEventListener(MouseEvent.MOUSE_UP, f_end);
function f_begin(e:MouseEvent):void
{
gambar.startDrag();
}
function f_end(e:MouseEvent):void
{
gambar.stopDrag();
}
btw your pic is so cute.. :D

Answer 2

Welcome to StackOverflow. I don't usually work with touch events, as I develop software for desktop, not mobile. However, I do have an idea. I'm not going to venture with code, because without any experience writing touch-related event listeners, I'd probably get something wrong. However, I'm pretty confident that the method will work.
For each event in AS3, there is quite a bit of data about it, as you know. One piece of data generally present on mouse- and touch-related events is location - where on the screen or the object the touch occurred.
I would recommend using this data to adjust the location of the picture on the screen, by using the coordinates of the touch event as the new "center" of the view.
Again, I have no code to offer, because I've never written a touch-related event listener before (I'm always working with mouse and keyboard events.) However, I will venture that the likely source of this information, if touch is anything like the mouse, would be found in the e.x and e.y properties within your onZoom function.
I would also venture to say that you could calculate the new position of your picture with an algorithm something like what follows. I'm assuming the picture's registration point is upper left. [THIS IS NOT CODE]
w=picture width
h=picture height
x=picture x position on stage
y = picture y position on stage
tx=touch event x on stage
ty=touch event y) on stage
x = (w/2) - tx
y = (h/2) - ty
Hope this helps!
EDIT: To access the x, y, w, and h on the picture named "picture", simply use the properties picture.x, picture.y, picture.width, and picture.height as your variables.
One other caveat...the x and y on the EVENT may be on the stage, or on the object itself. You'll want to use trace statements and some common sense to figure this out, and may require some more complex math. I don't want to give you TOO much, though, as this is coursework, like you said.

Answer 3

Have a look at GesTouch, it's a great library for touch action
Gestouch Library
Gestouch Examples