Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1651
  • Last Modified:

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

0
DukeWendel
Asked:
DukeWendel
  • 3
1 Solution
 
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
 
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

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now