Image Slider Pan Thing with ScrollRect

[creatify]

I'm not sure if something like this has been posted, I've seen requests, and I've seen versions on this site and other sites - anywho.

I created a class file for this, all you need is one movieclip containing your image. It uses scrollRect vs. masking. One note, I'm placing button events on the image clip itself, so if you want to pan a movieclip that contains buttons, you'll have to create a button clip to handle those events. To initiate:


import com.McSlider;

var myclip:MovieClip = _root.img;
var myeasing:Number = .5;
var myX:Number = 40;
var myY:Number = 40;
var myviewW:Number = 720;
var myviewH:Number = 520;
var mystartX:Number = ((myclip._width - myviewW)/2); //want the image to start centered
var mystartY:Number = ((myclip._height - myviewH)/2); //want the image to start centered

//new McSlider(yourMovieClip, easing, clipX, clipY, aperature_width, aperature_height, initial_x_Offset, initial_y_Offset);
var nMC:McSlider = new McSlider(myclip, myeasing, myX, myY, myviewW, myviewH, mystartX, mystartY);


To view:
http://flash.creatify.com/experiments/McSlider.html

Download:
http://flash.creatify.com/experiments/McSlider.zip

*****EDIT 09.07.06:
I've uploaded a version that accepts buttons within the movieclip - enjoy:

VIEW:
http://flash.creatify.com/experiments/McSliderB.html
DOWNLOAD:
http://flash.creatify.com/experiments/McSliderB.zip

*****EDIT 12.12.06
I've uploaded a version that with 3 new public methods:
stopMotion();
startMotion();
slideToPoint(x,y);

VIEW:
http://flash.creatify.com/experiments/McPan.html
DOWNLOAD:
http://flash.creatify.com/experiments/McPan.zip

[superstring]

I've been looking for this effect for a while, and then it magically appears! Thanks a lot for posting it.


I'm not sure if something like this has been posted, I've seen requests, and I've seen versions on this site and other sites - anywho.

I created a class file for this, all you need is one movieclip containing your image. It uses scrollRect vs. masking. One note, I'm placing button events on the image clip itself, so if you want to pan a movieclip that contains buttons, you'll have to create a button clip to handle those events. To initiate:

ActionScript Code:

import com.McSlider;

var myclip:MovieClip = _root.img;
var myeasing:Number = .5;
var myX:Number = 40;
var myY:Number = 40;
var myviewW:Number = 720;
var myviewH:Number = 520;
var mystartX:Number = ((myclip._width - myviewW)/2); //want the image to start centered
var mystartY:Number = ((myclip._height - myviewH)/2); //want the image to start centered

//new McSlider(yourMovieClip, easing, clipX, clipY, aperature_width, aperature_height, initial_x_Offset, initial_y_Offset);
var nMC:McSlider = new McSlider(myclip, myeasing, myX, myY, myviewW, myviewH, mystartX, mystartY);





To view:
http://flash.creatify.com/experiments/McSlider.html

Download:
http://flash.creatify.com/experiments/McSlider.zip

[Anogar]

Nice job. :thumb2:

[3lie]

interesting....
could it be possible to make it dragin'... with little box inside.. ?
where the box move, the image show that zone.

:book:

[gqlegacy]

I'm not sure if something like this has been posted, I've seen requests, and I've seen versions on this site and other sites - anywho.

I created a class file for this, all you need is one movieclip containing your image. It uses scrollRect vs. masking. One note, I'm placing button events on the image clip itself, so if you want to pan a movieclip that contains buttons, you'll have to create a button clip to handle those events. To initiate:


ActionScript Code:

</p>
<p>import com.McSlider;</p>
<p>&nbsp;</p>
<p>var myclip:MovieClip = _root.img;</p>
<p>var myeasing:Number = .5;</p>
<p>var myX:Number = 40;</p>
<p>var myY:Number = 40;</p>
<p>var myviewW:Number = 720;</p>
<p>var myviewH:Number = 520;</p>
<p>var mystartX:Number = ((myclip._width - myviewW)/2); //want the image to start centered</p>
<p>var mystartY:Number = ((myclip._height - myviewH)/2); //want the image to start centered</p>
<p>&nbsp;</p>
<p>//new McSlider(yourMovieClip, easing, clipX, clipY, aperature_width, aperature_height, initial_x_Offset, initial_y_Offset);</p>
<p>var nMC:McSlider = new McSlider(myclip, myeasing, myX, myY, myviewW, myviewH, mystartX, mystartY);</p>
<p>





