# Thumbnail scrolling

**URL:** <https://forum.kirupa.com/t/thumbnail-scrolling/224310>\
**Category:** flash\
**Created:** [May 1, 2007, 3:08am UTC](https://forum.kirupa.com/t/thumbnail-scrolling/224310 "2007-05-01T03:08:20Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![mattstec](https://avatars.discourse-cdn.com/v4/letter/m/b3f665/32.png) [@mattstec](https://forum.kirupa.com/u/mattstec)\
**Post date:** [May 1, 2007, 3:08am UTC](https://forum.kirupa.com/t/thumbnail-scrolling/224310/1 "2007-05-01T03:08:20Z")

</div>

Hi all,  
I’m trying to recreate thumbnail scrolling as on this template:  
[http://www.dynamicfactory.us/xmlswfdemo/dynamicv9b/index.html](http://www.dynamicfactory.us/xmlswfdemo/dynamicv9b/index.html)  
it involves resizable window and very neat delay efect. I find this thumbnail viewing very precise and effective depending on where your mouse is, anyway so far I’m somewhere here:

[http://www.maciejstec.com/test/](http://www.maciejstec.com/test/)

hopeless, as it either goes too far or not far enough, I know there must be an easy way to do it, but I can’t seem to find it, here’s my code responsible for scrolling:  
[FONT=Arial Narrow]  
onEnterFrame = function () {  
if(\_xmouse\>mask\_mc.\_x and \_xmouse\<mask\_mc.\_x+mask\_mc.\_width and \_ymouse\>mask\_mc.\_y and \_ymouse\<mask\_mc.\_y + mask\_mc.\_height){  
var s;  
s= slider\_mc.\_width - mask\_mc.\_width;  
mPerc = \_xmouse/(mask\_mc.\_width);  
slider\_mc.\_x += (-s\*mPerc-slider\_mc.\_x)/5;  
}  
}[/FONT]

I assumed you have to take a percentage position of mouse as the windows are resizable and it should be a minus value of a mouse position for the slider\_mc plus some margins on the beginning and end… anyway, help!!! I’m runing in circles…

note:  
slider\_mc is a movie clip with all thumbnails in it, it’s width depends on the number of thumbnails loaded from xml…  
mask\_mc is simplya window to view the thumbnails that needs to be scaled as the browser window is extended/shrinked

here’s a scaling part of script:  
[FONT=Arial Narrow]  
stop();

Stage.scaleMode = “noScale”;

var HPositioner:Number = (Math.round((Stage.width - 800) / 2));  
var VPositioner:Number = (Math.round((Stage.height - 600) / 2));

function HPositionCubes () {  
if (Stage.width \>= 801) {  
var HPositioner:Number = (Math.round((Stage.width - 800) /2));  
setProperty(topLeftCube\_mc, \_x, 0 - HPositioner);  
setProperty(mask\_mc, \_x, 0 - HPositioner);  
setProperty(maskframe\_mc, \_x, 0 - HPositioner);  
setProperty(bottomRightCube\_mc, \_x, (800 + HPositioner) - 89);  
} else {  
setProperty(topLeftCube\_mc, \_x, 0);  
setProperty(mask\_mc, \_x, 0);  
setProperty(bottomRightCube\_mc, \_x, 800 - 89);  
}  
}

function VPositionCubes () {  
if (Stage.height \>= 601) {  
var VPositioner:Number = (Math.round((Stage.height - 600) /2));  
setProperty(topLeftCube\_mc, \_y, 0 - VPositioner);  
setProperty(bottomRightCube\_mc, \_y, (600 + VPositioner) - 84);  
} else {  
setProperty(topLeftCube\_mc, \_y, 0);  
setProperty(bottomRightCube\_mc, \_y, 600 - 84);  
}  
}

HPositionCubes();  
VPositionCubes();

[/FONT][FONT=Arial Narrow] setProperty(bg\_mc, \_width, (Stage.width_0.3));  
setProperty(bg\_mc, \_height, (Stage.width_0.3));  
setProperty(mask\_mc, \_width, Stage.width);  
setProperty(maskframe\_mc, \_width, Stage.width);

[/FONT][FONT=Arial Narrow] var resizeListener:Object = new Object();  
Stage.addListener(resizeListener);

resizeListener.onResize = function () {  
setProperty(bg\_mc, \_width, (Stage.width_0.3));  
setProperty(bg\_mc, \_height, (Stage.width_0.3));  
setProperty(mask\_mc, \_width, Stage.width);  
setProperty(maskframe\_mc, \_width, Stage.width);  
HPositionCubes();  
VPositionCubes();  
}[/FONT]