Sliding gallery - how to "loop around"?

[tdellaringa]

Hello,

I'm working on a sliding featured gallery like Kongregate.com or Hulu.com uses on their home pages. What I have so far is here:

http://www.pixelmech.com/rev/gallerytest.swf

Where I am running into trouble is in the loop around/wrap around areas. My next and previous buttons tween to the next/previous item just fine. However when I get to the last/first, it gets tricky.

What I have done when you get to feature #5 is check for the x position, and if I am going beyond 5, I reset it so that we pull in #1 instead. The problem is that this scrolls in #1 from the wrong direction. (Take a look at the SWF above to see what I mean).

If I shoot further back in negative X direction and scroll that way, I'll end up with blank space at the start of the move. I could dupe #5 and put it there, but then I have two versions of feature #5 (and #1 for the wrap the other way) that have to be maintained. (Note these will be more than just a blank square obviously, they will each be movie clips that do things).

Possibly that is the correct way? Or am I going about this the wrong way. Would it make more sense to dynamically create, scroll and remove the clips on each button click? (I'm not sure how I would do that exactly)

Any suggestions would be much appreciated. I suppose I could also add the buttons via actionscript too, instead of placing them in a layer and them zipping them to the top, although I'm not sure it matters much.

Here is my code:

import fl.transitions.Tween;
import fl.transitions.easing.*;

stop();
stage.frameRate = 31;

var gallery:MovieClip = new Gallery();

gallery.x = 240;
gallery.y = 0;
addChild(gallery);

setChildIndex(btn_next,numChildren - 1);
setChildIndex(btn_previous,numChildren - 1);

btn_next.addEventListener(MouseEvent.CLICK, nextFeature);
btn_previous.addEventListener(MouseEvent.CLICK, prevFeature);

function nextFeature(event:MouseEvent) {
    var startValue:Number = gallery.x;
    var finishValue:Number = startValue - 520;
    var duration:Number = 1;
   
    if (finishValue < -1840) {
        trace('get 1st');
        startValue = -280;
        finishValue = 240;
    }
   
    var galleryXTween:Tween = new Tween(gallery, "x", Strong.easeOut, startValue, finishValue, duration, true);
   
}

function prevFeature(event:MouseEvent) {
    var startValue:Number = gallery.x;
    var finishValue:Number = startValue + 520;
    var duration:Number = 1;
   
    var galleryXTween:Tween = new Tween(gallery, "x", Strong.easeOut, startValue, finishValue, duration, true);
   
}

Also one other thing, I note that if the user clicks one of the buttons before the tween completes, it throws the whole thing off (since it grabs the x value when clicked) - is there a way to disable the buttons until the tween is complete?

[tdellaringa]

A little update, I figured the numbers to get the wrap arounds - 5 to 1 and 1 to 5 to scroll in the proper direction. The problem still remains though, that on those it will scroll from "blank" space, because nothing is there. (Obviously because this is linear movement).

I guess the easy answer is to place a fake screen of 1 and 5 on either side so there is something there when the wraparound occurs. It just seems that there would be a more elegant and sensible way to do this. Here's the updated functions:

function nextFeature(event:MouseEvent) {
    var startValue:Number = gallery.x;
    var finishValue:Number = startValue - 520;
    var duration:Number = 1;
    
    // if next on 5, go to 1 instead
    if (finishValue < -1840) {
        trace('get 1st');
        startValue = 760;
        finishValue = 240;
    }
    
    var galleryXTween:Tween = new Tween(gallery, "x", Strong.easeOut, startValue, finishValue, duration, true);
 
}

function prevFeature(event:MouseEvent) {
    var startValue:Number = gallery.x;
    var finishValue:Number = startValue + 520;
    var duration:Number = 1;
    
    // if previous on 1, go to 5 instead
    if (finishValue > 240) {
        trace('get 5th');
        startValue = -2360;
        finishValue = -1840;
    }
    
    var galleryXTween:Tween = new Tween(gallery, "x", Strong.easeOut, startValue, finishValue, duration, true);

}

[sstalder]

I think you are going about this the wrong way. What I always do is dynamically place each "slide" into an array and simply iterate through that array with a counter.

Without seeing either all of your code or you FLA it would be difficult to tailer a good example to what your doing. Are you able to provide either one of those?

[tdellaringa]

That does sound like a better way, I wold love it if you could provide a simple example. I made a bit more progress yesterday in that I get it to "wrap" but as I said, the wrap ones lose the effect of scrolling from one to another. The current SWF can be viewed here:

http://www.pixelmech.com/flash/gallerytest.swf

The .fla and .swf files are in this zip:

http://www.pixelmech.com/flash/gallery.zip

Any help is *greatly* appreciated!

[sstalder]

Here is a good start for you.

[tdellaringa]

Ah, that's great! Thank you very much - this is extremely helpful. I didn't think to tween the one out, and then the next one in, but now that makes sense. And certainly using the array is better too. This will make keeping the assets in line much easier too.

Thanks again!

[sstalder]

You're welcome!