To view:
http://flash.creatify.com/experiments/McSlider.html

Download:
http://flash.creatify.com/experiments/McSlider.zip


Thanks soo much for this man, I've been waiting for this for a long time now.
I was just wondering if this works in Flash MX as well.


:beam:
Thanks again!

[creatify]

Unfortunately, it won't work in MX or flash 7. I'm using scrollRect which is an AS 2.0 flash player 8 only movieclip property - sorry :smirk:

[jeckx2]

hello creatify many tanx to your sample codes it works so well. But I have one big problem. I made a buttons inside the clip 'img' but the button doesnt seem to work... Is it okey to ask for some help here :) tanx in advance :bu:

[mickmaster_b]

Same problem here too, any suggestions anyone??

[insaniak]

Yeh I made one of these and posted but it got deleted in the crash a while back. Mine had easing and multiple layers of images - was in response to an effect posted on another site.

Still - your code is a little simpler I think :)

[theflash]

it's a neat effect, but what I dont like about this slider is, it moves image without user intention. If I want to move my mouse somewhere else to click it also moves the image. Rather than using mousemove event I would love to have mouse drag event to scroll image...

[jeckx2]

well it depends on usage. Still creatify script rocks :) but still anyone knows how can i make button inside :) really need help.

[creatify]

When I have time this week, I'll post a version w/o that button with in - though, it may not be quite as optimized as there will have to be some event to turn it on / off once your over the image area. I hate to use an continous onEnterFrame — but will figure something out.



it's a neat effect, but what I dont like about this slider is, it moves image without user intention. If I want to move my mouse somewhere else to click it also moves the image. Rather than using mousemove event I would love to have mouse drag event to scroll image...


agreed - an onMouseDown so you could control when the image panned around would be a nice option as well, however, then you couldn't use buttons within the image area. Maybe an additional param to turn that one off - just don't want it to become too convoluted...

[jeckx2]

tanks in advance creatify :) your the best :p:

[waywoodr]

This effect reminds me of the Gorillaz website. I have been trying to re-create the effect but I cannot load a swf into the scene as gorillaz does
[ www.gorillaz.com/launch.html (http://www.gorillaz.com/launch.html) ]
It has interactive buttons and it only scrolls when the mouse is near the edge. Have a look at what I mean

[Team Critter]

Anybody figure out how to add buttons to the panning MC??? Help!!!

-
Team Critter

[tjsmokey]

Is it possible to include the easing class to the ease parameter???

[creatify]

not really - you do pass it an ease value, but its not set up for easeIn, easeInOut - it simply is an easeOut - with a little math, and reviewing some ease equations, I'm sure you could modify it to that.

[creatify]

see the first post of this thread - added version that accepts buttons withing the moving clip.

[b-art]

is it possible to do this with 2 layers?!

so you have 1 layer in the front and 1 in the back that slide @ the same time to create some kind of 3d effect

+ is it possible to make the movie matching the stage_.width + stage._height? (for 100% sites)

[vega]

Nice one. Although, like already discussed, it would be better to be able to move the mouse to a location and click a button without having the background image move.

Will work on it once I get some free time. Thanks a lot for the source man. :)

[mickmaster_b]

Thanks Creatify, you just solved a problem i had. People like you show me up!

[Scyth]

Wow, i logged on here (which i rarely do) to find and effect that pans the image based on mouse location...and i see it on the very top of the discusson topics. This is a good find for me and great work from you (creatify). thanks!.

But, like mentioned above, has anyone figured out two layers yet? I've been sitting here for hours now but im getting nowhere....scratch that...im now getting a syntax error to do with the "import com.McSliderB".....

i'll be back...im gonna try and figure it some more..i know im missing something really simple...

[Scyth]

ok, im an idiot, i dont know what im doing.

can someone help me out here on this please?

Im trying to center the image on the x axis and have it lower on the y axis..if that makes any sense.


http://users.tpg.com.au/tetsuo/test.fla

/EDIT:
NEVERmind. i really am an idiot (i forgot i moved the registration point of the clip).


MORE EDIT:
I dunno if anyones already figured it out, but i managed to get two layers moving.

I copied everything under the import "com.McSliderB" call, reanamed the variables and assigned the "myclip" to another instance name:

var myclip:MovieClip = _root.img2;
var myeasing2:Number = .6;
var myX2:Number = 0;
var myY2:Number = 0;
var myviewW2:Number = 800;
var myviewH2:Number = 400;
var mystartX2:Number = ((myclip._width - myviewW)/2); //want the image to start centered
var mystartY2:Number = ((myclip._height - myviewH)/2); //want the image to start centered


var nMC:McSliderB = new McSliderB(myclip2, myeasing2, myX2, myY2, myviewW2, myviewH2, mystartX2, mystartY2);

[Qued]

how do I get rid of the grey outline?

[howardf]

This is great, but is there anyway it will work in MX 2004?

[_^Brenda^_]

Hi Creatify, that's a really nice job u made!! i just wanted to ask u if it's possible to stop the scroll when i click on a button and then re-start the scroll exactly from the point where the button is (ie where i clicked) (sorry if my question has been asked)
Thank in advance :-)

