Solved

zooming in as3

Posted on 2009-05-19
4
1,638 Views
Last Modified: 2012-05-07
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
Comment
Question by:DukeWendel
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
4 Comments
 
LVL 22

Expert Comment

by:rascalpants
ID: 24432042

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
 
LVL 22

Accepted Solution

by:
rascalpants earned 500 total points
ID: 24433566

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
 

Author Closing Comment

by:DukeWendel
ID: 31582970
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
 
LVL 22

Expert Comment

by:rascalpants
ID: 24435246

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

[Webinar] How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Sometimes you know that one object has a specific child in it, but you can't find the child. This happened to me when I was trying to code some actionScript to make a toolbar work with its embedded buttons.  My partner had created the toolbar usi…
The last time I worked with Flash and Socket connections was in AS1. A recent project required flash connecting to a Socket, and sending receiving information - we figured it would be easy enough - we all know about the socket policy documents and c…
The goal of the tutorial is to teach the user how to how to load their YouTube profile onto Flash Media Live Encoder.
The goal of the tutorial is to teach the user how to select which audio input to use. Once you have an audio input plugged into the laptop or computer, you will go into the audio input settings and choose which audio input you want to use.

724 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question