Solved

zooming in as3

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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Recently, I was asked to recommend a tracking system to be implemented on a clients website. As the entire site was built on flash, my first thought was to suggest custom built tracking system. However, our company at that point of time didn't h…
I have been doing hardcore actionscripting for some time; and needless to say I have faced a lot of problems in just understanding others' code rather than understanding what the code executes. A programmer's life can become hell when there are a lo…
The goal of the tutorial is to teach the user how to how to record live broadcast.
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.

708 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now