[creatify]

Yes that is possible. Give me through the weekend and I'll PM you with a sample - actually, I'm quite busy right now (aren't we all), but just happen to be refining that for a client of mine with those same functionalities. Basically, I'll add a stop and start function to the class, so when a button is clicked, it will call that method to stop stop the movement, and then any other button can then call the start method to begin movement.

[_^Brenda^_]

Great!! Thank you in advance u made a great job...

[_^Brenda^_]

hellooo have u found some time to emprove the class? :)

byebye

[creatify]

not quite yet - sorry - I'm probably going to need until saturday to tackle again - that proj. stopped for a while but has picked back - I'll definitely eventually get to it =)

Lex

[lukers4]

Hello, I also am trying to fiigure out how to get the easing to stop a click of a btn. If you figure those out before I do. Let us know
thanks

[lukers4]

Also if there is a way to slow down the pan effect (when the mouse is moved it doesn't move so quickly) let me know. Thanks for some great work!

[lukers4]

I must be having a bad day. I cant make out what you did to get the two mClips to pan for a 3d effect. could you explain a little more what you did to get it to work

Thanks

[papa-t]

Heyh there, I can´t seen to figure out why i can´t loadpictures dynamicly in the movie instead, I would like to use this function to load 2 pictures dynamic, and place them next to eachother, and the pane around on them, could you maybe give me a hint to what i might do wrong here?
I figure its just replacing the img_mc but it doesn't seem to just that simple, or it's just not my day!

very interesting work - Word!

/Papa-T

[Tyg3r]

This is great source. I made a small adjustment to help it work a little more universally depending on the stage dimensions.

var margin:Number = 20;
var myX:Number = margin;
var myY:Number = margin;
var myviewW:Number = Stage.width-margin*2;
var myviewH:Number = Stage.height-margin*2;

I do have one little issue:
How can I remove the mask? The panning function it perfect; but I wanted to add transition tweens to buttons, but the masking causes issues. So if the user should hit a button (such as a quick link) the image will bounce to a specific spot. I can try to give examples if need-be.

Nice one Creatify!

[Tyg3r]

www.stagknight.com (http://www.stagknight.com) has something SIMILAR to what I'm after. See the quicklinks in the bottom right of the page. This site doesn't continuously pan with the mouse - but anyway; just an example.

[iwiniquit]

hey, does anybody know an easy way to make the view stretch if you resize the movie? when i'm in the middle of resizing it, it goes with it..but once i let go it, it goes back to the original width/height of the movie again.

all i did was make the myView variables = Stage.Height/Width, copied everything and pasted it into a resize listener.

[lukers4]

I have been trying for days to make a start slide and stop slide btn to add to this stuff but have not been able to get it. Can anyone please help?

[BlueEyedMonster]

Hey,

So I'm trying to use this class along with images loaded dynamically, and as another user mentioned, I'm having some difficulty. I've gotten close I think, but I'm missing something and I'm hitting my head against the wall.

The problem, as it seems to me, is in getting the class to recognize the width and height of the external image. It takes the width / height of the img holder onEnterFrame, and not after the pic is loaded.

I tried getting around this by modifying the class, so that I could declare the width / height of the img in the script itself so I made the following additions to the .as file:

ActionScript Code:

public function McSliderB(_mc:MovieClip, _ease:Number, _clipX:Number, _clipY:Number, _apertureW:Number, _apertureH:Number, _xoff:Number, _yoff:Number, _picW:Number, _picH:Number) {

...

__imgW = _picW;
__imgH = _picH;





I then made these additions to the actual fla:

ActionScript Code:

stop();
import com.McSliderB;
var myclip:MovieClip = _root.img;
var myeasing:Number = .9;
var myX:Number = 40;
var myY:Number = 40;
var myviewW:Number = 720;
var myviewH:Number = 500;
var mystartX:Number = 0;
var mystartY:Number = 0;



MovieClip.prototype.loadPic = function(pic) {
this.loadMovie(pic);
var t = img.container.getBytesTotal(), l = img.container.getBytesLoaded();
if (Math.round(l/t) == 1 && img.container._width != 0 && img.container._height != 0) {
_global.picW = 1200;
_global.picH = 1600;
}
};

img.container.loadPic("articles/image.JPG");

var nMC:McSliderB = new McSliderB(myclip, myeasing, myX, myY, myviewW, myviewH, mystartX, mystartY, picW, picH);





Note that I made the pic load into container, an MC inside of 'img'. This was the only way I could kinda get it to work. That and, 'container' cannot be an empty MC. it has to have Some width or height other than 0.

I figured I could just declare
ActionScript Code:

_global.picW = img.container._width;
_global.picH = img.container._height;





but that doesn't work at all. It only works if I delare the height and width as numbers. Any thoughts as to what I'm screwing up? I tried to upload the files but I"m over the size limit..

[dax1]

I'm not sure if something like this has been posted, I've seen requests, and I've seen versions on this site and other sites - anywho.

I created a class file for this, all you need is one movieclip containing your image. It uses scrollRect vs. masking. One note, I'm placing button events on the image clip itself, so if you want to pan a movieclip that contains buttons, you'll have to create a button clip to handle those events. To initiate:


import com.McSlider;

var myclip:MovieClip = _root.img;
var myeasing:Number = .5;
var myX:Number = 40;
var myY:Number = 40;
var myviewW:Number = 720;
var myviewH:Number = 520;
var mystartX:Number = ((myclip._width - myviewW)/2); //want the image to start centered
var mystartY:Number = ((myclip._height - myviewH)/2); //want the image to start centered

//new McSlider(yourMovieClip, easing, clipX, clipY, aperature_width, aperature_height, initial_x_Offset, initial_y_Offset);
var nMC:McSlider = new McSlider(myclip, myeasing, myX, myY, myviewW, myviewH, mystartX, mystartY);


To view:
http://flash.creatify.com/experiments/McSlider.html

Download:
http://flash.creatify.com/experiments/McSlider.zip

*****EDIT 09.07.06:I've uploaded a version that accepts buttons within the movieclip - enjoy:

VIEW:
http://flash.creatify.com/experiments/McSliderB.html
DOWNLOAD:
http://flash.creatify.com/experiments/McSliderB.zip

This is really cool...
Was wondering in addition to the interactive mouse panning is it possible to incorporate a series of quick link buttons outside the mc that when clicked pan to a specific place (eg. if the image was a navigable map and you wanted to jump to a particular spot on the map)?

I had a quick play but am not skilled enough in AS to work it out... Could you help me please man?

[Madshm]

ok, im an idiot, i dont know what im doing.

can someone help me out here on this please?

Im trying to center the image on the x axis and have it lower on the y axis..if that makes any sense.


http://users.tpg.com.au/tetsuo/test.fla

/EDIT:
NEVERmind. i really am an idiot (i forgot i moved the registration point of the clip).


MORE EDIT:
I dunno if anyones already figured it out, but i managed to get two layers moving.

I copied everything under the import "com.McSliderB" call, reanamed the variables and assigned the "myclip" to another instance name:

var myclip:MovieClip = _root.img2;
var myeasing2:Number = .6;
var myX2:Number = 0;
var myY2:Number = 0;
var myviewW2:Number = 800;
var myviewH2:Number = 400;
var mystartX2:Number = ((myclip._width - myviewW)/2); //want the image to start centered
var mystartY2:Number = ((myclip._height - myviewH)/2); //want the image to start centered


var nMC:McSliderB = new McSliderB(myclip2, myeasing2, myX2, myY2, myviewW2, myviewH2, mystartX2, mystartY2);

I really don't know how you did that? is it possible for you to send me a working .fla file?

mads

[creatify]

I've uploaded a new version - I did change the name of the class and added a parameter to the constructor. I hope this doesn't screw any one up too bad, but since I use for client projects, I felt at liberty to do this.

I've added 3 public methods:

stopMotion();
this will stop the image from moving/reacting with the mouse

startMotion();
this will restart the image to react with the mouse when moused-over

slideToPoint(x,y);
this will allow you to pass an x,y coord to the image and the image will slide to that position. Click on any button on the image to see this effect. Also note that this does invoke the stopMotion() method, so to reactivate after using slideToPoint, you'll need to call the startMotion(); method again.

*****EDIT 12.12.06
I've uploaded a version that with 3 new public methods:
stopMotion();
startMotion();
slideToPoint(x,y);

VIEW:
http://flash.creatify.com/experiments/McPan.html
DOWNLOAD:
http://flash.creatify.com/experiments/McPan.zip

Hope this is of use.

[Fes4]

Hello All - This is exactly the functionality that I need for a current project of mine, however I am limited to publishing to flash 7 (because of the client). Is there anyone who could help me to achieve this without using scrollRect, or is there another file or tutorial somewhere that you could point me to? I appreciate any and all help. Thanks.

[fuekewl]

@creatify

Your pan functionality is brill ... :)

say i wanted to add a zoom feature to this, can i :

1) switch off the McPan function
2) resize the image movieclip (img)
3) restart/call the McPan function with new parameters

