TimelineMax repeat animation

[fevertown]

Hi everybody, I hope this doesn't seem too dimwitted, but I can't for the life of me figure out how to get my banners to repeat 3 times. I just started delving into the GSAP tools the other day. I have been tweaking the code below to try and get it working but I keep running into a brick wall. Any suggestions?

 

import com.google.ads.studio.ProxyEnabler;

 

var enabler:ProxyEnabler = ProxyEnabler.getInstance();

 

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

import com.greensock.*;

import com.greensock.easing.*;

import com.greensock.plugins.*;

import com.greensock.TweenMax;

import flash.display.MovieClip;

 

//import com.greensock.plugins.BlurFilterPlugin; 

//TweenPlugin.activate([blurFilterPlugin]);

 

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

/////vars

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

var tt = TweenNano.to;

var tf = TweenNano.from;

var td = TweenNano.delayedCall;

var tm = new TimelineMax({repeat:3});

 

stop();

 

//TweenLite.to(mc, 1, {blurFilter:{blurX:10, blurY:10}});

 

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

/////utility

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

function makeBtn(_clip:MovieClip, _over:Function, _out:Function):void{

_clip.addEventListener(MouseEvent.ROLL_OVER, _over);

_clip.addEventListener(MouseEvent.ROLL_OUT, _out);

//_clip.addEventListener(MouseEvent.CLICK, btnClick);

_clip.useHandCursor = true;

_clip.buttonMode = true;

}

 

function btnOver(e:MouseEvent):void{

endframe.cta.gotoAndPlay(2);

}

 

function btnOut(e:MouseEvent):void{

endframe.cta.gotoAndPlay(1);

}

 

/*function btnClick(e:MouseEvent):void{

var sURL:String;

if ((sURL = root.loaderInfo.parameters.clickTag)){

navigateToURL(new URLRequest(sURL), "_blank");

}

trace("the " + e.target.name + " has been clicked");

}*/

 

function getElapsedTime():void{

trace("elapsed time " + getTimer() / 1000);

}

 

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

/////animation

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

function slideFromLeft(_mc:MovieClip, _time:Number, _endAlpha:Number, _delay:Number):void {

_mc.alpha=1;

tf(_mc, _time, {x:-500, ease:Strong.easeOut, alpha:_endAlpha, delay:_delay});

}

 

function slideFromRight(_mc:MovieClip, _time:Number, _endAlpha:Number, _delay:Number):void {

_mc.alpha=1;

tf(_mc, _time, {x:500, ease:Strong.easeOut, alpha:_endAlpha, delay:_delay});

}

 

function fadeAlphaIn(_mc:MovieClip, _time:Number, _endAlpha:Number, _delay:Number):void {

tt(_mc, _time, {ease:Strong.easeOut, alpha:_endAlpha, delay:_delay});

}

 

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

/////banner

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

function init():void{

makeBtn(btn, btnOver, btnOut);

 

eventOne();

}

 

function eventOne():void{

slideFromLeft(orange_mc, .5, 1, 0);

slideFromLeft(logo1_mc, .5, 1, 0);

td(.5, eventTwo);

}

 

function eventTwo():void{

slideFromLeft(text1_txt, .25, 1, 0);

slideFromRight(text2_txt, .25, 1, .75);

td(1.75, event3);

}

 

function event3():void{

fadeAlphaIn(image1_mc, .5, 1, 0);

td(1, eventThree);

}

 

function eventThree():void{

fadeAlphaIn(image2_mc, .5, 1, 0);

td(1, event4);

}

 

function event4():void{

fadeAlphaIn(text1_txt, 0, 0, 0);

fadeAlphaIn(text2_txt, 0, 0, 0);

fadeAlphaIn(image1_mc, 0, 0, 0);

fadeAlphaIn(image2_mc, .5, 0, 0);

fadeAlphaIn(logo1_mc, .5, 0, 0);

fadeAlphaIn(orange_mc, .5, 0, 0);

td(.5, eventFive);

}

 

