Thumb Scroller - Looping Images

[typeguy]

Hello,

I'm searching for a solution and not sure what to search for.
I have 2 versions of a horizontal thumb scroller. I want the thumbs to loop left and right.
Sample Scroller with Loop:
http://www.robertkedingcreative.com/flash/scroller.html
Sample Expanding scroller without loop:
http://www.robertkedingcreative.com/flash/scroller_noloop.html
Try clicking on the thumbs to see what happens.


When clicked, each expands and the others go back to original width.
I have the loop working with no expanded thumbs. I have the expansion working with no loop. When I use both, it breaks the code.

What are best practices for looping movieclips for right to left and left to right?

Here is the No Loop Code:

// ================================================== ================================================== ===========================================
// Import Tween Classes
// ================================================== ================================================== ===========================================
import com.mosesSupposes.fuse.*;
ZigoEngine.register(Fuse, PennerEasing, FuseFMP);
import mx.transitions.Tween;
import mx.transitions.easing.*;
import flash.filters.BlurFilter;
fscommand("allowscale", true);
//fscommand("fullscreen", "false");
System.useCodepage = true;
var boxW = 60;
var boxH = 200;
var numBoxes = 20;
function ranColor():Number {
return Math.random()*0xffffff;
}
function init() {
_root.attachMovie("wrap", "wrap", 1);
wrap.attachMovie("panel_holder", "panel_holder", 2);
wrap.attachMovie("mask_holder", "mask_holder", 40);
wrap.panel_holder._x = 0;
wrap.panel_holder._y = 0;
wrap.mask_holder._x = 0;
wrap.mask_holder._y = 0;
for (i=0; i<numBoxes; i++) {
var num = i;
var num2 = i-1;
var num3 = i+1;
wrap.panel_holder.attachMovie("box2", "box"+i, wrap.panel_holder.getNextHighestDepth());
wrap.mask_holder.attachMovie("thumb_mask", "thumb_mask"+i, wrap.mask_holder.getNextHighestDepth()+30);
wrap.panel_holder["box"+i].num = i;
wrap.panel_holder["box"+i].num2 = i-1;
wrap.panel_holder["box"+i].num3 = i+1;
wrap.mask_holder["thumb_mask"+i].num = i;
wrap.mask_holder["thumb_mask"+i].num2 = i-1;
wrap.mask_holder["thumb_mask"+i].num3 = i+1;
if (i == 0) {
wrap.panel_holder["box"+i]._x = 0;
wrap.panel_holder["box"+i]._y = 0;
wrap.panel_holder["box"+i]._width = 400;
wrap.panel_holder["box"+i]._height = boxH;
wrap.mask_holder["thumb_mask"+i]._x = 0;
wrap.mask_holder["thumb_mask"+i]._y = 0;
wrap.mask_holder["thumb_mask"+i]._width = 60;
wrap.mask_holder["thumb_mask"+i]._height = boxH;
} else {
wrap.panel_holder["box"+i]._width = 400;
wrap.panel_holder["box"+i]._height = boxH;
wrap.panel_holder["box"+i]._x = (wrap.panel_holder["box"+num2]._x)+wrap.panel_holder["box"+num2]._width-340;
wrap.panel_holder["box"+i]._y = 0;
wrap.mask_holder["thumb_mask"+i]._width = 60;
wrap.mask_holder["thumb_mask"+i]._height = boxH;
wrap.mask_holder["thumb_mask"+i]._x = wrap.mask_holder["thumb_mask"+num2]._x+wrap.mask_holder["thumb_mask"+num2]._width;
wrap.mask_holder["thumb_mask"+i]._y = 0;
}

wrap.panel_holder["box"+i]._alpha = 100;
wrap.panel_holder["box"+i].frame_number.text = i;
wrap.mask_holder["thumb_mask"+i].frame_number.text = i;
var f:Fuse = new Fuse();
f.push({target:wrap.panel_holder["box"+i].color_back, tint:ranColor, alpha:100, time:0, ease:'easeInQuad'});
f.start();
wrap._x = ((Stage.width/2)-(wrap._width/2))+170;
wrap._y = (Stage.height/2)-(wrap._height/2);
wrap.panel_holder["box"+i].setMask(wrap.mask_holder["thumb_mask"+i]);
wrap.mask_holder["thumb_mask"+i].onRelease = function() {
//Do Something
};
wrap.mask_holder["thumb_mask"+i].onRollOver = wrap.mask_holder["thumb_mask"+i].onDragOver=function () {
//trace(this);
};
wrap.mask_holder["thumb_mask"+i].onRollOut = wrap.mask_holder["thumb_mask"+i].onDragOut=function () {
};
wrap.mask_holder["thumb_mask"+i].onPress = function() {
for (i=0; i<numBoxes; i++) {
var num = i;

if (wrap.mask_holder["thumb_mask"+i]._width == boxW) {
var f:Fuse = new Fuse();
f.push({target:this, _width:400, time:1.5, ease:'easeOutQuint'});
f.start();
} else {
var g:Fuse = new Fuse();
g.push({target:wrap.mask_holder["thumb_mask"+i], _width:boxW, time:1.5, ease:'easeOutQuint'});
g.start();
}
}
};
}
}
init();
this.onEnterFrame = function() {
var velocity = _xmouse-(Stage.width/2);
var friction = .10;
wrap._x -= friction*velocity;
wrap._x += friction;
if (_xmouse<(Stage.width/2)+100 && _xmouse>(Stage.width/2)-100) {
velocity = 0;
friction = 0;
wrap._x -= friction*velocity;
wrap._x += friction;
}
//Control X for boxes
for (i=0; i<numBoxes; i++) {
var num = i;
var num2 = i-1;
var num3 = i+1;

wrap.panel_holder["box"+i]._x = wrap.mask_holder["thumb_mask"+num2]._x+wrap.mask_holder["thumb_mask"+num2]._width;
wrap.mask_holder["thumb_mask"+i]._x = wrap.mask_holder["thumb_mask"+num2]._x+wrap.mask_holder["thumb_mask"+num2]._width;
wrap.panel_holder["box"+i]._y = 0;
wrap.mask_holder["thumb_mask"+i]._y = 0;

}
};





