How to make carousel loop back to beginning - actionscript-3

Question

I have a 800w movieclip containing 4 panels next to each other, each with 200 width (See picture here). When I click and drag then mouse_out, it detects the direction of the mouse and move the panels by 200 either left or right depending on the direction.
My problem is I want this to loop, so when it gets to the very left panel, it'll continue on to the left, and visa versa when it gets to the very right panel, I should be able to continue with the click and drag motion.
I'm not sure if this is considered a carousel.
Anyhow this is what I have so far. I've made 2 comments "What happens now" toLeftTween() and toRightTween() to indicate where I'm stuck.
import com.greensock.*;
import com.greensock.easing.*;
var selectX:Number = 0;
var mouseX1:int = 0;
var mouseX2:int = 0;
var mcPosX:int = 0;
var contents:MovieClip = all_mc;
var draggable:Boolean = true;
contents.buttonMode = true;
contents.mouseChildren = false;
contents.x = 0;
contents.y = 70;
addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
function mouseDownHandler(e:MouseEvent):void {
//select the correct point on mc
selectX = contents.x - mouseX;
//for prediction direction later - mouse point 1
mouseX1 = stage.mouseX;
//trace("1: " + mouseX1);
// move mc with mouse
if (draggable) {
addEventListener(Event.ENTER_FRAME, onEnterFrameHandler);
} else {
trace("unable to drag");
}
}
function mouseUpHandler(e:MouseEvent):void {
//for prediction direction later - mouse point 2
mouseX2 = stage.mouseX;
//trace("2: " + mouseX2);
//remove mc move with mouse
removeEventListener(Event.ENTER_FRAME, onEnterFrameHandler);
//check for direction of the mc based on mouseX1 and mouseX2
mouseDirection();
}
function onEnterFrameHandler(e:Event):void {
contents.x = parent.mouseX + selectX;
}
function mouseDirection():void {
if (mouseX1 > mouseX2) {
trace("to the left");
toLeftTween();
} else if (mouseX1 < mouseX2) {
trace("to the right");
toRightTween();
} else {
trace("nothing happened");
}
}
function toLeftTween():void {
if(contents.x<1 && contents.x>199) {
mcPosX = 0;
trace("to left - Panel 1");
} else if(contents.x<-1 && contents.x>-199) {
mcPosX = -200;
trace("to left - Panel 2");
} else if(contents.x<-201 && contents.x>-399) {
mcPosX = -400;
trace("to left - Panel 3");
} else if(contents.x<-401 && contents.x>-599) {
mcPosX = -600;
trace("to left - Panel 4");
} else if(contents.x>-600) {
//What happens now?
}
var toLeftTween:TweenLite = new TweenLite(contents,0.25, {x:mcPosX});
}
function toRightTween():void {
if(contents.x<-601 && contents.x>-799) {
mcPosX = -600;
trace("to right - Panel 4");
} else if(contents.x<-401 && contents.x>-599) {
mcPosX = -400;
trace("to right - Panel 3");
} else if(contents.x<-201 && contents.x>-399) {
mcPosX = -200;
trace("to right - Panel 2");
} else if(contents.x<-1 && contents.x>-199) {
mcPosX = 0;
trace("to right - Panel 1");
} else if(contents.x<-2) {
//What happens now?
}
var toRightTween:TweenLite = new TweenLite(contents,0.25, {x:mcPosX});
}

Answer 1

Good work. The solution is actually quite simple, when you see it.
You need to check the distance between your starting mouse point and your current mouse point, every frame, which it looks like you're doing with selectX and mouseX. Your problem is that when you go past a certain distance, you have no logic to handle your loop.
Because it's a loop, you want to check whether the distance between your starting point and current point is greater than the width of your carousel movieclip, which is 800. If so, you need the logic to loop back on itself. (However, I'm not sure why your toLeftTween and toRightTween functions check that contents.x is in a negative range....I suppose that's because of the registration point on the movieclip?)
(Edit: I see what you did - why you have the negative numbers. You're sliding the movieclip to the left as needed. Now that I'm looking at the way you did this, the modulus won't actually work because you're checking a range between -600 and 200, instead of a range between 0 and 800...)
You'll need something like this.
function toLeftTween():void {
// If contents.x is divisible by the width of the movieclip, it's greater than the mc width.
// We check this here, and grab the remainder.
if (contents.x > 800 || contents.x < -600)
contents.x = contents.x % 800; // Modulus operator. Returns remainder.
if(contents.x<1 && contents.x>199) {
mcPosX = 0;
trace("to left - Panel 1");
} else if(contents.x<-1 && contents.x>-199) {
mcPosX = -200;
trace("to left - Panel 2");
} else if(contents.x<-201 && contents.x>-399) {
mcPosX = -400;
trace("to left - Panel 3");
} else if(contents.x<-401 && contents.x>-599) {
mcPosX = -600;
trace("to left - Panel 4");
} else if(contents.x>-600) { // I think you flipped a sign here... -lunchmeat
//What happens now?
// Due to the modulus, we should never find ourselves in this situation!
}
var toLeftTween:TweenLite = new TweenLite(contents,0.25, {x:mcPosX});
}
That should do the trick, more or less. You'll need to add this to both tween functions. (It might need a little tweaking.) Let me know if you run into any problems. Good luck!

Answer 2

if you want something like
(Note:numbers stands for panels, and index 0 is initial point.)
for index 0
1 - 2 - 3 - 4
for index 1
2 - 3 - 4 - 1
for index -1
4 - 1 - 2 - 3
Seems like you heading wrong way.
First if u need continues loop you have to move movieclips that is out of view to the end. And you need a clone of first element at the end of items for continues look. I would prefer to use bitmapData of content so you wont need a clone of first element and it ll compute faster and the way is easier.