Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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;
}
stage.addEventListener(TransformGestureEvent.GESTURE_ZOOM, fl_ZoomHandler);
{
instance_name_here.scaleX *= event.scaleX;
instance_name_here.scaleY *= event.scaleY;
}
Copy link to clipboard
Copied
Thank you,
my registration point was not in the center. That was the problem -.-
Copy link to clipboard
Copied
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;
Copy link to clipboard
Copied
Is it possible to set a minimum x and y scale value? I'm guessing this might be the way you do it?
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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 ?
Copy link to clipboard
Copied
@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
Copy link to clipboard
Copied
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");
}
}
}
Copy link to clipboard
Copied
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");
}
}
}
Copy link to clipboard
Copied
@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
Copy link to clipboard
Copied
How can i fix this zooming from center issue when working in Flex instead of Flash?
Copy link to clipboard
Copied
Thank you monkey500. This is what i'm looking for. Does anyone know something about gallery on android over flash? Thanks!
Copy link to clipboard
Copied
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);
}
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
Try gestouch, worked great for me. Free and open source.
Copy link to clipboard
Copied
No help
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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!