views:

161

answers:

2

Today I wanted to add mouse-driven zoom and pan functionality to a pure AS3 project - something like the Google Maps interface. I was surprised that I couldn't find a good package or library to do this already - I'm using FlashDevelop rather than Flash CS3, so the nice VCam tool available as an FLA is no use.

There's nothing very complicated involved in implementing zoom/pan, although it can be fiddly and time-consuming to get right, but since zooming and panning are pretty common things to want to do I wondered if anyone could suggest a 'correct' way to do this in the Flash world, or a good library available that I haven't been able to find.

A: 

You could use a 3D library such as Papervision3D or FIVe3D. Then just move you camera based on different mouse events/gestures. Or use the built in z-axis in FlashPlayer 10 to get the zoom effect.

TandemAdam
Papervision3D looks pretty good, but it doesn't tie into the mouse controls as neatly as Flare's PanZoomControl.
Mark
A: 

I found exactly what I was looking for in the flare library's PanZoomControl:

Interactive control for panning and zooming a "camera". Any sprite can be treated as a camera onto its drawing content and display list children. To pan and zoom over a collection of objects, simply add a PanZoomControl for the sprite holding the collection.

var s:Sprite; // a sprite holding a collection of items   
new PanZoomControl().attach(s); // attach pan and zoom controls to the sprite

The mouse controls are also implemented as you'd expect:

Once a PanZoomControl has been created, panning is performed by clicking and dragging. Zooming is performed either by scrolling the mouse wheel or by clicking and dragging vertically while the control key is pressed.

Mark