Solved

zooming in as3

Posted on 2009-05-19
4
1,631 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
  • 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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
adobe product that creates checks to sales people for bringing sales 5 387
Flash player plugin 13 7 331
Youtube video error 30 772
How to block online streaming via TMG2010 ? 2 132
I know the transition can be hard. We got used to the ease of use ActionScript 2 had, but honestly, it became problematic later on, especially if designers were involved in the project and found it easy to add code as they saw fit. So, this artic…
Here are some practices and techniques that can be adopted into your Flash/Flex application development process. Note: Not all "performance tips" provide an immediately-recognizable benefit.   This article does not include timing validation data,…
In this tutorial viewers will learn how to create a basic motion tween animation in Flash Open a new document in Flash: Draw/import an image: Press CTRL + F8 to convert it into a graphic symbol: Select a frame (how long you want the tween to last): …
The goal of the tutorial is to teach the user how to select the video input device. Make sure you have an input device that in connected and work and recognized by Adobe Flash Media Live Encoder and select it in the “video input” menu.

770 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