Looping? Repeat function.

[ej23]

Hi

Currently I am trying to figure out how to keep some tweens looping....when a sequence of tweens ends, I want them to start over again after a period of time.

 

Based on what I've been able to put together so far, the "repeat" function, and "repeatdelay" function seem like the like the likely choice. Just add it in the line of code with a value and it should work.

For example:

TweenMax.to(ah1, .5,{alpha:1, ease:Cubic.easeOut, delay:5,repeat:-1,repeatdelay:10});

 

But needless to say this has not worked for me, and I can't seem to figure out why.

 

What am I doing wrong? And I am even going about, what I want to do the right way? (which is just creating some "eye candy", or having a some animations repeat after a few seconds. Basically zero interactivity.

 

If someone could maybe steer me in the right direction you'd really help me out. Thank in advance for any help.

 

Oh here is the code if it helps.

var al1:arrowline = new arrowline();
addChild(al1);
al1.width = 0.1;
al1.height = 1.0;
al1.x = 602;
al1.y = 78.1;


TweenMax.to(al1, 1,{width:350, ease:Cubic.easeOut, delay:5});


var ah1:arrowhead = new arrowhead();
addChild(ah1);
ah1.width = 10.7;
ah1.height = 11.8;
ah1.alpha = 0;
ah1.x = 589.9;
ah1.y = 72;

TweenMax.to(ah1, .5,{alpha:1, ease:Cubic.easeOut, delay:5});

TweenMax.to(ah1, 1,{x:244, ease:Cubic.easeOut, delay:5});


TweenMax.to(lbd, .75,{alpha:1, ease:Strong.easeOut, delay:5.75});

var al2:arrowline = new arrowline();
addChild(al2);
al2.width = 0.1;
al2.height = 1.0;
al2.x = 602;
al2.y = 163.1;

TweenMax.to(al2, 1,{width:350, ease:Cubic.easeOut, delay:5.5});


var ah2:arrowhead = new arrowhead();
addChild(ah2);
ah2.width = 10.7;
ah2.height = 11.8;
ah2.alpha = 0;
ah2.x = 589.9;
ah2.y = 157.1;


TweenMax.to(ah2, .5,{alpha:1, ease:Cubic.easeOut, delay:5.5});

TweenMax.to(ah2, 1,{x:244, ease:Cubic.easeOut, delay:5.5});

TweenMax.to(lyd, .75,{alpha:1, ease:Strong.easeOut, delay:6.25});


var al3:arrowline = new arrowline();
addChild(al3);
al3.width = 0.1;
al3.height = 1.0;
al3.x = 602;
al3.y = 240.1;

TweenMax.to(al3, 1,{width:350, ease:Cubic.easeOut, delay:6});


var ah3:arrowhead = new arrowhead();
addChild(ah3);
ah3.width = 10.7;
ah3.height = 11.8;
ah3.alpha = 0;
ah3.x = 589.9;
ah3.y = 234.7;


TweenMax.to(ah3, .5,{alpha:1, ease:Cubic.easeOut, delay:6});

TweenMax.to(ah3, 1,{x:244, ease:Cubic.easeOut, delay:6});

TweenMax.to(lgd, .75,{alpha:1, ease:Strong.easeOut, delay:6.75});


var al4:arrowline = new arrowline();
addChild(al4);
al4.width = 0.1;
al4.height = 1.0;
al4.x = 602;
al4.y = 320.1;

TweenMax.to(al4, 1,{width:350, ease:Cubic.easeOut, delay:6.5});


var ah4:arrowhead = new arrowhead();
addChild(ah4);
ah4.width = 10.7;
ah4.height = 11.8;
ah4.alpha = 0;
ah4.x = 589.9;
ah4.y = 313.7;


TweenMax.to(ah4, .5,{alpha:1, ease:Cubic.easeOut, delay:6.5});

TweenMax.to(ah4, 1,{x:244, ease:Cubic.easeOut, delay:6.5});

TweenMax.to(dbd, .75,{alpha:1, ease:Strong.easeOut, delay:7.25});



TweenMax.to(ah1, .5,{alpha:0, ease:Cubic.easeOut, delay:7.5});
TweenMax.to(al1, 1,{alpha:0, ease:Cubic.easeOut, delay:7.5});
TweenMax.to(lbd, .75,{alpha:0, ease:Strong.easeOut, delay:7.5});


TweenMax.to(ah2, .5,{alpha:0, ease:Cubic.easeOut, delay:7.75});
TweenMax.to(al2, 1,{alpha:0, ease:Cubic.easeOut, delay:7.75});
TweenMax.to(lyd, .75,{alpha:0, ease:Strong.easeOut, delay:7.75});

TweenMax.to(ah3, .5,{alpha:0, ease:Cubic.easeOut, delay:8});
TweenMax.to(al3, 1,{alpha:0, ease:Cubic.easeOut, delay:8});
TweenMax.to(lgd, .75,{alpha:0, ease:Strong.easeOut, delay:8});

TweenMax.to(ah4, .5,{alpha:0, ease:Cubic.easeOut, delay:8.25});
TweenMax.to(al4, 1,{alpha:0, ease:Cubic.easeOut, delay:8.25});
TweenMax.to(dbd, .75,{alpha:0, ease:Strong.easeOut, delay:8.25});

 

If the full code is need just let me know.

 

Thanks again.

[GreenSock]

Are you using an old (pre-v11) version? The repeat and repeatDelay properties are new in v11. Please make sure you're using the latest stuff from http://www.tweenmax.com

 

If that still isn't working for you, please post a simple FLA that demonstrates the issue. Your first line of code looked perfectly acceptable as far as I could tell:

 

TweenMax.to(ah1, .5, {alpha:1, ease:Cubic.easeOut, delay:5, repeat:-1, repeatdelay:10});

 

I tested it in a sample FLA on my end and it worked great, so I suspect you're using a stale version of the platform.

[ukla]

Doesn't work for me either.

 

There is no repeat delay ... once the alpha reaches 1 it repeats immediately.

 

I just updated all of my plugins and classes.

 

Funny, but the revision date in TweenMax.as reads

 

* VERSION: 11.12

* DATE: 11/25/2009

 

Yet tweenmax.com says it was updated on 12/09/2009.

[ukla]

Ah ha!

 

It is "repeatDelay" .... not "repeatdelay".

[ej23]

For starters, much thanks for your help and attention. I really appreciate it.

 

Well I did download the most recent update, and as of now it looks like it solved my problem. Hopefully it will remain problem free from now.

 

 

Again thanks for the help!

[GreenSock]

Funny, but the revision date in TweenMax.as reads

 

* VERSION: 11.12

* DATE: 11/25/2009

 

Yet tweenmax.com says it was updated on 12/09/2009.

 

Yep, that's because TweenLite was updated on 12/9 which affects TweenMax because TweenMax extends TweenLite. However, the actual TweenMax class file didn't have any changes. See what I mean?

 

Anyway, glad you guys figured it out - it is indeed repeatDelay, not repeatdelay

[ej23]

How does the repeatDelay, effect the regular delays?

 

Should the repeatDelay setting be set with the regular delays taken into consideration?

 

Do they even effect each other?

 

I mention this because when I try to use the repeat, and repeatDelay functions, the results are not what I expected. What I am hoping for is that my tweens just keep on playing, with a specific time in between.

 

I am I doing something wrong?

 

Here is my code

 

the first lines

import com.greensock.TweenMax; 
import com.greensock.easing.*; 


stop();

I've included this just in case there is something that I am not importing, or importing incorrectly.

 

 

/////////////////THE CODE BETWEEN HERE IS WHAT THE REST OF THE CODE WILL LOOK LIKE. I JUST DID THE FIRST FEW TWEENS TO SHOW WHAT I AM DOING/////

var al1:arrowline = new arrowline();
addChild(al1);
al1.width = 0.1;
al1.height = 1.0;
al1.x = 602;
al1.y = 78.1;


TweenMax.to(al1, 1,{width:350, ease:Cubic.easeOut, delay:5});


var ah1:arrowhead = new arrowhead();
addChild(ah1);
ah1.width = 10.7;
ah1.height = 11.8;
ah1.alpha = 0;
ah1.x = 589.9;
ah1.y = 72;

TweenMax.to(ah1, .5,{alpha:1, ease:Cubic.easeOut, delay:5, repeat:-1, repeatDelay:10});

TweenMax.to(ah1, 1,{x:244, ease:Cubic.easeOut, delay:5, repeat:-1, repeatDelay:10});


TweenMax.to(lbd, .75,{alpha:1, ease:Strong.easeOut, delay:5.75, repeat:-1, repeatDelay:10});

/////////////////////////////////////////////////////////////////////////////////////////


var al2:arrowline = new arrowline();
addChild(al2);
al2.width = 0.1;
al2.height = 1.0;
al2.x = 602;
al2.y = 163.1;

TweenMax.to(al2, 1,{width:350, ease:Cubic.easeOut, delay:5.5});


var ah2:arrowhead = new arrowhead();
addChild(ah2);
ah2.width = 10.7;
ah2.height = 11.8;
ah2.alpha = 0;
ah2.x = 589.9;
ah2.y = 157.1;


TweenMax.to(ah2, .5,{alpha:1, ease:Cubic.easeOut, delay:5.5});

TweenMax.to(ah2, 1,{x:244, ease:Cubic.easeOut, delay:5.5});

TweenMax.to(lyd, .75,{alpha:1, ease:Strong.easeOut, delay:6.25});


var al3:arrowline = new arrowline();
addChild(al3);
al3.width = 0.1;
al3.height = 1.0;
al3.x = 602;
al3.y = 240.1;

TweenMax.to(al3, 1,{width:350, ease:Cubic.easeOut, delay:6});


var ah3:arrowhead = new arrowhead();
addChild(ah3);
ah3.width = 10.7;
ah3.height = 11.8;
ah3.alpha = 0;
ah3.x = 589.9;
ah3.y = 234.7;


TweenMax.to(ah3, .5,{alpha:1, ease:Cubic.easeOut, delay:6});

TweenMax.to(ah3, 1,{x:244, ease:Cubic.easeOut, delay:6});

TweenMax.to(lgd, .75,{alpha:1, ease:Strong.easeOut, delay:6.75});


var al4:arrowline = new arrowline();
addChild(al4);
al4.width = 0.1;
al4.height = 1.0;
al4.x = 602;
al4.y = 320.1;

TweenMax.to(al4, 1,{width:350, ease:Cubic.easeOut, delay:6.5});


var ah4:arrowhead = new arrowhead();
addChild(ah4);
ah4.width = 10.7;
ah4.height = 11.8;
ah4.alpha = 0;
ah4.x = 589.9;
ah4.y = 313.7;


TweenMax.to(ah4, .5,{alpha:1, ease:Cubic.easeOut, delay:6.5});

TweenMax.to(ah4, 1,{x:244, ease:Cubic.easeOut, delay:6.5});

TweenMax.to(dbd, .75,{alpha:1, ease:Strong.easeOut, delay:7.25});


////////////////THIS CODE HERE BASICALLY "RESETS" THE TWEENS TO THAT THEY CAN START OVER AGAIN////////

TweenMax.to(ah1, .5,{alpha:0, ease:Cubic.easeOut, delay:7.5, repeat:-1, repeatDelay:10});
TweenMax.to(al1, 1,{alpha:0, ease:Cubic.easeOut, delay:7.5, repeat:-1, repeatDelay:10});
TweenMax.to(lbd, .75,{alpha:0, ease:Strong.easeOut, delay:7.5, repeat:-1, repeatDelay:10});

////////////////////////////////////////

TweenMax.to(ah2, .5,{alpha:0, ease:Cubic.easeOut, delay:7.75});
TweenMax.to(al2, 1,{alpha:0, ease:Cubic.easeOut, delay:7.75});
TweenMax.to(lyd, .75,{alpha:0, ease:Strong.easeOut, delay:7.75});

TweenMax.to(ah3, .5,{alpha:0, ease:Cubic.easeOut, delay:8});
TweenMax.to(al3, 1,{alpha:0, ease:Cubic.easeOut, delay:8});
TweenMax.to(lgd, .75,{alpha:0, ease:Strong.easeOut, delay:8});

TweenMax.to(ah4, .5,{alpha:0, ease:Cubic.easeOut, delay:8.25});
TweenMax.to(al4, 1,{alpha:0, ease:Cubic.easeOut, delay:8.25});
TweenMax.to(dbd, .75,{alpha:0, ease:Strong.easeOut, delay:8.25});

 

The repeats happen, but they just flash on the screen for a split second, and some of the tween don't even execute. So it looks like the tweens are not repeating.

 

 

I am sure there is something I am overlooking, or not considering, but as I write this I can't really seem to figure exactly why it's not working.

 

So any insight, or feedback would be immensely helpful.

 

Thanks for any previous help, and thanks in Advance for any future help!!!

 

[ukla]

Well, for "ah1" you only have two tweens - alpha and x. Which one isn't working?

 

I cut and pasted your code for "ah1" and it works properly.

 

The flash is the quick alpha change from 0 to 1 in 0.5 seconds. When the repeat occurs "ah1" alpha goes to 0 and tweens to 1 over 0.5 seconds.

[ej23]

Thanks again for your help everyone.

 

Here is what I am thinking about the repeat functions, so please tell me where I am wrong.

 

Now, my assumption is that the repeat, will pick up, where the last tween left off, or will tween the values of the last tween before the repeat sets in. That after a number of tweens is executed, the repeat function will start , and delayRepeat value is set to allow the initial tweens to execute, before starting all over again.

 

I hope this makes sense. Obviously I am not understanding something, and hopefully I will with your help.

 

Thanks Again.

[GreenSock]

"delay" only affects the time before the tween/timeline first begins. "repeatDelay" describes the time between when the tween/timeline completes and when it begins repeating. So...

 

(and so on)

 

Have you looked into the new TimelineLite and TimelineMax classes? They can be really helpful for sequencing and managing groups of tweens. I did a little 16-minute "TimelineLite/Max Basics" video tutorial that you might find helpful. http://blog.greensock.com/timeline-basics/.

[ej23]

Okay that makes sense, and clears somethings up for me.

 

I'll have to confess to taking a sort of "trial and error" approach to my learning AS3, and I've learned that this sometimes becomes more of a detriment, than a benefit.

I only mention this because, if I watch the video you made specifically to instruct someone in my position, I could probably avoid these self imposed pitfalls, and make things a little easier

 

Anyway thanks for the help, and direction!

[GreenSock]

I'll have to confess to taking a sort of "trial and error" approach to my learning AS3, and I've learned that this sometimes becomes more of a detriment, than a benefit.

 

Quite the contrary - that's pretty much how I learned most of what I know now. Tons of trial and error. Many, many, MANY mistakes. That's how many of us learn, so don't feel bad about it. Of course it is helpful to read the documentation and any examples first before diving in to trial and error