AS3 - Zoom feature with a movie clip

Can any body tell how to zoom a movie clip like this: http://www.backspace.com/mapapp/

The Fist map on that page, you can zoom a particular region by draging a box around it.

Are there any tutorial or links wh开发者_StackOverflowere this functionality is explained.

Thank you in advance.

The zoom function can be achieved trough the scale property of the MovieClip.

The box drawing can be made with the MouseEvent.MOUSE_DOWN and MouseEvent.MOUSE_UP events.

Here's a very helpful link for drag & drop and draw functionality: http://www.flashandmath.com/basic/dragdroptour/dd_tour2.html

You can draw a box during you move the mouse and when you relese the mouse you rescale the MovieClip to match the box size and reposition it's position with the x and y properties.

simply rescale a vector graphic and reposition it according to the mouseX/mouseY of the display object, or localX/localY of the mouse event. it's really simple. use a Tween engine (like Tweener) to animate the transition.

Say we have a map with the size of 100x100. We also have a county called A sized 20x10 at position 50x10.

To calculate how much needs to be zoomed we take the larger axis of A (20) and the same axis of the map (100). 100 / 20 = 5. The map needs to be zoomed 5 times.

mapMC.scaleX = mapMC.scaleY = 5;

However now we also need to move the map to the right position. The map size is now 5 times bigger (500x500). We now calculate the position of A on the new resized map.

5 * 50 = 250
5 * 10 = 50

Now you move the map to position -250, -50. We need to move it in the negative direction.

mapMC.x = -250;
mapMC.y = -50