?

just throwing this out there, havent started on the approach yet, but will have to do so before week's end, a project that may benefit from your design (if you dont mind ... :cool: )

What do i need to do to switch off the event handlers that check the mouse position and the the image movieclip (img) position checker?

Because I've created a button that removes your controller mc from the image movieclip (img) and removes the event listeners, but when i construct the mcPan again (with another button) the img does not show up at all. Tracing the img from there, it seems to have taken the scrollrect width and height which conflicts in the mcPan function.

Can i somehow refresh/remove the scrollrect from the img altogether?

any ideas?

[creatify]

I did add a new version - see the first post of this thread - for starting / stopping the panning. But to add zoom - will be a bit tricky. I don't know where to tell you to begin with that - but you could build the zoom separately to scale the clip - but since this uses scrollRect - you'd have to adjust the scrollRect property on zoom - or the aperature (the actual viewable area of the movieclip) will enlarge as well when you scale the clip. Wish I had time to build this in, I've built zoom/pans before, but not near as effecient as using scrollRect, and I don't have any projects in queue where I can invest the time to build that into this - yet. Also, if I went that far with it, not sure I'd posted, would take a day or two worth of work to figure out.

[fuekewl]

thanks creatify, i've seen your latest version earlier, which has some very nice features.

for the zoom i've only have a single zoom in/out feature. Zoom in shows the image pan, zoom out shows the image's full extents. So i thought i may just fake it, by having another image movieclip that fits the aperture/stage size, showing/hiding when the zoom button is clicked.

