dcsimg
A Flash Developer Resource Site

Results 1 to 17 of 17

Thread: Zoom in to Mouse Position

  1. #1
    Senior Member
    Join Date
    Jul 2007
    Posts
    243

    Zoom in to Mouse Position

    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

  2. #2
    trace("AKA: Biro Barna");
    Join Date
    Oct 2007
    Location
    RO.Timişoara
    Posts
    1,403
    You may find tutorials for this but on AS 2.0 ... try playing around with scaleX and scaleY ...



    | Windows MSN: birobarna [at] hotmail [dot] com | Skype: barna.biro |
    WebLog: http://blog.wisebisoft.com/ |
    | Software Developer / Flash & Flex Developer | Student ( Computer Science ) | Interested in: Sharing Knowledge |
    |
    Romanian Adobe Flash, Flex, AIR Forum: http://www.flashforum.ro/
    | By perseverance the snail reached the ark. |


  3. #3
    Senior Member
    Join Date
    Jul 2007
    Posts
    243
    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?

  4. #4
    Senior Member
    Join Date
    Jul 2007
    Posts
    243
    still having trouble solving this one, anyone know of a decent tutuorial for it or have any advice?
    thanks
    dan

  5. #5
    Member
    Join Date
    Nov 2007
    Posts
    67
    please view the following webpage it might be of some help:
    http://www.flepstudio.org/forum/flep...navigator.html

  6. #6
    Senior Member
    Join Date
    Jul 2007
    Posts
    243
    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

  7. #7
    Bearded (M|G)od MyFriendIsATaco's Avatar
    Join Date
    Dec 2002
    Location
    Awesomeville.
    Posts
    3,046
    Check out this little bit of code I threw together:
    Code:
    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.
    Last edited by MyFriendIsATaco; 12-27-2007 at 03:56 PM.

  8. #8
    Senior Member
    Join Date
    Jul 2007
    Posts
    243
    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
    Last edited by danhodkinson; 12-27-2007 at 06:43 PM.

  9. #9
    Senior Member
    Join Date
    Jul 2007
    Posts
    243
    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

  10. #10
    Senior Member
    Join Date
    Jul 2007
    Posts
    243
    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
    Last edited by danhodkinson; 12-27-2007 at 08:53 PM.

  11. #11
    Bearded (M|G)od MyFriendIsATaco's Avatar
    Join Date
    Dec 2002
    Location
    Awesomeville.
    Posts
    3,046
    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.

  12. #12
    Senior Member
    Join Date
    Jul 2007
    Posts
    243
    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

  13. #13
    Bearded (M|G)od MyFriendIsATaco's Avatar
    Join Date
    Dec 2002
    Location
    Awesomeville.
    Posts
    3,046
    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.

  14. #14
    Senior Member
    Join Date
    Jul 2007
    Posts
    243
    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

  15. #15
    Junior Member
    Join Date
    Jul 2009
    Posts
    2
    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>

  16. #16
    Junior Member
    Join Date
    Jul 2009
    Posts
    2

    Thumbs up

    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

  17. #17
    Junior Member
    Join Date
    Sep 2009
    Posts
    1
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center