Scroller, based on MouseX and mouseY positioning

[saxx]

So basically, i'm trying to create an easing scroller, with defined points where it starts scrolling the X and Y of a movieclip.

I don't know where to start.

[senocular]

so, you want to make your own custom scrollbar, where the scroll bar eases to the mouse position when dragged, that changes the x and y of a movie clip? By changing the X and Y is it moving the clip diagonally? Or should it be able to affect either X or Y?

[saxx]

Kind of, but its more like, no physical scroll bar, and when the mouse hits a certain X position it scrolls the x left, and a certain Y position scrolls the y down. Only moving a movie clip though, it just makes it easy to implement with masks etc. Then set limits to how far the X and Y can be. so it doesn't over scroll

edit

I tried using timers and conditional statements, but that ended a horrible failure
i couldn't get it to scroll X and Y at the same time. and it was about 50 lines of code

[senocular]

moving x affects both x and y? Can you maybe draw a picture or something to show where on x this change would occur? Or how this is supposed to work?

There are a lot of scrollers like this one:
http://www.kirupa.com/developer/mx/infinite.htm

but they move x based on only. I'm not sure where y fits in with the x too.

[saxx]

http://splitheartimages.com/scrolling%20stuffz.swf

That is my horrible failure.

I would use that link for reference, but i started in AS3 and the syntax of everything below that is hard to understand for me :D

***edit

sorry about that lost post, i meant certain Y positions move the Y down.

[senocular]

eck, I had a decent explanation going but then the forums went down so I lost it. Now, I'm just posting the code sample:


var scrollMargin:Number = 40; // pixels from border of mask to start scrolling
var maxScrollSpeed:Number = 15; // max pixels to move every frame when scrolling (at mask border)

// mask content with a mask
content.mask = contentMask;

// event controlling motion if and
// when motion is needed
content.addEventListener(Event.ENTER_FRAME, scrollContent);
function scrollContent(event:Event):void {
// only scroll if within the masked content
// this could alternatively be handled using
// a rollover/rollout event for the mask background
if (contentMask.hitTestPoint(mouseX, mouseY) == false){
return;
}

// get the distance from the borders of the
// mask for each direction and move the
// content accordingly
var maskBounds:Rectangle = contentMask.getBounds(this);
var diff:Number;
var scrollPercent:Number;

diff = mouseX - maskBounds.left;
if (diff > 0 && diff < scrollMargin){
scrollPercent = 1 - diff/scrollMargin;
content.x += maxScrollSpeed * scrollPercent;
}

diff = maskBounds.right - mouseX;
if (diff > 0 && diff < scrollMargin){
scrollPercent = 1 - diff/scrollMargin;
content.x -= maxScrollSpeed * scrollPercent;
}

diff = mouseY - maskBounds.top;
if (diff > 0 && diff < scrollMargin){
scrollPercent = 1 - diff/scrollMargin;
content.y += maxScrollSpeed * scrollPercent;
}

diff = maskBounds.bottom - mouseY;
if (diff > 0 && diff < scrollMargin){
scrollPercent = 1 - diff/scrollMargin;
content.y -= maxScrollSpeed * scrollPercent;
}

// check the maskBounds of the content to make sure
// it stops when it reaches the edge of the mask
var contentBounds:Rectangle = content.getBounds(this);
if (contentBounds.left > maskBounds.left){
content.x -= contentBounds.left - maskBounds.left;
}

if (maskBounds.right > contentBounds.right){
content.x += maskBounds.right - contentBounds.right;
}

if (contentBounds.top > maskBounds.top){
content.y -= contentBounds.top - maskBounds.top;
}

if (maskBounds.bottom > contentBounds.bottom){
content.y += maskBounds.bottom - contentBounds.bottom;
}
}

[saxx]

Woah comments and everything, i really appreciate it senocular. I really, really do :). I think i'll be done with my project in a few days, your code will be put to good use!