Forever scroll

[rondog]

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/

[Scythe]

When you say you want to bring clip 1 to that position, I assume you mean clip 0, correct?

Here's what's weird about the SWF. You're tweening every movie clip on the list, including the ones that aren't even visible at the time. And since there's a delay between each tween, the tweens that you're seeing sometimes have to wait for the tweens that you're not seeing to finish. It would probably be better to immediately tween the clip that's closest to the edge among the ones that are visible.

Here's what I think would be best. Don't even add the invisible clips as children until they're about to come into view, then remove them as soon as they're out of view. That way you can control which clips get added so that if you're at the end of the list the code knows to pick clip 0 instead of clip 8 which doesn't exist.

[rondog]

Yes sorry..I meant 0. Your idea sounds like it would work ,but I dont know where to begin :o_rly: how should I start with this?

[rondog]

So i've made some progress:


// This handles clicking the arrows
private function arrowClick(e:MouseEvent):void
{
var l:uint = VISIBLE_THUMBS;
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;
TweenMax.to(nextTarget, 0.3, {x:nextTarget.targetX, ease:Expo.easeOut, delay:0 + (i * 0.04)});
}
addClip("next");
}
else
{
for (i = l; i-- > 0;)
{
delay = l - i;
nextTarget = thumbHolder.getChildByName("thumb" + i);
nextTarget.targetX += nextTarget.width + THUMB_SPACING;
TweenMax.to(nextTarget, 0.3, {x:nextTarget.targetX, ease:Expo.easeOut, delay:0 + (delay * 0.04)});
}
addClip("prev");
}
}

private function addClip(dir:String):void
{
if (dir == "next")
{
nextIndex++;
prevIndex++;
if (nextIndex >= data.length)
{
nextIndex = 0;
}
if (prevIndex > data.length)
{
prevIndex = 1;
}
trace("remove: " + (prevIndex-1));
trace("add: " + nextIndex);
}
else
{
prevIndex--;
nextIndex--;
if (prevIndex < 0)
{
prevIndex = data.length - 1;
}
if (nextIndex < -1)
{
nextIndex = data.length - 2;
}
trace("remove: " + (nextIndex+1));
trace("add: " + (prevIndex));
}
}


I finally got the numbers to trace out the right numbers to add the newly coming items and remove the leaving items. Now I need those numbers to do something for me =D

[Scythe]

I see you've switched from TweenLite to TweenMax. Looks like you're on the right track.

When you create your thumbnails, you store them each only temporarily in the variable t. Maybe you should store them in an array so that you can refer to them as t[i] rather than thumbHolder.getChildByName("thumb" + i). Then in the arrowClick for loops you can use prevIndex and nextIndex to make sure you're referring to the right ones, with something like t[i + prevIndex]. Not sure what those variables are supposed to refer to exactly, but you can figure it out. The way it looks to me, you could probably get by with just one of those two variables to tell you what position the user has scrolled to.

Then of course,

trace("remove: " + (prevIndex-1));
trace("add: " + nextIndex);
could be replaced with

thumbHolder.removeChild(t[prevIndex-1]);
thumbHolder.addChild(t[nextIndex]);
or whatever prevIndex and nextIndex need to be adjusted to.

[rondog]

man this is really confusing me! Your method seems cleaner because I know right now my code is a mess and I dont like it, but I am somewhat close..only the next arrow kind of works...you can see it here:

http://ronnieswietek.com/flashden/tb_banner/BannerRotator.swf

It works all the way up til it rounds back to 0 and then I get a null error. If you feel like checking it out, I've uploaded it to my server. Til then I am going to keep trying this...I know there has to be an easier way.

I included all the assets

http://ronnieswietek.com/flashden/tb_banner/BannerRotator.zip

ahh im almost tempted to start over

[rondog]

ahh ok I have most of it figured out...I am sometimes getting an undefined error while going back and forth...and naturally its not coming up right now...Anyway here is the code