its not the best way to achieve this, but im having no luck reusing the mcPan, and the img's scrollrect.

if you have any other thoughts let me know.

[bsochar]

Maybe you want somthing like this guy made:
http://www.reflektions.com/miniml/template_permalink.asp?id=122

[fuekewl]

@bsochar

nope not that hey, thats a 3d object zoom menu thingy ... i need an image zoom and pan effect which is half of wot creatify as done. =)

so i need to zoom in on an image, pan using the mouse, then have the ability to zoom out showing the image's extents ...

thought it would be easy enough to switch off the mcPan function, but somehow the scrollrect attaches itself as the image's holder movieclip property ... and i can't get rid of it without redevloping the class ... and at this stage don t have time ... not very familiar with scrollrect ... need to learn ... :pa:

so to fake it, im just creating 2 movieclips from the image ... one that has the pan effect applied to it, and the other is used as the fake zoom in and blur. And these 2 are transitioned when the zoom in/zoom out button is clicked.

i'd say it works but its not the best approach if more levels of zoom are needed... luckily i only have 1 zoom level ... ;)

[websmythe]

Thanks for nifty work, creatify. Was wondering how I'd do this, this morning, and then Volia! there it is. Much appreciated.

[superstring]

Ok, so as stated before, this works great, but I've noticed, at least on my trials, a strange glitch while testing it live. Can you think of a reason, if you leave the page, like in Firefox with tabbed browsing, and then go back to the page, why the panning image would disappear? It comes back if I refresh the page. Any ideas?

