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.