[AS2] Drag - Pan - Click to Zoom XML Content


An example of creating a Drag and Click to Zoom navigation system. Where content loads into one large movieClip that is scaled up and positioned with a mouse click. It uses mouse listeners to provide mouse functionality in the parent movieClip without destroying any button events in loaded content. I was interested in working out 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. The example also uses custom cursors to provide interface feedback when using mouseListeners, which do not trigger the built in cursor handling in Flash. The custom cursors only run when the content is scaled down. I turn them off when the content is scaled up to allow for interaction with the externally loaded swfs etc.

Updated 10 Jan, 2007: Bug fixes, shift to using tweenlite for all tweening. I found a subtle bug with mcTween when two tweens were operating on one object at the same time. Also implemented a navigation widget version, where a small widget mimics the layout of the main content. Main content can be navigated via this widget.

To scale down from a scaled up state, you need to double click.

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.

You can have a look at the file here: http://www.noponies.com/dev/slidernav/

**And get the source files here: **Source Files (Flash 8, Flash CS3)

Requires TweenLite http://www.tweenlite.com

I built it for specific purpose, but there may be stuff that is useful in there for everyone else. Hopefully there are enough comments in the script for you to make any edits. Let me know if its rubbish etc…