Here is the onEnterFrame additions for the looping version:
this.onEnterFrame = function() {
var velocity = _xmouse-(Stage.width/2);
var friction = .10;
wrap._x -= friction*velocity;
wrap._x += friction;
if (_xmouse<(Stage.width/2)+100 && _xmouse>(Stage.width/2)-100) {
velocity = 0;
friction = 0;
wrap._x -= friction*velocity;
wrap._x += friction;
}
//Control X for boxes
for (i=0; i<numBoxes; i++) {
var num = i;
var num2 = i-1;
var num3 = i+1;
if (i == 19) {
var num = 19;
var num2 = 18;
var num3 = 0;
} else if (i == 0) {
var num = 0;
var num2 = 19;
var num3 = 1;
}
wrap.panel_holder["box"+i]._x = wrap.mask_holder["thumb_mask"+num2]._x+wrap.mask_holder["thumb_mask"+num2]._width;
wrap.mask_holder["thumb_mask"+i]._x = wrap.mask_holder["thumb_mask"+num2]._x+wrap.mask_holder["thumb_mask"+num2]._width;
wrap.panel_holder["box"+i]._y = 0;
wrap.mask_holder["thumb_mask"+i]._y = 0;
if (wrap._x+wrap.panel_holder["box"+i]._x>Stage.width+60) {
wrap.panel_holder["box"+i]._x = wrap.panel_holder["box"+num3]._x-wrap.panel_holder["box"+i]._width;
}
if (wrap._x+wrap.mask_holder["thumb_mask"+i]._x>Stage.width+60) {
wrap.mask_holder["thumb_mask"+i]._x = wrap.mask_holder["thumb_mask"+num3]._x-wrap.mask_holder["thumb_mask"+i]._width;
}
if (wrap._x+wrap.panel_holder["box"+i]._x<-420) {
wrap.panel_holder["box"+i]._x = wrap.panel_holder["box"+num2]._x+wrap.panel_holder["box"+i]._width;
}
if (wrap._x+wrap.mask_holder["thumb_mask"+i]._x<-420) {
wrap.mask_holder["thumb_mask"+i]._x = wrap.mask_holder["thumb_mask"+num2]._x+wrap.mask_holder["thumb_mask"+i]._width;
}
}
};

Thanks in advance for any advice.

[typeguy]

Hello,

Does anyone have an idea about the looping movie clips listed below? I have the loop but when each panel opens, you see the overlapping and flicker.

The scroll is based on 400px panels with a mask layer revealing 60px. The mask layer has the events attached. The onEnterFrame _x for mask and panel are based on the mask widths.

Should I use _x position for repositioning or use the _x + _width of i-1 and i+1 for the loops?

Any ideas are welcome.

Thanks in advance.