Zoom in to Mouse Position

[danhodkinson]

i am trying to create a function that when you click takes the x & y co-ordinates of the mouse position and either zooms or scales in at that place.
i have looked around for ages but cant seem to find anything in AS3 that could help me, does anybody know of a tutorial or some existing code i could study?
thanks
Dan

[fx.barrett]

You may find tutorials for this but on AS 2.0 ... try playing around with scaleX and scaleY ...

[danhodkinson]

i have a button where it zooms in and it is increasing the width and then keeping the scale x and y in proportion but i would like to zoom in on co-ordinates passed to it from the mouse, would it be to do with mouseX.scaleX and mouseY.scaleY?

[danhodkinson]

still having trouble solving this one, anyone know of a decent tutuorial for it or have any advice?
thanks
dan

[arsenik]

please view the following webpage it might be of some help:
http://www.flepstudio.org/forum/flep...navigator.html

[danhodkinson]

thanks arsenik thats a useful utility, however i still want to be able to zoom in like you can on most things. by clicking a zoom button which activates a pointer and then when the user clicks on a section it takes the x and y co-ordinates of the mouse and zooms into those co-ordinates.
the right-click zoom you can do in an swf is the effect im after, but i have hunted high and low and can't find any tutorials or as3 code to study.
thanks

[MyFriendIsATaco]

Check out this little bit of code I threw together:

import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;
import fl.motion.MatrixTransformer;

const TWEEN_IN:String = "tweenIn";
const TWEEN_OUT:String = "tweenOut";
var tweenDirection:String;

var internalPoint:Point;
var externalPoint:Point;
var tw:Tween;

var square:Sprite = new Sprite();
square.graphics.beginFill(0xFF0000);
square.graphics.drawRect(0, 0, 100, 100);

square.x = stage.stageWidth/2 - square.width/2;
square.y = stage.stageHeight/2 - square.height/2;

addChild(square);

square.addEventListener(MouseEvent.CLICK, zoomIn);

function zoomIn($e:MouseEvent):void
{
	square.removeEventListener(MouseEvent.CLICK, zoomIn);
	
	internalPoint = new Point(square.mouseX, square.mouseY);
	externalPoint = new Point(stage.mouseX, stage.mouseY);
	
	var marker:Sprite = new Sprite();
	marker.graphics.beginFill(0);
	marker.graphics.drawCircle(0, 0, 5);
	marker.x = internalPoint.x;
	marker.y = internalPoint.y;
	marker.name = "marker";
	
	square.addChild(marker);
	
	tweenDirection = TWEEN_IN;
	
	tw = new Tween(null, "", Elastic.easeOut, square.scaleX, 4, 1, true);
	tw.addEventListener(TweenEvent.MOTION_CHANGE, _syncScale);
	tw.addEventListener(TweenEvent.MOTION_FINISH, _cleanTween);
}

function _syncScale($e:TweenEvent):void
{
	square.scaleX = square.scaleY = tw.position;
	
	var matrix:Matrix = square.transform.matrix;
	
	MatrixTransformer.matchInternalPointWithExternal(matrix, internalPoint, externalPoint);
	
	square.transform.matrix = matrix;
}

function _cleanTween($e:TweenEvent):void
{
	tw.removeEventListener(TweenEvent.MOTION_CHANGE, _syncScale);
	tw.removeEventListener(TweenEvent.MOTION_FINISH, _cleanTween);
	
	tw = null;
	
	if(tweenDirection == TWEEN_IN)
		stage.addEventListener(MouseEvent.CLICK, zoomOut);
	else if(tweenDirection == TWEEN_OUT)
		square.addEventListener(MouseEvent.CLICK, zoomIn);
}

function zoomOut($e:MouseEvent):void
{
	stage.removeEventListener(MouseEvent.CLICK, zoomOut);
	
	externalPoint = square.localToGlobal(internalPoint);
	internalPoint = square.globalToLocal(externalPoint);
	
	square.removeChild(square.getChildByName("marker"));
	
	tweenDirection = TWEEN_OUT;
	
	tw = new Tween(null, "", Strong.easeOut, square.scaleX, 1, 1, true);
	tw.addEventListener(TweenEvent.MOTION_CHANGE, _syncScale);
	tw.addEventListener(TweenEvent.MOTION_FINISH, _cleanTween);
}

It should at least point you in the right direction.

[danhodkinson]

do you have the fla or swf of this so i can see it in action?
thanks
dan

edit..no worries ive seen it now

[danhodkinson]