Oh, and thanks again, Creatify. Aside from the glitch that I'm having, this really works great.

[sebstence]

Ok, so as stated before, this works great, but I've noticed, at least on my trials, a strange glitch while testing it live. Can you think of a reason, if you leave the page, like in Firefox with tabbed browsing, and then go back to the page, why the panning image would disappear? It comes back if I refresh the page. Any ideas?

Oh, and thanks again, Creatify. Aside from the glitch that I'm having, this really works great.

Ek, I have the same problem, with safari and firefox..

[siglow]

i get the same thing when I load a new tab. When I switch back to the MCSlider tab, the image is gone. However, when i hit the "return to 50/50" button, the image slides back into view. So the image is still there... Its just repositioned outside of the mask for some reason.

[doctor_funk]

It would be great if this could be layered, like this: http://www.chromazone-imaging.co.uk/

I've been trying to build a site like this for a while and this script comes close. Is there any way to layer this on a few layers so it looks like you're moving around floaty stuff?

[Prakashan]

How to stop the movement?
Something I can do with killMovement().... right?
Please help me.

Prakashan

[Prakashan]

Okay I got it
http://www.kirupa.com/forum/showpost.php?p=2020141&postcount=42

Thanks

[Flashkiddy]

Cool stuff! Nice job!

[boptilyadrop55]

Hey y'all, I got a problem with this (really nice) script - maybe someone can help...

I used the second version of the fla. Put in some buttons and made it work as a menu. I have a basic swf, the menu is loaded to a level by clicking a button. Works just fine.
Then I wanted to include a second menu of the same style.

In the basic swf, I have two buttons -

button 1 loads menu 1 on level 6 - menu works great
button 2 loads menu 2 on level 16 - menu doesn't slide

When menu 1 is active and menu 2 is called, then level 6 is unloaded. Same with the other way around.

I'm not into Flash too much, but I can imagine that the variables from menu 1 have to be deleted before they are set to work with menu 2?

Does anybody have a hint?

Thanks!

EDIT: it does work when I'm loading the two different menues onto one and the same level - but is there any way to have them loaded onto two different levels?

[ronnie_danneels]

hey there if i use slidetopoint the x and y seem random i can't get it to work it slides in the wrong direction. If have checked and double checked but i cant find the problem
does anybody have a hint?

thanks

[ronnie_danneels]

hey there if i use slidetopoint the x and y seem random i can't get it to work it slides in the wrong direction. If have checked and double checked but i cant find the problem
does anybody have a hint?

thanks


finally i figured it out :-)

[EViL-Bites]

This is wonderful! I was contemplating creating an experimental ZUI and this is a great motivator since I'm just beginning to focus on code and data driven flash applications.

[GiveMeCoffee]

This is great. I have also been trying to find this exact effect.
I've tried to create it many times, but I haven't gotten it as perfect as this one.

Thanks again.

[GiveMeCoffee]

This is great. I have also been trying to find this exact effect.
I've tried to create it many times, but I haven't gotten it as perfect as this one.

Thanks again.

[akmdesign]

simply fantastic

[jagermeister]

Hi there,
Thanks for this, it is simply brilliant!

A few queries though,
i'd like to get ride of the white border on the scrollrect, and also, ease the movement when the mouse is outside of the scrolling area.
I had a look through the .as file but cant seem to figure it out!

Any clues?

Thanks fellas!
Ken

[editundo]

First of all, this is great. But I'm having an issue that I need some help with. My swf with the mcslider works fine, but I'm trying to load it into a content loader inside of another .fla file. Everything loads in, but the mcslider doesn't work. This is probably an easy fix, but I can't figure it out.

