Zoom in/out in the gesture area

[maxtriller-wFqTCD]

Hi,

i want to zoom in into a movieclip.

The zoom should zoom in the area where the gesture was taken.

In this moment i scale the movieclip and set the new x and y coordinates by myself.

This one works not as i wish.

Any ideas?

Best regards

[Colin Holgate]

If you're using Flash CS 5.5 you can look at the code snippets for a good start. Here's the code for a pinch and zoom behavior:

/* Pinch to Zoom Event

Pinching the stage will zoom in on the selected object.

Instructions:

1. The symbol's registration and transformation points should be at the center.

2. The symbol should be the background of your application and sized to match the stage.

*/

Multitouch.inputMode = MultitouchInputMode.GESTURE;

stage.addEventListener(TransformGestureEvent.GESTURE_ZOOM, fl_ZoomHandler);

function fl_ZoomHandler(event:TransformGestureEvent):void

{

instance_name_here.scaleX *= event.scaleX;

instance_name_here.scaleY *= event.scaleY;

}

If you mix that with the pan gesture, you get the typical iOS behavior of zooming in and panning around:

/* Pan Event

Pans the selected object on stage. The object to be panned is usually larger than the viewable area.

Instructions:

1. To pan all the objects on stage, place the objects in a single container movie clip and apply this snippet to that movie clip.

*/

Multitouch.inputMode = MultitouchInputMode.GESTURE;

instance_name_here.addEventListener(TransformGestureEvent.GESTURE_PAN, fl_PanHandler);

function fl_PanHandler(event:TransformGestureEvent):void

{

event.currentTarget.x += event.offsetX;

event.currentTarget.y += event.offsetY;

}

The whole code, without the instructions, would look like this:

Multitouch.inputMode = MultitouchInputMode.GESTURE;

instance_name_here.addEventListener(TransformGestureEvent.GESTURE_PAN, fl_PanHandler);

stage.addEventListener(TransformGestureEvent.GESTURE_ZOOM, fl_ZoomHandler);

function fl_PanHandler(event:TransformGestureEvent):void

{

event.currentTarget.x += event.offsetX;

event.currentTarget.y += event.offsetY;

}

function fl_ZoomHandler(event:TransformGestureEvent):void

{

instance_name_here.scaleX *= event.scaleX;

instance_name_here.scaleY *= event.scaleY;

}

There is also a rotate event, though having all three mixed in can get too much!

[maxtriller-wFqTCD]

Thank you,

my registration point was not in the center. That was the problem -.-

[monkey500]

Has anyone tried adding to or modifying the Gesture zoom code? It would be useful is to be able to limit the amount we can zoom on a large background image.

Say we want to pinch to zoom in on a map and then zoom out, the existing code below will make the map background tiny, and we'll see the edges,

which isn't good. Can anyone add a line of code that stops the image getting any smaller at some point? I'm very new to AS3, so I'm just a learner.. Thanks!

ORIGINAL CODE

function fl_ZoomHandler(event:TransformGestureEvent):void

