trouble with timing yoyo with repeatDelay and repeat

[qis qis qis]

Hello,

 

I'm working on an animation that will become a screensaver. Below I have a for loop that tweens an array of sprites from alpha 0 to alpha 1. It executes exactly as I need it, but when I try to tween endframe (as written in the second TweenMax) the delay of 18 seconds and the repeatDelay of 2.5 only works on the first loop. After the first loop, endframe fades in and out every 2.5 seconds. Here is the code snippet:

 

for (var i:int = 0; i < gridBoxes.length; i++) {

TweenMax.to(gridBoxes[i], .5, {alpha:1, delay:Math.random() * 7, ease:Circ.easeIn, repeat:-1, yoyo:true, repeatDelay:10});

}

TweenMax.to(endframe, .5, {alpha:1, delay: 18, ease:Circ.easeIn, repeat:-1, yoyo:true, repeatDelay:2.5});

 

 

How can I solve this so that endframe fades in and out every 18 seconds indefinitely? I also have to apply this ability to several other movieclips exported for as3 that will fade in and out every 5, 10 and 15 seconds. By the way, endframe is a movieclip exported for as3. It's a logo so that's why I exported for as3.

 

Thank you so much in advance!

[Carl]

Hi

 

Welcome to the GreenSock forums.

 

The delay only is applied the first time the tween plays.

The repeatDelay is applied after every iteration of the animation.

 

written out it looks like this

 

18 seconds of initial delay > animation forward > 2.5 repeatDelay > animation backward > 2.5 repeatDelay > animation forward > 2.5 repeatDelay > animation backward... infinitely

 

IF you weren't yoyo-ing it would be very possible to play the same tween forward every 18 seconds with just using

 

TweenMax.to(endframe, .5, {alpha:1, delay: 18, ease:Circ.easeIn, repeat:-1, repeatDelay:17.5});

 

*note the repeatDelay is 18 - minus duration

 

----

 

First if you can afford a few extra kb in your file, you really should look into using TimelineMax which is GreenSock's tool for creating complex sequences. A TimelineMax is basically a container for all your tweens and you can schedule them all to run in relation to each other. You can control this "group of tweens" as a single item and tell it to pause, repeat, reverse among other cool things.

 

In short, instead of creating a bunch of tweens with independent delay timings, you just insert them all into a TimelineLite or Max where you want them to go.

 

There is a great series on TimelineLite v11 here:

http://active.tutspl...-starter-guide/

 

---

 

To create an animation that fades a clip in and out every 5 seconds you could do this:

 

mc.alpha = 0;

var tl:TimelineMax = new TimelineMax({delay:5, repeatDelay:3, repeat:-1});
tl.insert(TweenMax.to(mc, .5, {alpha:1, yoyo:true, repeat:1, repeatDelay:1, yoyo:true}));

addEventListener(Event.ENTER_FRAME, showTime);

function showTime(e:Event):void{
time_txt.text = String(int(getTimer()/1000));
}

 

The timeline has only 1 tween. Note the various repeat-related settings on the TimelineMax and TweenMax.

 

For your screenscaver you could put all of your tweens into 1 master TimelineMax. To jump right into seeing how a timeline can hold multiple tweens check out the examples here:

http://www.snorkl.tv/2011/04/fun-and-quick-timelinemax-effect-cluster-bomb/

---

 

If you want to or need to avoid using the Timeline classes you could use TweenLite.delayedCall() to recursively call a function that restarts your tween like so:

 

 

mc.alpha = 0;

var fadeTween:TweenMax = TweenMax.to(mc, .5, {alpha:1, yoyo:true, repeat:1, repeatDelay:1, yoyo:true, paused:true});

function fadeInOut(){
fadeTween.restart();
TweenLite.delayedCall(5, fadeInOut);
}

//initial 5 second delay:
TweenLite.delayedCall(5, fadeInOut);

addEventListener(Event.ENTER_FRAME, showTime);

function showTime(e:Event):void{
time_txt.text = String(int(getTimer()/1000));
}

 

I strongly recommend using TimelineMax though.

 

Flash cs4 flas of each version attached (use your own greensock v11 files)

fadeInAndOutEvery5Seconds.zip

[qis qis qis]

Thanks for your welcoming and your reply.

 

I actually did figure out a solution to my problem while I was waiting. Here's what I wrote to solve it:

 

for (var i:int = 0; i < gridBoxes.length; i++) {

TweenMax.to(gridBoxes[i], .5, {alpha:1, delay:Math.random() * 7, ease:Circ.easeIn, repeat:-1, yoyo:true, repeatDelay:10}); }

function fadeLogoIn():void { TweenMax.to(endframe, .5, {alpha:1, ease:Circ.easeIn, delay:18, onComplete:fadeLogoOut}); }

function fadeLogoOut():void { TweenMax.to(endframe, .5, {alpha:0, ease:Circ.easeOut, delay:2, onComplete:fadeLogoIn}); }

fadeLogoIn();

 

The timing is set so the objects never fall out of sync.

 

I think this method could get very complicated if there were more than a few objects. Now that I solved it, though, I can check out timelinelite! Thanks for the tips.

 

Best,

 

 

qis