Thanks a million for any help!

[fathed]

Is there anyway to make more than one image on the stage move?


this is an awesome class by the way.

[philaine]

Hi,

Many thanks for such a tool!
I use it with a map and clickable little buttons. Is it possible to reduce the scrolling effect when going towards the center, because it's very hard to click little buttons when the map is moving. It could be great !

Thanks again

Philippe

[philaine]

Hi,

I'm getting problems with the size of image. I use McPan only on about a upper left quarter of the project - about 400x400 for slider size and 1024x650 document size.
• _root.nMC.slideToPoint(id_bt._x-200,id_bt._y-200) for adjusting the map when clicking on a menu
• 820x820 for the map

It appears that I can't put a map greater than 800x800, otherwise the sliding factor is unmatching and the map slides completely out of the slider; the sliding movement seems to be proportionnal with the size of the image. How can I interact with the deplacement scale? What is the relationship between all these elements? how can I use bigger image?

2nd question (sorry if I abuse) :
I want the start and stopmotion to be progressive (ease-in and ease-out). Is this possible?

Thanks for your response
... and big thanks again for this great tool.


Philippe

[xupiter]

hi, great stuff.
could it be possible to make it slide to a point width slideToPoint (x,y) and then restart motion from the new point where it slide to.

as it is, de movie clip slides to a certain point but then when you call startmotion() the mouse cursor goes back where the user ("mouse cursor"), initial called the function slideToPoint (x,y). it seems that keeps the original mouse coordinates before sliding.
any help?

thanks in advance

[iMat]

Great effect - exactly what I wanted.

Problem though. I can't get it to pan dynamically resizing/loading movieclips. I have this MC called content which external jpgs/swfs get loaded into, and a zoom bar that resizes it, but it won't work with this code.

Any ideas?

Thanks

[yellowsubmarine]

Creatify, simply brilliant.

Thanks! :party:

[Vizioneer]

I've been searching this for a long time.

Googles best hit was the vertical panning tutorial on this site. Well, I gust gave the forum here a try, and... BAM!

Thumbs up 4 Creatify

Need the effect for a treasure hunt in the style of volvos treasure hunt, which they did for the last two PotC-movies.

[bdavey311]

I'm not sure if something like this has been posted, I've seen requests, and I've seen versions on this site and other sites - anywho.

I created a class file for this, all you need is one movieclip containing your image. It uses scrollRect vs. masking. One note, I'm placing button events on the image clip itself, so if you want to pan a movieclip that contains buttons, you'll have to create a button clip to handle those events. To initiate:


import com.McSlider;

var myclip:MovieClip = _root.img;
var myeasing:Number = .5;
var myX:Number = 40;
var myY:Number = 40;
var myviewW:Number = 720;
var myviewH:Number = 520;
var mystartX:Number = ((myclip._width - myviewW)/2); //want the image to start centered
var mystartY:Number = ((myclip._height - myviewH)/2); //want the image to start centered

//new McSlider(yourMovieClip, easing, clipX, clipY, aperature_width, aperature_height, initial_x_Offset, initial_y_Offset);
var nMC:McSlider = new McSlider(myclip, myeasing, myX, myY, myviewW, myviewH, mystartX, mystartY);


To view:
http://flash.creatify.com/experiments/McSlider.html

Download:
http://flash.creatify.com/experiments/McSlider.zip

*****EDIT 09.07.06:
I've uploaded a version that accepts buttons within the movieclip - enjoy:

VIEW:
http://flash.creatify.com/experiments/McSliderB.html
DOWNLOAD:
http://flash.creatify.com/experiments/McSliderB.zip

*****EDIT 12.12.06
I've uploaded a version that with 3 new public methods:
stopMotion();
startMotion();
slideToPoint(x,y);

VIEW:
http://flash.creatify.com/experiments/McPan.html
DOWNLOAD:
http://flash.creatify.com/experiments/McPan.zip

So now an extra question on top of that.

If I use the loadMovie command for one of the buttons the image will still move in the background. I even have an invisible button at the bottom layer of the loaded Movie that doesn't allow anything behind it to be clicked, In Theory.

Any ideas?

Awesome script by the way.

Brian

[juna012]

This is probably a long shot....Has anyone figure out how to use this full full browser layout?