taco that code is brilliant, it has really helped me to understand what has to happen. i am having a problem with one part..i am using the zoom inside a movieclip and when i do this it zooms slightly out of where i click, whereas if i have it clicking on the stage it zooms exactly where i click. any ideas why?
thanks

[danhodkinson]

taco that code is brilliant, it has really helped me to understand what has to happen. i am having a problem with one part..i am using the zoom inside a movieclip and when i do this it zooms slightly out of where i click, whereas if i have it clicking on the stage it zooms exactly where i click. any ideas why?
thanks

edit..managed to get it to zoom in on the right place when its inside a movieclip but when it zooms out it doesnt put it in its original position.
edit again...sorted now

[MyFriendIsATaco]

Haha, glad you got it all sorted out. It's a tricky little thing, but once you understand what's going on, it all makes sense.

[danhodkinson]

yeah it does, the one thing i would like to do is add a duration to the tween as on my other computer i tested it on it struggles to keep up so if i made the zoom over a couple seconds i think that would help it out, i have seen it used somewhere so i'll look into it.
dan

[MyFriendIsATaco]

to modify the duration, just play with this line:

tw = new Tween(null, "", Elastic.easeOut, square.scaleX, 4, 1, true);

the third parameter is the easing function, and the sixth is the duration. In this case, 1 second.

[danhodkinson]

thanks Taco, i had noticed it in the flash help just before you replied yesterday.
what i'm attempting to do now is:
1. have 2 buttons - one to zoom in, one to zoom out
2. user click the zoom in button, they click on screen and it zooms in
3. user clicks the zoom out button, they click on screen and it zooms out

i have got it so you click on the zoom in button, but i cannot figure out how to then have it so you click a button and then click and it zooms out, i think it may be an if function but i am unsure how to use an if function to find out which button has been pressed?
any help
thanks
Dan

[mayurthakor]

Hello Every one...specially to MyfriendisaTaco

Thnx for the code given above. I am trying to achieve the same thing herein Flex 3.0.

I have used zoom here and trying to zoom a canvas. My code is given below. Problem is i am unable to call the "syncUpdate" with zoom..Please tell me where am i wrong.


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
import mx.events.TweenEvent;
import mx.effects.effectClasses.ZoomInstance;
import motion.MatrixTransformer;

private var internalPoint : Point;
private var externalPoint : Point;

private function onButtonClick(event:MouseEvent) : void
{
internalPoint = new Point(mainCanvas.mouseX, mainCanvas.mouseY);
externalPoint = new Point(Application.application.mouseX, Application.application.mouseY);

var marker:UIComponent = new UIComponent();
marker.graphics.beginFill(0);
marker.graphics.drawCircle(0, 0, 5);
marker.x = internalPoint.x;
marker.y = internalPoint.y;
marker.name = "marker";

mainCanvas.addChild(marker);
zoomData.target = mainCanvas;
zoomData.zoomHeightTo = 3;
zoomData.zoomWidthTo = 3;
zoomData.play();
}

private function syncUpdate(event:TweenEvent):void
{
trace(mainCanvas.scaleX.toString());

mainCanvas.scaleX = event.value[0];
mainCanvas.scaleY = event.value[0];

var matrix:Matrix = mainCanvas.transform.matrix;
MatrixTransformer.matchInternalPointWithExternal(m atrix, internalPoint, externalPoint);
mainCanvas.transform.matrix = matrix;
}

]]>
</mx:Script>
<mx:Zoom id="zoomData" tweenUpdate="syncUpdate(event)" />
<mx:VBox height="600" width="1000" verticalAlign="middle" horizontalAlign="center">
<mx:Canvas id="mainCanvas" height="200" width="200" borderColor="0xffff45" borderStyle="solid" borderThickness="2" mouseDown="onButtonClick(event)" />
</mx:VBox>
</mx:Application>

[mayurthakor]

Hi to All,

Well just after one i post the above post, I managed to solve the problem and got the same zoom effect for my application.

Anyone, if trying to achieve the same thing in flex and wants a reference of the same...then just ask me. Happy to help.

chao

[willdotadams]

Hi All,

MyFriendIsATaco, I was looking for something that does pretty much exactly what the code you posted does. although I'm struggling a bit to understand exactly how it works.

I'm trying to use the zoom out only as I want my mc to zoom in to a specific position. I was wondering whether there is a change I can make to the code you posted so I can zoom the mc in to a specific position and then zoom it out again relative to where the mouse is positioned.

Thanks,

Will