private function arrowClick(e:MouseEvent):void
{
var target:*;
switch (e.target.name)
{
case "nextThumb" :
for (i = 0; i < currentThumbs.length; i++)
{
target = thumbnails[currentThumbs[i]];
target.targetX -= target.width + THUMB_SPACING;
TweenMax.to(target, 0.3, {x:target.targetX, ease:Expo.easeOut, delay:0 + (i * 0.04)});
}
addClip("next");
break;
case "prevThumb" :
for (i = currentThumbs.length - 1; i >= 0; i--)
{
delay = currentThumbs.length - i;
target = thumbnails[currentThumbs[i]];
target.targetX += target.width + THUMB_SPACING;
TweenMax.to(target, 0.3, {x:target.targetX, ease:Expo.easeOut, delay:0 + (delay * 0.04)});
}
addClip("prev");
break;
}
}

private function addClip(dir:String):void
{
var target:*;
if (dir == "next")
{
for (i = 0; i < currentThumbs.length; i++)
{
if (currentThumbs[i] == (data.length - 1))
{
currentThumbs[i] = 0;
}
else
{
currentThumbs[i] = currentThumbs[i] + 1;
}
}
trace("n: ",currentThumbs);

target = thumbnails[nextIndex];
target.x = (target.width + THUMB_SPACING) * VISIBLE_THUMBS;
target.targetX = target.x;
target.targetX -= target.width + THUMB_SPACING;
TweenMax.to(target, 0.3, {x:target.targetX, ease:Expo.easeOut, delay:0 + (i * 0.04),onComplete:removeHiddenThumb,onCompleteParam s:[thumbnails[prevIndex]]});
thumbHolder.addChild(thumbnails[nextIndex]);

nextIndex++;
prevIndex++;
if (nextIndex >= data.length)
{
nextIndex = 0;
}
if (prevIndex > data.length)
{
prevIndex = 1;
}
}
else
{
for (i = 0; i < currentThumbs.length; i++)
{
if (currentThumbs[i] == 0)
{
currentThumbs[i] = data.length - 1;
}
else
{
currentThumbs[i] = currentThumbs[i] - 1;
}
}
trace("p: ",currentThumbs);

target = thumbnails[prevIndex];
target.x = 0 - (target.width + THUMB_SPACING);
target.targetX = target.x;
target.targetX += target.width + THUMB_SPACING;
TweenMax.to(target, 0.3, {x:target.targetX, ease:Expo.easeOut, delay:0 + ((delay+1) * 0.04),onComplete:removeHiddenThumb,onCompleteParam s:[thumbnails[nextIndex-1]]});
thumbHolder.addChild(thumbnails[prevIndex]);

prevIndex--;
nextIndex--;
if (prevIndex < 0)
{
prevIndex = data.length - 1;
}
if (nextIndex < 0)
{
nextIndex = data.length - 1;
}
}
}

private function removeHiddenThumb(target):void
{
if (target != undefined)
{
if (target.getChildByName(String("thumb" + (data.length - 1))))
{
thumbHolder.removeChild(target);
}
}
}


Starting over seemed to have helped :/

edit::
ok I got the error to come up. It says:


TypeError: Error #1010: A term is undefined and has no properties.
at com.ronnieswietek.banners::ThumbBanner/com.ronnieswietek.banners:ThumbBanner::addClip()[D:\flashden\tb_banner\com\ronnieswietek\banners\Th umbBanner.as:174]
at com.ronnieswietek.banners::ThumbBanner/com.ronnieswietek.banners:ThumbBanner::arrowClick( )[D:\flashden\tb_banner\com\ronnieswietek\banners\Th umbBanner.as:117]


line 174 is:


target = thumbnails[prevIndex];//hitting previous


It happens when I hit next and 0 disappears, then hit previous

[rondog]

ok I figured it out..woohoo!! I just added a:


if (prevIndex == data.length) //length of the array is 8
{
prevIndex = 0;
}


It was tracing 8 when it should have been 0.