zooming in as3

The code below zooms on to a movieclip using a slider. The user may move the movie clip after he zoomed to see the part he wishes. My question is how can one make a zoom that zooms in to the point where the mouse is(moving the movieclip)
import fl.events.SliderEvent
zoomer.liveDragging=true
zoomer.addEventListener(SliderEvent.CHANGE,zoomDo)
zoomer.addEventListener(SliderEvent.THUMB_PRESS,centerP)
box.buttonMode=true;
box.addEventListener(MouseEvent.MOUSE_DOWN,startD)
box.addEventListener(MouseEvent.MOUSE_UP,stopD)
function centerP(e:Event)
{
	box.x=551;
	box.y=361;
}
function zoomDo(e:Event)
{	
	box.scaleX=zoomer.value/100
	box.scaleY=zoomer.value/100
}
function startD(e:Event)
{
	e.currentTarget.startDrag();
}
function stopD(e:Event)
{
	e.currentTarget.stopDrag();
}

Open in new window

DukeWendelAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

rascalpantsCommented:

you would find the position of the mouse useing _xmouse and _ymouse, and then you would position the center of the movieclip to that spot...

so something like this should work...


clip.x = mouseX - ( clip.width/2 ) ;
clip.y = mouseY - ( clip.height/2 ) ;


you might need to use box._xmouse and box._ymouse if the above does not work...


rp / ZA

0
rascalpantsCommented:

I created an example app for this question...

here is what I have in my FLA:

- I have a mask layer and under it i have...
- a movieclip named box_mc, that is the same shape as the mask
- a movieclip named map_mc that is much larger than the mask


basically, what happens is if you click anywhere in the masked area (on top of box_mc)  the checkPos function is called.  then we check the mouse position along with the map_mc position to create a shift number.  This is the number of pixels to shift the map_mc based on its location to the stage origin.

Then the code sets the map_mc to the position of where you clicked on it, and makes it the center of the box_mc, or viewable mask area.


if you have questions, let me know.


rp / ZA


// AS 3.0
 
box_mc.addEventListener( MouseEvent.MOUSE_DOWN, checkPos );
 
function checkPos( e:MouseEvent ):void
{
	var shiftX:int = mouseX - map_mc.x; 
	var shiftY:int = mouseY - map_mc.y; 
	
	map_mc.x = ( box_mc.x + (box_mc.width/2) ) - shiftX;
	map_mc.y = ( box_mc.y + (box_mc.height/2) ) - shiftY;
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
DukeWendelAuthor Commented:
Thank you for the solution still not quite sure how to get it to the needed x and y gradually but your answer was good.
0
rascalpantsCommented:

you can tween it there...  use TweenMax:  http://blog.greensock.com/tweenmaxas3/

I really should have thought about adding that in there...  it is a much more elegant solution  ;)


attached is some updated code that uses TweenMax...



rp / ZA


 
// AS 3.0
 
import gs.TweenMax;
import gs.easing.*;
 
 
box_mc.addEventListener( MouseEvent.MOUSE_DOWN, checkPos );
 
function checkPos( e:MouseEvent ):void
{
        var shiftX:int = mouseX - map_mc.x; 
        var shiftY:int = mouseY - map_mc.y; 
        
        var newX:int = ( box_mc.x + (box_mc.width/2) ) - shiftX;
        var newY:int = ( box_mc.y + (box_mc.height/2) ) - shiftY;
      
        TweenMax.to( map_mc, .5, { x: newX, y: newY } );
}

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Adobe Flash

From novice to tech pro — start learning today.