Simple slideshow question

[Bragolgirith]

Hello all,

 

I'm trying to create a slideshow that seamlessly loops photos from an array.

It seems like a simple concept, yet i can't seem to find a way to do it by using minimal code.

I want to use a Timeline so that i can pause and play the slideshow.

 

If I create a Timeline with {repeat:-1} to show the photos one after another, when it completes it (logically) starts from the beginning, which is to say, from an empty screen.

var myTimelineMax:TimelineMax = new TimelineMax({repeat:-1});

for(var i:uint = 0; i<myPhotos.length;i++){
myTimelineMax.append(new TweenMax(myPhotos[i],2,{autoAlpha:1}),2);
}

This leaves me with a gap after the first loop finishes.

 

At that point I tried to restart the timeline from the 4th second by using myTimelineMax.gotoAndPlay(4) in order to not have that gap, like this:

var myTimelineMax:TimelineMax = new TimelineMax({onComplete:onTimelineMaxComplete});

for(var i:uint = 0; i<myPhotos.length;i++){
myTimelineMax.append(new TweenMax(myPhotos[i],2,{autoAlpha:1}),2);
}
function onTimelineMaxComplete(event:TweenEvent):void{
myTimelineMax.gotoAndPlay(4);
}

but that just created an ugly transition between the last and the first photo, since the first photo just shows up without any alpha tweening.

 

So I decided to improve on that by adding a tween at the end of the Timeline to show the first photo, but now i had to manage the depth and the alpha of my photos manually. Like this:

var myTimelineMax:TimelineMax = new TimelineMax({onComplete:onTimelineMaxComplete});

for(var i:uint = 0; i<myPhotos.length;i++){
myTimelineMax.append(new TweenMax(myPhotos[i],2,{autoAlpha:1,onStart:manageDepthAndAlpha,onStartParams:[myPhotos[i]]}),2);
}
myTimelineMax.append(new TweenMax(myPhotos[0],2,{autoAlpha:1,onStart:manageDepthAndAlpha,onStartParams:[myPhotos[0]]}),2); //adding the first photo again, so that it animates nicely
function manageDepthAndAlpha(cd:ContentDisplay):void{
cd.alpha = 0;
cd.visible = false;
myPhotosContainer.addChild(cd);
}
function onTimelineMaxComplete(event:TweenEvent):void{
myTimelineMax.gotoAndPlay(4,false);//needed to set the second parameter to false, otherwise the onStart function wasn't triggering
}

...but for some reason the last tween is still not working as planned and the photo just pops up without tweening. Also my code is starting to look like an overkill for such a *simple* task.

 

So here I am, hoping for suggestions

 

Thank you in advance,

Brago.

[GreenSock]

You shouldn't need to mess with the depths like that. Here's an idea that leverages v12 of the platform:

 

 

var myPhotos:Array = [image1, image2, image3, image4];

//fade the first one in outside the TimelineMax so that it's not included in the loop
TweenLite.from(myPhotos[0], 1, {autoAlpha:0});

//create a TimelineMax that's looped infinitely, and delay 1 second so that it's offset from the first fade in
var tl:TimelineMax = new TimelineMax({delay:1, repeat:-1});

//create a staggered animation for all of the other images (excluding the first one). Notice the one-second offset at the end which is important when we loop so that we have a 1 second gap at the beginning for the first image to show.
tl.staggerFrom(myPhotos.slice(1), 1, {autoAlpha:0}, 2, 1);

//set all of the images between the top and bottom (first and last) to be invisible so that we can fade out the top one and it blends into the first one naturally
tl.set(myPhotos.slice(1, myPhotos.length - 1), {autoAlpha:0});

//fade out the last image
tl.to(myPhotos[myPhotos.length - 1], 1, {autoAlpha:0}, 1);

 

Does that help?

[Bragolgirith]

Yes - that does it perfectly.

In hindsight, it does make sense to blend in the first image outside the timeline and use it as a background.

I will add the stagger function to my arsenal - with access to such powerful tools, one has to start thinking with them.

 

It is indeed a pleasure to work with your libraries,

Thank you,

Brago.