function eventFour():void{

slideFromLeft(text3_txt, .5, 1, 0);

slideFromRight(logo2_mc, .5, 1, .5);

td(2.5, eventFourB);

}

 

function eventFourB():void{

tt(orange_mc, 1, {x:-600, ease:Strong.easeOut});

tt(text3_txt, 1, {x:-600, ease:Strong.easeOut});

tt(logo2_mc, 1, {x:-600, ease:Strong.easeOut});

td(.5, eventFive);

}

 

function eventFive():void{

 

fadeAlphaIn(endframe, 0, 1, 0);

slideFromRight(endframe.choice_logo, .5, 1, 0);

slideFromRight(endframe.ef_copy, .5, 1, 0);

tf(endframe.ht1, .5, {y:"50", ease:Strong.easeOut, delay:.15});

tf(endframe.ht2, .5, {y:"50", ease:Strong.easeOut, delay:.2});

tf(endframe.ht3, .5, {y:"50", ease:Strong.easeOut, delay:.25});

tf(endframe.ht4, .5, {y:"50", ease:Strong.easeOut, delay:.3});

 

td(1.75, eventSix);

}

 

function eventSix():void{

tt(endframe.ef_copy, 1, {x:-600, ease:Strong.easeOut});

tt(endframe.ht1, 1, {x:-600, ease:Strong.easeOut});

tt(endframe.ht2, 1, {x:-600, ease:Strong.easeOut});

tt(endframe.ht3, 1, {x:-600, ease:Strong.easeOut});

tt(endframe.ht4, 1, {x:-600, ease:Strong.easeOut});

 

slideFromRight(endframe.ef_copy2, .5, 1, 0);

slideFromRight(endframe.cta, .5, 1, .5);

fadeAlphaIn(endframe.ef_copy3, 1, 1, 1);

//tt(endframe.cta, 1, {x:-600, ease:Strong.easeOut, delay:2.5});

//tt(endframe.choice_logo, 1, {x:-600, ease:Strong.easeOut, delay:2.5});

td(.5, getElapsedTime);

tm(0, eventOne);

}

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

 

init();

[Carl]

Hi and welcome to the GreenSock forums,

 

Usually TweenNano is only used when a lean filesize is so imperative that you can not afford the other tools like TweenLite, TweenMax, TimelineLite etc.

If you are going to be using TimelineMax (which is the best solution for repeating animations) I would suggest you remove TweenNano entirely. 

 

To create a very basic repeating TimelineMax sequence you can do

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

basic-TimelineMax-sequence.fla.zip

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

 

 

I know you are new to all this, but I have to say that I appreciate that you tried to abstract some of your code into functions that kicked out animation effects. Very cool. One of the key problems with your code is that some of those functions were creating loose tweens and others were adding animations to your timeline. A very powerful technique is to create functions that return animations (either new timelines or tweens). Then you can call these functions and have the resulting animations placed into a timeline like so:

 

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

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

//functions that create and return TweenLite tweens
function animateIn(obj):TweenLite {
return TweenLite.to(obj, 1, {alpha:1, x:300});
}

function animateOut(obj):TweenLite {
return TweenLite.to(obj, 1, {alpha:0, x:600, rotation:360});
}


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

//add the custom animations that our functions return into our timeline
tl.add(animateIn(red))
  .add(animateOut(red), "+=1")
  .add(animateIn(blue))
  .add(animateOut(blue), "+=1")

If you can wrap your head around this technique you will be an animation master in no time.

However its a fairly advanced technique and I'd love to see you master the basics first.

 

Here is a flash CC fla: TimelineMax-Loop-Abstract.fla.zip

 

---

 

If you need to use only TweenNano, it is a bit more work, but still possible.

 

This is AS2 but the same setup would work in AS3. 

http://greensock.com/forums/topic/11660-how-to-make-banner-loop-in-as2/

Be sure to download and investigate the source files