Jump to content
GreenSock

MWJared

GreenSock TweenNano + AS3 - looping an SWF?

Recommended Posts

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!

Link to comment
Share on other sites

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.
  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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()

  • Like 1
Link to comment
Share on other sites

Exactly what I was looking for, thanks again!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×