10/23/2010

Zoom To Point

There were several solutions to zoom into a specified point found online. However, few of them take into account the position (x,y) of the object. I had no idea where to make the necessary adjustments so I decided to try myself starting from scratch.

The concept is pretty simple. When zooming by increasing/decreasing the scaleX and scaleY of the object, Flash does it around the registration point (0,0) of the object. Since we can't really change the registration point, we'll have to simulate it by moving the object around the registration point instead. It can done with transform matrices but we'll take the "easier" to understand way - by putting the object in another container. All transformations will be done on the container and we can change the registration point by moving the object inside the container. The critical step is to reposition the container and its contents so that the container's xy are at the registration point we want.

Here is the reposition function where zoomPt is a point on stage: function reposition():void{ var changex:Number=(container.x-zoomPt.x)/container.scaleX; var changey:Number=(container.y-zoomPt.y)/container.scaleX; container.x=zoomPt.x; container.y=zoomPt.y; for(var i:int=0;i<container.numChildren;i++){ container.getChildAt(i).x+=changex; container.getChildAt(i).y+=changey; } } And here it is in action + source (uses TweenLite)
press Arrow keys to move image
press W to zoom in
press S to zoom out
click to change registration point (red cross)
green X is position of container

2 comments:

  1. You didn't include the classes you use >_>

    ReplyDelete
  2. you can get TweenLite from http://www.greensock.com/tweenlite/

    ReplyDelete