How to repeat a Tweenlite function only a few times?

[jaswa]

Hi AS3 users,

 

Happy new year!

 

I'm not very familiar with A3 but I managed to make a scripted animation with the Greensock tweens. But now my client wants me to repeat the animation only a few times. It has to stop on the last frame after 30 secs. But how do I do that? Hope somebody will help me with this.

 

The file is too big for upload but here is the code:

 

Cheers, jaswa

 

import com.greensock.TweenLite;
import com.greensock.easing.*;

var Mybg1 = new bg1();
var Mybg2 = new bg2();
var Mybg3 = new bg3();
var Mybg4 = new bg4();
var Mybtn = new btn();

addChild(Mybg1);
addChild(Mybg2);
addChild(Mybg3);
addChild(Mybg4);
addChild(Mybtn);

Mybtn.x = 0;
Mybtn.y = 0;

// URLRequest variable(where to navigate)
var Amexlink:URLRequest = new URLRequest("https://xxxxxx");

// Navigation function
function navigateFunc(event:MouseEvent):void {
   navigateToURL(Amexlink, "_blank");
}

// Fire off that event when button is clicked in FLash
Mybtn.addEventListener(MouseEvent.CLICK, navigateFunc);

Mybg4.x = 0;
Mybg4.y = 0;
Mybg4.alpha = 0;

Mybg3.x = 0;
Mybg3.y = 0;
Mybg3.alpha = 0;

Mybg2.x = 0;
Mybg2.y = 0;
Mybg2.alpha = 0;

Mybg1.x = 0;
Mybg1.y = 0;
Mybg1.alpha = 1;


function animator(target:MovieClip,time:Number,delay:Number,alphaValue:Number,callBack:Function) {
    TweenLite.to(target,time,{delay:delay,alpha:alphaValue,ease:Back.easeOut, onComplete:callBack});
}

var delay:Number = 1;

seq1();

function seq1() {
        
    animator(Mybg1,2,2,0,null);
    animator(Mybg2,0,2,1,seq2);
}

function seq2() {
    
    animator(Mybg2,2,2,0,null);
    animator(Mybg3,0,2,1, seq3);
}

function seq3() {
        
    animator(Mybg3,2,2,0,null);
    animator(Mybg4,0,2,1, seq4);
}

function seq4() {
        
    animator(Mybg4,0,1,0,null);
    animator(Mybg1,0,1,1, seq1);
}

[Carl]

To repeat a sequence of tweens multiple times please check out our TimelineMax tool.

http://greensock.com/timelinemax-as

 

Seems you are using your own custom sequencing routine. You probably have to have a variable that you increment in seq4. If your counter variable is less than 3 you can reset all your clips and run seq1 again.

 

Let us know if you need help with TimelineMax

[jaswa]

Thanks for replying, Carl. You're right about the custom sequence; it was the only solution I could make up. I guess there is a better way but I'm only a beginner in programming. I checked out the TimelineMax but could not make very much of it. Can you please give me one more clue?

 

Cheers, jaswa

[Carl]

Here is a very simple sequence using TimelineMax

 

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




red.alpha = 0; 
red.x = 0;
blue.alpha = 0;
blue.x = 0;


var tl = new TimelineMax({repeat:3})

tl.to(red, 1, {alpha:1, x:300})
  .to(red, 1, {alpha:0, x:600}, "+=1") //one second later
  .to(blue, 1, {alpha:1, x:300})
  .to(blue, 1, {alpha:0, x:600}, "+=1") // "+=1" means one second later

I have attached a zipped Flash CC Fla

I did not include the greensock files so be sure to put this FLA next to your com folder when you export.

 

Be sure to read about the to() method of TimelineMax in the docs.

 

And although these videos are dealing with JavaScript, the timeline concepts are exactly the same with ActionScript (identical syntax) please give them a look: 

 

http://greensock.com/sequence-video

http://greensock.com/position-parameter

 

basic-TimelineMax-sequence.fla.zip

[jaswa]

Thanks! I will check your file tomorrow. It is midnight now here (in Amsterdam, Holland). Thanks again for your help, Carl!

 

Regards, jaswa

[jaswa]

Thanks again, Carl. I could solve my problem. The code is much easier now. The Greensock library really is awesome! And the speed and helpfulness of your help too!

 

Cheers, jaswa