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

[dail]

Hi,

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) (http://www.blog.noponies.com/wp-content/uploads/2008/01/dragzoombg.zip)

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..

[smithe_98]

This is great a great experiment that has so much potential.

[prg9]

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

Very nice dail! Thanks also for the F8 version.

-- Start Kidding -------------------

I think schematic (http://www.schematic.com/) wont be happy about this however :huh: , once 500 versions of this hit the web they will have to change there interface :hugegrin: (which they just recently did so surely they wont be happy ;-).

-- End Kidding ---------------------

Regardless that is some nice stuff dail, thanks for sharing! On a side note however some of the links to the source on your site are 404 no ponie found! Not sure if that is intentional but wanted to point it out none the less.

Nice Work! :thumb:

[dail]

Ha, yeah. I hadn't seen a file with this technique in it floating around. So thought I'd share the one I had comped up. The schematic site is nice. They do other tricks by the look of it that my simpler version doesn't.

I'll sort out those links. I moved the database and had to mess around in phpmyAdmin editing all the content, so I prob messed somethings up. I'll fix that.

[prg9]

Ha, yeah. I hadn't seen a file with this technique in it floating around. So thought I'd share the one I had comped up. The schematic site is nice. They do other tricks by the look of it that my simpler version doesn't.

I'll sort out those links. I moved the database and had to mess around in phpmyAdmin editing all the content, so I prob messed somethings up. I'll fix that.

Well yours is a great starting point for some creative expansion and adding of more features ! Again nice work dail!

giddy up :thumb2:

[digitaldivide]

Really lovin'it over here! Cool.

[jimhere]

I like the way you can sort of throw the swf's around (not just click them).

[marito]

Hey Dail! thanks for the resource, been wanning to do something like this for a while now! How would I embed a fullscreen bkg behind the "panels" ?

.M

[dail]

The panels are just a movieClip sitting on the stage, so I guess just add in the fullscreen background behind that. You prob would want to make the fill of the draggable movieClip, which is currently grey, an invisible fill, so you can see your background.

[vini]

Sweet One Dude..Thanks

[dail]

No worries..

[csr500]

Dali

I am trying to get this source to be wider than two swf's and I am having some issues.

I have looked at your action script and gone down to the bit that mentions Non Auto Grid Based Layout and followed the instructions but I cant work it out.

I am sure it is something very simple, but I just cant spot it.

I would like it to be 5 wide on the first row, then 7 on the second row.

I have checked all of my xy coordinates in the xml file, but cant quite work it out.

Any help would be very much appreciated.

Cheers

Cameron

[csr500]

Sorry to bother you again Dali

I have managed to sort out the whole x y coordinates issue, its amazing what happens when you sleep on something, but I have know got another question.

I can only get 16 icons on the stage, is this something you have written into the script, if so where is it so I can change it, I have read through the script and cant find 16 anywhere.

Ta for any help you can give me

Cameron

[tezzutezzu]

good work Dail!

[csr500]

I have sorted myself out now, with my stupid questions.

Dali, when I create a load of swf files, I loose the ability use their controls, for example a simple scroll bar, is there any way around this issue, I am sure there must be, but I cant figure it out

[dail]

hmm, not sure. It should work with a scroll bar. It certainly works with buttons. I'll have a look if I get a chance later on today.

[daynie]

I use flash mx 2004 and your file wont opened in my flash. Would u pliz convert it to flash mx 2004 actionscript so I able to learn it ? thanks, :)

[teemsu]

thank you = ขอบคุณครับ

[pgallant2001]

Hi,

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.

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 (http://www.blog.noponies.com/wp-content/uploads/2007/11/dragzoom.zip)

Requies MCTween

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..

Is it possible to have the loaded swf files to be always visible in a fixed position when I zoom out? e.g. always centered or top right corner. It seems a after a couple of double clicks/zooms, I seem to lose the content area e.g. have to drag it back into position etc. This forces me to do a refresh in the browser.

Thanks...

Great start

-Paul

[dail]

Have a look in the source code, its clearly documented where you make changes to make the scaled down state always return to a particular point.

It behaves the way it does now (returns to where it was before scaling up) because the site I use this on has many many thumbnails, that are too big to display on screen. It gets pretty annoying when the scaled down state always returns you to a point when you have dragged that content around.

[dail]

I use flash mx 2004 and your file wont opened in my flash. Would u pliz convert it to flash mx 2004 actionscript so I able to learn it ? thanks, :)

I have not got a copy of Flash 8 to down save for you, sorry.

[pgallant2001]

Have a look in the source code, its clearly documented where you make changes to make the scaled down state always return to a particular point.

It behaves the way it does now (returns to where it was before scaling up) because the site I use this on has many many thumbnails, that are too big to display on screen. It gets pretty annoying when the scaled down state always returns you to a point when you have dragged that content around.

thanks for your quick response

I created this example based on your code

http://www.jacksonmarketing.ca/clients/jm/

I'm looking to create a similar widget based on this site

http://www.metalshutterhouses.com/

Any thoughts or suggestions as to having a floating layer which appears when it is zoomed in. Also, how would you write the actionscript so a link interacts with a different movie in the same container. Essentially, I'm trying to create the same effect and looking as you would with the mouse when you drag a movie over.

Thanks

[dail]

Nice example!

I would say that to make that widget you simply have to create a MC, and position it where you like, give a dropShadow and then set its visibility to false. When you scale up the background clips, set your widgets visibility to true, and likewise, when you scale down, set your widgets visibility to false again.

I'd add the widgets on vis state to this handler;
target_mc.my_thumbEvnt.onMouseUp = function() {

and its off state to this handler;
//we don't scale down if we are not at 100 scale and check to see if we have a double click event
if (thumbs_mc._xscale == 100 && difference<300) {

[pgallant2001]

Nice example!

I would say that to make that widget you simply have to create a MC, and position it where you like, give a dropShadow and then set its visibility to false. When you scale up the background clips, set your widgets visibility to true, and likewise, when you scale down, set your widgets visibility to false again.

I'd add the widgets on vis state to this handler;
target_mc.my_thumbEvnt.onMouseUp = function() {

and its off state to this handler;
//we don't scale down if we are not at 100 scale and check to see if we have a double click event
if (thumbs_mc._xscale == 100 && difference<300) {

How would I call from that widget via actionscript the various loaded movie clips so it simulates the mouse movement? and the zoom out function?

Your suggestions and insights are greatly appreciated.

Thanks

-Paul

[dail]

Here is a quick test, I placed two instances on the stage, box, and box2;

box.onRelease=function(){
target = thumbs_mc.thumbBox4
thumbs_mc.scaleTo(100,.5,"linear");
thumbs_mc.slideTo(Stage.width/2-(target._x+(target._width/2)),Stage.height/2-(target._y+target._height/2),.5,"linear");
fakeCursor.gotoAndStop(1)
fakeCursor._visible = false
Mouse.show();
}

box2.onRelease=function(){
thumbs_mc.scaleTo(25, .5,"linear", 0, function(){currentThumb = undefined, fakeCursor._visible = true, fakeCursor.gotoAndStop(4),Mouse.hide();})
thumbs_mc.slideTo(currentX,currentY,.5,"linear") //will return the draggable mcs to their pre scaled position
}


You can simply target each loaded clip via its instance name, which is something like "thumbs_mc.thumbBox4".

This approach works fine, what is more involved is automating the linking between the widgets targets and the contents. I'd probably do that in the onLoadInit handler and construct a mini grid of the content in there.

[dail]

thanks for your quick response

I created this example based on your code

http://www.jacksonmarketing.ca/clients/jm/

I'm looking to create a similar widget based on this site

http://www.metalshutterhouses.com/

Any thoughts or suggestions as to having a floating layer which appears when it is zoomed in. Also, how would you write the actionscript so a link interacts with a different movie in the same container. Essentially, I'm trying to create the same effect and looking as you would with the mouse when you drag a movie over.

Thanks
Check my blog, for an updated version of this file. I implemented your widget idea.

[pgallant2001]

Check my blog, for an updated version of this file. I implemented your widget idea.

I downloaded the examples from your blog. I think there was an issue with one of your links for the widget the on-line example seemed like it was pointed to the wrong place...no biggy.

Also, for the widget any suggetions as to code a zoom out button on the widget when I am zoomed in and vica versa when I'm zoomed out instead of double clicking?

Thanks

-Paul

[dail]

Oh, yeah. Oops, fixed that link.

Would you want a dedicated button on the widget to zoom out or do you want to double click the widget?

For a dedicated button, you will have to attach a button to the widget, then use some AS like this;

widgetScaleDown_mc.onRelease=function(){
thumbs_mc.scaleTo(25, .5,"linear", 0, function(){currentThumb = undefined, fakeCursor._visible = true, fakeCursor.gotoAndStop(4),Mouse.hide();})
thumbs_mc.slideTo(currentX,currentY,.5,"linear") //will return the draggable mcs to their pre scaled position
}

[dail]

I've made an actionScript 3 version of this file, if anyone is interested.
http://www.blog.noponies.com/archives/61

[pgallant2001]

Oh, yeah. Oops, fixed that link.

Would you want a dedicated button on the widget to zoom out or do you want to double click the widget?

For a dedicated button, you will have to attach a button to the widget, then use some AS like this;
ActionScript Code:

widgetScaleDown_mc.onRelease=function(){
thumbs_mc.scaleTo(25, .5,"linear", 0, function(){currentThumb = undefined, fakeCursor._visible = true, fakeCursor.gotoAndStop(4),Mouse.hide();})
thumbs_mc.slideTo(currentX,currentY,.5,"linear") //will return the draggable mcs to their pre scaled position
}





Hi there,

I've been using your code which is great but, I have some questions about the widget. When I use the xml to control the position of the movie clips. The widget generates does not reflect the xml.

In this sample

http://www.jacksonmarketing.ca/clients/jm/sample/

The widget should be 2 rows and 3 columns like the xml. However, in this sample it is reversed with 2 columns and 3 rows.

Any suggestions on updating the actionscript.

Thanks

-Paul

[dail]

Hi,

I'll look into it. I'd say that the widget from memory was auto populated. I'll have a look at what changes need to be made to make it reflect the XML positioning you are using.

[Nickstr]

Im trying to filter out the click and zoom to a MC part of the script.
Ive been breaking my head on a script that, when you click on a mc, that you zoom to the clicked MC.

And then i stumbled over this script, it does what i want, but to much extra's :p
I've tried to filter out the clicking part of the script but i cant get it to work :(
Anyone that could give me a hint of how to only get the clicking script, and on how to make it work without the .xml ?

cheers,

Nick


/ EDIT /

I managed to remove the little minimap, but when i try to remove the panning function it all goes bad :(
Also, if i want to make an imported movieclip clickable, i should use the following right:
_root.thumbBox.MCname.gotoAndPlay(2);
?

[pgallant2001]

Hi,

I'll look into it. I'd say that the widget from memory was auto populated. I'll have a look at what changes need to be made to make it reflect the XML positioning you are using.

Also Dali,

How would I target another movie clip from inside the zoomed sample in a movie clip? For example I've loaded six different swf files e.g. sample01.swf, sample02.swf, etc. When I'm in a zoomed sample01.swf how would I target sample02.swf, this would simulate the widget and mouse functions.

Thanks

-Paul

http://www.jacksonmarketing.ca/clients/jm/sample/

[pgallant2001]

Hi,

I'll look into it. I'd say that the widget from memory was auto populated. I'll have a look at what changes need to be made to make it reflect the XML positioning you are using.

Thanks

-Paul

[rdj]

Awesome script, i really love it, although i have a problem. When i load a swf over the root the root is still clickable/draggable etc. How do i make the root inactive?

Much <3

edit: http://www.ifeelstrange.com/ifs.rar

Here are the files if that helps!