Mike T. Henderson

I've been working on this one for the past couple weeks. I wanted a thumbnail scroller that scrolled with an ease side-to-side. Not only that, but I wanted it to ease to a stop after the user rolled out of the scroll pane.

Here's how I set up the main engine:
Ease = _xmouse * (ScrollingContentW/ScrollPaneW);
ScrollingContent._x += (-Ease - ScrollingContent._x)/speed;

Then to create the ease after the user rolled off, I applied this variable:
prevX = _xmouse;

After the user leaves the area, the equation is then changes to:
Ease = prevX* (ScrollingContentW/ScrollPaneW);
ScrollingContent._x += (-Ease - ScrollingContent._x)/speed;

/* ---------------------------------------------------
Global Vars
------------------------------------------------ */
 
// clip vars
var maxItems:Number = 20;
var clipW:Number = 150;
var clipH:Number = 150;
var pad:Number = 27;    // space between thumbs
var b = mc_bounds.getBounds(_root);    // boundary of scroller from rectangle mc on stage (mc_bounds)
 
// scroll vars
var scrollW:Number = mc_bounds._width;    // length of scroll pane
var scrollX:Number = mc_bounds._x;
var scrollPad:Number = 100;    // extra space L-R of scrolling content
var speed:Number = 15;
var focal:Number = (maxItems * (clipW+pad)) + (scrollPad*2);    // length of scroller
var prevX:Number;    // used to determine ease speed on rollout
 
/* ---------------------------------------------------
Render Clip
------------------------------------------------ */
 
render = function() {
 
//determine if in scrollpane
if(_xmouse>b.xMin && _xmouseb.yMin && _ymouse
 
// Scale focal to scrollPane Width
ease = (Math.round((_xmouse-scrollX) * ((focal-scrollW)/scrollW))) - (scrollX+scrollPad);
 
// Move it
this._x += (-ease - this._x)/speed;
 
// assign last x-position on Rollout
prevX = _xmouse-scrollX;
 
}
 
else {
 
// Scale focal to scrollPane Width
ease = (Math.round(prevX * ((focal-scrollW)/scrollW))) - (scrollX+scrollPad);
 
// Move it
this._x += (-ease - this._x)/speed;
 
}
}
 
/* ---------------------------------------------------
create Clip
------------------------------------------------ */
 
var contain = createEmptyMovieClip("mc_contain", 1);
contain._y = mc_bounds._y + 10;
contain._x = mc_bounds._x;
 
for (i = 0; i < maxItems; i++) {
var clip = contain.attachMovie("item", "item_" + i, i);
clip._x = i * (clipW + pad);
clip._y = scrollY;
clip.num.text = "clip " + i;
}
 
contain.onEnterFrame = render;
 
stop();