I have some movieclips placed horizontally with next and previous arrows. What I want to happen is when they reach the end of the horizontal list, the first movieclip is now at then end…after that its now the second.
you can see what I have so far here: http://ronnieswietek.com/flashden/tb_banner/BannerRotator.swf
if you go next, next, next etc, you will see clip 7 is the last at that point, I want to bring clip 1 to that position. Here is my relevant code:
// This adds the Thumbnail MC to thumbHolder X amount of times
private function onComplete(e:Event):void
{
data = xml.getXMLData();
for (var i:int = 0; i < data.length; i++)
{
var t:Thumbnail = new Thumbnail();
t.name = "thumb" + i;
t.x = (t.width + THUMB_SPACING) * i;
t.targetX = t.x;
t.txt.text = String(i);
t.txt.mouseEnabled = false;
thumbHolder.addChild(t);
t.addEventListener(MouseEvent.ROLL_OUT, genericOut);
t.addEventListener(MouseEvent.ROLL_OVER, genericOver);
}
addEvents();
}
// This handles clicking the arrows
private function arrowClick(e:MouseEvent):void
{
var l:uint = data.length;
var i:int;
var delay:int;
var nextTarget:*;
if (e.currentTarget.name == "nextThumb")
{
for (i = 0; i < l; i++)
{
nextTarget = thumbHolder.getChildByName("thumb" + i);
nextTarget.targetX -= nextTarget.width + THUMB_SPACING;
TweenLite.to(nextTarget, 0.3, {x:nextTarget.targetX, delay:0 + (i * 0.04),onComplete:enableArrows});
}
}
else
{
for (i = l; i-- > 0;)
{
delay = l - i;
nextTarget = thumbHolder.getChildByName("thumb" + i);
nextTarget.targetX += nextTarget.width + THUMB_SPACING;
TweenLite.to(nextTarget, 0.3, {x:nextTarget.targetX, delay:0 + (delay * 0.04),onComplete:enableArrows});
}
}
nextThumb.removeEventListener(MouseEvent.CLICK, arrowClick);
prevThumb.removeEventListener(MouseEvent.CLICK, arrowClick);
}
// here so the tweens dont overwrite eachother
private function enableArrows()
{
thumbIndex++;
if (thumbIndex == data.length)
{
nextThumb.addEventListener(MouseEvent.CLICK, arrowClick);
prevThumb.addEventListener(MouseEvent.CLICK, arrowClick);
thumbIndex = 0;
}
}
A good example is hulu’s banner: http://www.hulu.com/