An example of creating a Drag and Zoom navigation system. Where content loads into one large movieClip that is scaled up and positioned with a mouse click. Also an example of using mouse listeners to provide mouse functionality in the parent movieClip without destroying any button events in loaded content.
I was interested in working multiple button event handling in AS2 as well as creating a drag and zoom navigation system for a website I am currently building. Content can be dragged around in both a scaled down and scaled up state. Content can either center in the screen or be positioned.
To navigate down from a scaled up state, you need to double click. The example also uses custom cursors to provide interface feedback when using mouseListeners, which do not trigger the built in cursor handling in Flash. Content is loaded in via XML and is laid out via either a crude grid making function or pulls in layout information from the XML file.
There are many comments in the actionScript.
Update: 10 Jan, 2007. Major code work over, changed to using tweenLite as there was a subtle bug when using McTween and running two tweens on an object at the same time. I’ve also created a version that has a small floating navigation widget that acts as a meta view of loaded content. You can click this small widget to navigate the content.
Example
View an example here; http://www.noponies.com/dev/slidernav/
View an example with nav widget here; http://www.noponies.com/dev/slidernav/index2.html
Source Files
Here are the source files in CS3 and Flash 8 file formats; Drag Zoom Source Files
Dependencies
AS2 TweenLite class from http://www.tweenlite.com