ActionScript 2 Drag Zoom XML Loaded Content
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
January 2nd, 2009 at 6:38 pm
hello…
i know this has been awhile, but i really like this…
as i am playing with this… i see that once i click a righmost image to zoom in and double click to zoom out, and repeat and so forth… the layout begins to shift offstage… is there a fix to this?
January 4th, 2009 at 11:08 pm
Not sure what is going on there. Perhaps it needs a method to reset its position or something like that. I don’t have time to check it out though, sorry.
February 22nd, 2009 at 11:34 pm
Hey Dale, I am trying to make a similar functioning site to the Schematic site. I really like your file here. I was just wondering instead of the nav widget, how can I assign buttons to go to the specific areas? here is an example of the menu I am using.
http://www.mprattdesigns.com/vida_index.swf
Any help you can provide in where I would change the code would be awesome.
Thanks
February 23rd, 2009 at 12:52 am
Marcus,
Are you meaning this file or the AS3 one?
February 23rd, 2009 at 1:34 am
This one. I didn’t know there was a AS3 version. But if you can answer my question with that one instead of the AS2 one then I could definitely switch. Thanks
February 23rd, 2009 at 7:29 pm
The AS3 version has various events that can be used to target individual loaded in items. The AS2 version, does not really have anything equivalent.
February 23rd, 2009 at 9:13 pm
Ok I will check it out. Do you know whereabouts in the code for the AS3 version I would be able to make my nav buttons go to the different swf’s like the widget does in this one? Cheers
March 13th, 2009 at 1:06 pm
Hello, I totally love what you have done here, it was just what I was searching for my school-project over here: http://jfml.eu/labyrinth/
I recognized that when you zoom in and click on the whitespace around the swf’s, the mouse get’s stuck there and you’re tapped. I have to admit that I don’t have any idea about ActionScript so I don’t know if I can prevent that from happening. Do you have any idea how to fix it?
@Ki: I just found out by change that when you uncomment line 284 in the AS-Code (return content to a specific point) the whole thing doesn’t seem to shift of the stage any more. Yay! ^__^
June 22nd, 2010 at 11:50 am
I’ve downloaded the file, few things I want to modify, please help me in this
I want that navigation panel to show the pages name like Home, About us, Contact … etc. If I add more SWF file to the main file, that navi panel displays icons for all the pages, I only want to show the basic 5 or 6 pages names.
Secondly, if some page has a link to another page, i.e Home page has link to ‘contact us’ page, clicking on that link will bring the contact us page by dragging in the zoom-in state.
Please help me in this or refer me to some tutorial, I’ll really very greatfull.