{

map.scaleX *= event.scaleX;

map.scaleY *= event.scaleY;

[monkey500]

Is it possible to set a minimum x and y scale value? I'm guessing this might be the way you do it?

[maxtriller-wFqTCD]

Yes of course it is possible.

function fl_ZoomHandler(event:TransformGestureEvent):void                       
{
     if(map.scaleX*event.scaleX < minimum && map.scaleX*event.scaleY >maximum)
     {}
     else
     {
          map.scaleX *= event.scaleX;
          map.scaleY *= event.scaleY;
     }
}

I hope this will work fine.

[monkey500]

Thanks Max,

I'm not sure if your code was correct (I assume your minimum and maximum need to be replaced with numbers), so I edited it, but the Gesture zoom stopped working completely.

My image has the instance 'map' and it's sized 1080 x 816. I'd like to able to Zoom up (bigger), but not smaller.

Can anyone crack this? This kind of thing will be essential for limiting a panning background as well, or it will scroll forever..

map.addEventListener(TransformGestureEvent.GESTURE_ZOOM , onZoom);

function onZoom(event:TransformGestureEvent):void                      
{
     if(map.scaleX*event.scaleX < 1080 && map.scaleY*event.scaleY <816)
     {}
     else
     {
          map.scaleX *= event.scaleX;
          map.scaleY *= event.scaleY;
     }
}

should there be a line of code after this line, saying 'stop scaling, or no scale etc?'

Thanks,

Matt

[maxtriller-wFqTCD]

Well your code is wrong

function fl_ZoomHandler(event:TransformGestureEvent):void                      
{
     if(map.scaleX*event.scaleX < 1 || map.scaleX*event.scaleX >1.5)
     {}
     else
     {
          map.scaleX *= event.scaleX;
          map.scaleY *= event.scaleY;
     }
}

I am sorry. But i am not on my office computer. There is the working code.

In this example your image can´t get smaller because if the scale value is smaller 1 the image will not zoom.

But you can zoom in 150% . You can change the 1.5 value if yout want (2.0 for 200% ; 3.0 for 300% ; 3.5 for 350%; ....)

I hope this one will work better.

[monkey500]

Thanks Max,

Very Useful. I did a few tests and modified your code. I removed the 'else'

This works! I also changed the registration point to the centre of my image.

The result is this:  I can zoom the image 200%, but it does not scale lower than 100%

map.addEventListener(TransformGestureEvent.GESTURE_ZOOM , onZoom);

function onZoom(event:TransformGestureEvent):void                      
{
     if(map.scaleX*event.scaleX > 1 && map.scaleX*event.scaleX < 2)

     {
          map.scaleX *= event.scaleX;
          map.scaleY *= event.scaleY;
     }
}

Cheers,

Matt

[Applauz78]

I have set my registration point to be center... however its still zooming from topLeft.  Can't wrap my head around this one.  Anyone find a fix ?

[saariko]

@Applauz78

as always, u need a containing sprite.

var zoomable; // your displayobject

var contatiner = new Sprite();

contatiner.x = zoomable.x + zoomable.width/2;

contatiner.y = zoomable.y + zoomable.height/2;

zoomable.x = -zoomable.width/2;

zoomable.y = -zoomable.height/2;

container.addchild(zoomable);

make sure the container listens to the zoom event and scales accordingly and you are good to go.

BTW, for even better UI you can make the zoom center between your two fingers. do this by dynamically changing the container and zoomable's x and y positions according to the middle point between the two touch points

[Applauz78]

Can you look at my code and tell me what to modify ?   I appreciate it!  Ignore my if statements..  was just doing some testing.

---

Multitouch.inputMode = MultitouchInputMode.GESTURE;

stage.addEventListener(TransformGestureEvent.GESTURE_ZOOM, fl_ZoomHandler_2);

function fl_ZoomHandler_2(event:TransformGestureEvent):void

{

           if(bigBox.techChart.scaleX*event.scaleX > .20 && bigBox.techChart.scaleX*event.scaleX < 1)

     {

                      trace("I'M ZOOMING OUT");

          bigBox.techChart.scaleX *= event.scaleX;

          bigBox.techChart.scaleY *= event.scaleY;

                      if(bigBox.techChart.scaleX*event.scaleX > 0.9 && bigBox.techChart.scaleX*event.scaleX < 1){

          trace("IM NORMAL AGAIN");

           }

     }

}

[saariko]

why didn't u use my tip?

var contatiner = new Sprite();

contatiner.x = bigBox.techChart.x + bigBox.techChart.width/2;

contatiner.y = bigBox.techChart.y + bigBox.techChart.height/2;

bigBox.techChart.x = -bigBox.techChart.width/2;

bigBox.techChart.y = -bigBox.techChart.height/2;

container.addchild(bigBox.techChart);

Multitouch.inputMode = MultitouchInputMode.GESTURE;

stage.addEventListener(TransformGestureEvent.GESTURE_ZOOM, fl_ZoomHandler_2);

function fl_ZoomHandler_2(event:TransformGestureEvent):void

{

           if(container.scaleX*event.scaleX > .20 && container.scaleX*event.scaleX < 1)

     {

                      trace("I'M ZOOMING OUT");

          container.scaleX *= event.scaleX;

          container.scaleY *= event.scaleY;

                      if(container.scaleX*event.scaleX > 0.9 && container.scaleX*event.scaleX < 1){

          trace("IM NORMAL AGAIN");

           }

     }

}

[Applauz78]

@Saariko - I tried your method but now there is no zooming occurring at all.

My original code is working .. just the gesture is not occurring between your fingers.   Its zooming topLeft.

I appreciate your help

[rjoshicool]

How can i fix this zooming from center issue when working in Flex instead of Flash?

[Banjolije]

Thank you monkey500. This is what i'm looking for. Does anyone know something about gallery on android over flash? Thanks!

[minu2x]

I have a simpler solution, if I understand what you are saying.

private var MIN_ZOOM:Number = 0.xxx;

private var MAX_ZOOM:Number = 1.xxx;

private function onZoomGesture(e:TransformGestureEvent):void

{

                              viewLayer.scaleX *=  e.scaleX;

                              viewLayer.scaleY *=  e.scaleY;

                              viewLayer.scaleX = Math.max(MIN_ZOOM,viewLayer.scaleX);

                              viewLayer.scaleY = Math.max(MIN_ZOOM,viewLayer.scaleY);

                              viewLayer.scaleX = Math.min(MAX_ZOOM,viewLayer.scaleX);

                              viewLayer.scaleY = Math.min(MAX_ZOOM,viewLayer.scaleY);

}

[WaveSolutions]

Hi I'm using Flash Builder 4.6 and I have the same problem.

I didn't undertood the instructions

Instructions:

1. The symbol's registration and transformation points should be at the center.

2. The symbol should be the background of your application and sized to match the stage.

Can i use the same code on Flash Builder 4.6?

[mola2alex]

Try gestouch, worked great for me.  Free and open source.

https://github.com/fljot/Gestouch

[远方来鹏]

No help

[Colin Holgate]

It was only 14 minutes ago that you posted your question!

You should try gestouch:

https://github.com/fljot/Gestouch

it has a free transform mode that can let you pan, rotate, and scale something all at once.

[远方来鹏]

i want to zoom an image like this way that if i want view some detail of the image i zoom by two fingers and the image zoomed by the center point of my fingers! Like zoom an image on ipad,but the transformgestureevent of the as3.0 can not do this! is here anyone  can help me !and tell my some method to do this!