Question

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.

Answer 1

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.