ActionScript 3 Drag, Zoom, Pan XML Content
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.
February 20th, 2008 at 8:04 am
Hey Dail … slowly getting to grips with this !! was wondering a couple of things:
when loading in the xml content how would I go about aligning it to the centre ?? rather than it loading in aligned to the top left ??
was wondering if there is anyway the zoomed content could come to rest at a percentage of the browser page height / width !! this would allow it to be used on any screen resolution !!
also there seems to be a small glitch – if for example you click to zoom the content and whilst it is in the process of zooming in click your mouse again it knocks the content out of alignment – the same thing happens if you do this when content is zooming out !! basically if you accidently triple click instead of double clicking at any point it can cause this to happen sometimes resulting in content zapping completely of the stage! just wondering if you can think of anyway of overcoming this.
cheers mun !!
February 20th, 2008 at 1:50 pm
Ok, that glitch is can be fixed by disabling the mouse event listeners when the content is scaling. I’ll add the change in over the next day or so.
When it loads, and when all content has loaded, tween the content holder clip to the center of the screen.
As for the percentage of the screen, that would be doable, you would just have to change the logic in the scaling tweens.
February 20th, 2008 at 4:07 pm
sorry mun .. not to sure how to go about tweening the content holder clip .. any pointers would be much appreciated !!
February 21st, 2008 at 11:20 am
Monkey,
That triple click bug should be fixed in the latest version, 1.3. I simply added a flag to track if the content is currently scaling, if it is, we let the content finish its tween before starting any new ones.
February 21st, 2008 at 5:36 pm
nice one !!
February 22nd, 2008 at 2:04 am
this is really interesting demo you have here. suberb idea & work.
im finding a great introduction for me into dabbling with classes in as3 as i just started getting my 3.0 thimbs dirty
i find the navigation of that schematic intresting also ( like yourself and everyone else
) and i was doing research for discussions about it when i landed here in one of your topics where it was mentioned.
lemme ask your opinion about somethings
as for schematic’s site, does flash 9 need to cache stuff as bitmap to keep the performance up?
also
you had said that you started in mctween2 and moved to tweenlite correct? does this tweenlite thing do the better performance wise or ease of code wise? i always thought that the tweener was next in line when flipping to as3 tweening
great work though. im gonna fiddle aroound your code a bit more. im thinking about trying to implement cursor navigation to browse the content and add some to your xml’s maybe add some pics and text with css styling to push it further
great work.. thanks for sharing your research & demo
M
February 22nd, 2008 at 12:54 pm
I would imagine that using bitmaps would improve performance if you have many many objects that you are panning around. The schematic site is a little different in that they load in low res bitmap representations of each of their content items, then when requested load in the actual swf/high quality content data. Doing this will increase performance, but require a whole new level of logic etc that is not present in my example. Pretty easy to add however.
I switched to tweenlite because it lets you include all the params you want to tween in one object, for say tweening scale and position. Where as mcTween makes you write them as consecutive objects, where you first tween scale, then position. McTween was also giving me math errors when the content was being repositioned. In the end I used Tweenlite, because it had no errors, plus its a smaller file size, its the fastest tween engine and Jack at greenstock is great. Also, mcTween is AS2 only.
March 12th, 2008 at 4:25 am
Nice one, just tried it out real quickly, seems solid! Thanks for sharing your stuff. Rspct.
April 22nd, 2008 at 8:13 am
I like the demo. Thanks for sharing your coder. I have one quick question for you. I have been having trouble getting the drag closed hand curse to show. If it’s not too much trouble could you show me how you did it?
April 22nd, 2008 at 12:22 pm
LFNT,
You will have to add in a new event to dispatch on MouseDown to the customCursor class. I’d add it in the LayOut class, within each mouseDown and MouseUP handler, dispatching the appropriate event within each handler.
Or you could write a public function within the customCursor class, that can handle moving the cursor timeline along to the correct frame.
public function mouseStates(frame:int):void {
cursor.visible=true;
Mouse.hide();
cursor.gotoAndStop(frame)
}
Then, in the layoutClass, within each mouseDown/Up handler
mouseState(2);
You would just have to make sure you have a reference to the cursorClass within the layOut class..
May 31st, 2008 at 6:19 am
Hi Dail,
First of all – thanks for posting this stuff up, it’s been a huge help in me understanding and working with AS3.
Right, one question? – How would I go about adding information to the external movie clips? – I’ve just tried adding this
newContent.newContent = XMLContent.article.story[i]..@id;
in the initListener func, and from the external mc running a trace, but i’m just getting this…
1119: Access of possibly undefined property text1 through a reference with static type noponies.panzoom:ZoomContent.
July 8th, 2008 at 3:16 pm
Yeaaaa. It´s is amazing Dail.
Thank´s
Alberto (Rosario, ARG)
July 12th, 2008 at 9:01 pm
[...] ActionScript 3 Drag, Pan, Zoom XML Content [...]
July 15th, 2008 at 1:23 pm
Hi Dail,
i really dig this file. I haven’t made the switch to AS3 as of yet (not that i’m an as2 expert either…), so i’m having trouble figuring out the following issue.
i’m loading a bunch of small interactive swfs with your grid code, and within those swfs are buttons that need to trigger the zoom out function.
i can’t get a grip on interactivity / functions within the swfs that are being loaded. can you give me a hand? thanks a bunch!
dan
July 23rd, 2008 at 7:57 pm
Hello is there a way to automatically pause swf files after double clicking and zooming out of them?
July 23rd, 2008 at 8:59 pm
Phillip,
No, no method like that exists in the demo.
July 23rd, 2008 at 9:04 pm
Well I was asking if there was a script to have it where the swf file pauses automatically after zooming out of them because then I wouldn’t want a bunch of swf files playing at the same time with the others running continuisly
July 23rd, 2008 at 9:05 pm
Or I am asking how to make that
July 28th, 2008 at 6:41 pm
hi this script is great !. i want effect same http://www.hl23.com your can help me.Thank.
July 28th, 2008 at 10:24 pm
So is there a way to add that?
July 29th, 2008 at 4:52 pm
Phillip,
Maybe, it could be a bit of a nightmare gaining access to the loaded in child swfs due to security restrictions. But who knows.
If I get a chance I can look at it, but no promises that I’ll get a chance.
July 29th, 2008 at 4:53 pm
Yamadie,
That example is kinda different to this example. Its actually really close to what I did for the martha mclean website.
August 7th, 2008 at 3:14 am
Hi, It’s a wonderfull suite of classes.
Found a bug on the layout class in lines 87 and 88
private var contentXpos:int = 0;
private var contentYpos:int = 0;
if you do;
private var contentXpos:int = 60;
private var contentYpos:int = 150;
the first row positions correctly but the second defaults to
x = 0 and y = 0
can you indicate where one could place a global border to position x in a desired position?
Cheers Ian
August 7th, 2008 at 11:37 pm
ian,
I’ll have a look into it.
August 28th, 2008 at 6:02 pm
[...] Of course, the real way to get great quickly is to go find good code and break the living hell out of it. Break it and fix it, then break it again. I’ve been really interested in the zoom function you can find out there these days, and to that end check out Dail at http://www.blog.noponies.com/archives/61. [...]
October 9th, 2008 at 2:32 pm
Hi Dale,
I just wanted to say thanks for posting this demo. I didn’t use this actual code in the end but it was great inspiration (along with http://www.matthewmahon.com), and I took some ideas from it. I’m working on improving the instructions/navigation, but feedback welcome.
http://www.tate.org.uk/britain/exhibitions/francisbacon/explore.shtm
Thanks again!!
Ben
October 10th, 2008 at 3:11 am
Ben,
glad it gave you some ideas. Nice place to see some of my work being used.!
January 16th, 2009 at 8:35 pm
hey dale
thanks so much for this source code … having some trouble getting the ContentEvent.as event dispatch class working…
trying to create a floating menu for random user access to zoom any panel
fairly new to AS3 but comfortable with classes and AS2 stuff, so it may be an obvious answer? would appreciate any help –
pete
January 17th, 2009 at 3:18 am
Pete,
You cant get it to dispatch, or cant get listeners to hear the event dispatch?
March 3rd, 2009 at 5:03 pm
Hi amaizzing work !
im trying to use this code on my portfolio, i want to know if theres a way to start in the middle instead of the top left corner ? im dont know much about codes : )
thank you
I love this !!!! plus …