GreenSock TweenNano + AS3 - looping an SWF?

[MWJared]

Hello,

 

I have a client who would like to add looping functionality to an existing banner ad which was developed with Greensock TweenNano. I normally work in a timeline view, so I'm not quite sure how to make this work. I have searched Google and found a few answers but nothing that has worked on my particular file. The actions are written out as steps like so:

function init() {
    step1();
}
function step1(){
    TweenNano.to(text3, frameTime, {delay:frameTime, x:52, onComplete:step2});
}
function step2(){
    TweenNano.to(text3, 0.5, {delay:frameDelay, alpha:0});
    TweenNano.to(text4, frameTime, {delay:frameDelay, x:39});
    TweenNano.to(text4Arrow, 1.5, {delay:frameDelay, x:21, ease:Bounce.easeOut});
}

init();

Can anyone point me in the right direction as to how I can make this animation loop X number of times?

 

Thanks!

[Carl]

Hi and welcome to the GreenSock forums,

 

You need to call your init() function when the last tween finishes (using onComplete) AND you will need to add code to your init() function that resets all the values or all the properties that you tweened in all the steps.

//record starting values
text3.startX = text3.x;
text3.startAlpha = text3.alpha;


function init() {
    text3.x = text3.startX;
    text3.alpha = text3.startAlpha;
    step1();
}
function step1(){
    TweenNano.to(text3, frameTime, {delay:frameTime, x:52, onComplete:step2});
}
function step2(){
    TweenNano.to(text3, 0.5, {delay:frameDelay, alpha:0});
    TweenNano.to(text4, frameTime, {delay:frameDelay, x:39});
    TweenNano.to(text4Arrow, 1.5, {delay:frameDelay, x:21, ease:Bounce.easeOut, onComplete:init});
}


init();

 

you will have to add the appropriate code for resetting text4 and text4arrow.

[MWJared]

Wow, thanks for the quick response! That worked perfectly. One final question: is there an easy to way to delay just the onComplete function? Currently the animation begins to loop immediately after step2 finishes and I would like for it to wait about 5 seconds before calling the init function again.

[Carl]

if you need more time, use delayedCall() instead of the onComplete on the last tween

 

function step2(){
    TweenNano.to(text3, 0.5, {delay:frameDelay, alpha:0});
    TweenNano.to(text4, frameTime, {delay:frameDelay, x:39});
    TweenNano.to(text4Arrow, 1.5, {delay:frameDelay, x:21, ease:Bounce.easeOut});
     


    //call a function 5 seconds after step2 starts
   TweenNano.delayedCall(5, init);


}

http://greensock.com/asdocs/com/greensock/TweenNano.html#delayedCall()

[MWJared]

Exactly what I was looking for, thanks again!