February 10th 2008 - Entry Posted to: ActionScript 3

ActionScript 3 version of the Actionscript 2 Drag, Pan Zoom example.

Loaded content can be either bitmap, swf or whatver. SWF’s retain their full interactivity. Simply specify what content you want in the XML file. Loaded content pulls an ID parameter from the XML file which is used for sending messages to particular content instances via custom non mouseEvent events. This is demoed as a commented out line as a means of scaling up the content and shuffling a particular instance of content into the center of the screen.

This is a class based implementation of the AS2 timeline implementation. With that in mind, there are 4 core classes in total, with two supporting classes.

Class Breakdown
LayOut.as
This class does the lions work of this demo. It requires two parameters, an XML file, which is provided by the LoadXML class and an integer to specify how many columns to lay the content out into. This class also acts as a mediator in the event dispatch process between content and draggable area. Class handles panning and zooming of loaded content, along with dragging and laying content out in a grid. Within this class are a number of variables that control how the zooming behaves. This class dispatches two other events to indicate loading of content, and content has all loaded. Currently these events do no have listeners, but the framework is there to hook into, should you want to. Loading Started Event dispatchEvent(new Event(LayOut.STARTED_LOADING)); Loading Finished Event dispatchEvent(new Event(LayOut.FINISHED_LOADING));.

ZoomContent.as
This class dispatches events back to the layout class which handles all zooming and panning. eg; dispatchEvent(new Event(ZoomContent.ACTIVE_CONTENT,true));
This class also handles enabling and disabling mouseChildren for loaded content. I didn’t want interactive content to able to recieve mouseEvents when it is scaled down. This is handled by a simple rollOver function which checks the scale of the parentSprite (pass in via the constructor). Class also dispatches events to custom cursor class.”dispatchEvent(new Event(CustomCursor.MOUSE_SHOW, true));” Generally speaking, this class is simply a container class for loaded in content.

CustomCursor.as
Loads in cursor.swf, which is the cursor asset file, with various cursor states. Only the zoom state is used in this demo. You of course can add access the other three states (finger, drag open hand, drag closed hand), if need be.

ContentEvent.as
Use for passing arguments with your custom events. In this instance it passes one parameter, an String, which represents the ID value of a target content instance. This class is used primarily for dispatching events to particular content instances. For instance, this class can be used to create a menu that shuffles and zooms content around independently of mouse Interactivity.

All classes support a method for killing listeners, each class method is fired when a REMOVED_FROM_STAGE event occurs. This of course can be changed for custom listener removal.

Updates 15 Feb, 2008: Adjusted the grid layout function and made the demo more flexible in terms of media it can load.
22 Feb, 2008: Fix for a double click tweening bug.
12 March, 2008: Better fix for double click bug! & Rounding Math Error.

Example Supports

Mulitple Galleries or content
Draggable content
Click Content to scale up
Double Click to Scale back down
Scale back to defined point, or point before a scale up operation
Auto or XML defined Layout
User defined scale factor
Custom Cursor

Example
Here is an example. http://www.noponies.com/dev/as3_pan_zoom/ (Click content to zoom, double click to scale back)

Source Files
Here are the various support files; ActionScript 3 Drag Zoom XML Loaded Content V1.5

Dependencies
Demo uses http://www.tweenlite.com for scaling, panning and zooming.

35