A few questions about TweenLite and TimelineLite

[Raestloz]

1. [*:1b7irux6]Can I use TweenLite's onComplete instead of TimelineLite's onComplete?
    
   A better wording would be, can I use an onComplete method when I insert a new Tween instead of declaring it when I first create the TimelineLite variable?
    
   So it sort of looks like this:
    
   Usually, you declare the onComplete when creating the variable
    
   var tSomethingTween:TimelineLite = new TimelineLite({onComplete:otherFunction}); -> I don't want to use this
    
    
    
   What I need is an onComplete that is called within the inserted Tween
    
   tSomethingTween.insert(new TweenLite(this,1,{x:100},onComplete:someFunction)); -> I want to use this onComplete
   tSomethingTween.insert(new TweenLite(this,1,{alpha:0},onComplete:whatFunction)); -> and this onComplete
    
   The syntax may be wrong (I'm not in the mood to open Flash right now), but you get the idea
    
   I'm trying to create a sequence of animations which heavily relies on overlapping each other. I can achieve the desired effect without using TimelineLite, but once I put them in TimelineLite, the animation breaks. Primarily because I can only define one onComplete call which runs when the animation is finished, while the desired effect requires the animation to overlap and overwrite each other while they are running
    
   I tried to simply use that example I post, but it won't work
    
    
    
   [*:1b7irux6]Can I use Flash's Mask layer in conjunction with TweenLite?
    
   Specifically, I want to animate something, and I want this object to be masked while being animated
    
   I tried it before, but it doesn't seem to work. The animation stops when the Mask layer is present

[Carl]

yes, TweenLite's inside a TimelineLite/Max can fire their own onComplete functions

 

import com.greensock.*;



var tl:TimelineMax = new TimelineMax({ease:Bounce.easeOut});

//add some tweens to your timeline

tl.append(TweenLite.to(mc, 1, {x:100}));
tl.append(TweenLite.to(mc, 1, {x:200, onComplete:secondTweenDone}));
tl.append(TweenLite.to(mc, 1, {x:300}));

function secondTweenDone():void{
trace("second tween done");
}

 

 

And in that example that I made mc was masked by a layer mask and everything worked fine. There are cases though where actionscript does not play nice with objects masked by layer masks, maybe filters or something. the best thing to do is to use an actionscript mask.

 

mc.mask = someMovieClip

 

If you are relying on OverwriteManager for a certain effect, just realize that once TimelineLite/Max or TweenMax are used, the Overwrite mode is different than the default TweenLite Overwrite mode. http://www.greensock.com/overwritemanager/

[Raestloz]

Thanks.

 

NINJA EDIT:

I gave up with the idea of using just one variable and ended up with 7 variables instead. I don't know whether it's because of the "splitting them up to 7 variables" part, or because of some other things I did, but at least it works as intended now.

 

However, my last question still stands. An answer will still be appreciated

 

Thanks again.

 

 

 

One more question, though: if I want to overlap tweens, what insertion method should I use?

 

Should I use insert, append, or prepend?

 

My code is something like this:

function smokeBloat():void
{
this.visible = true;
tMushroomSmokeTween.clear();


tMushroomSmokeTween.insert(new TweenLite(this, 0.1, {autoAlpha:0.5,overwrite:OverwriteManager.NONE,onComplete:smokeTimer}) );


tMushroomSmokeTween.insert(new TweenLite(this, 0.5, {transformAroundCenter:{scaleX:3, scaleY:3},overwrite:OverwriteManager.NONE,onComplete:smokeDamage}) );


tMushroomSmokeTween.insert(new TweenLite(this, 5, {transformAroundCenter:{rotation:360},overwrite:OverwriteManager.NONE}) );


tMushroomSmokeTween.play();
}



function smokeTimer():void
{
tMushroomSmokeTween.insert(new TweenLite(this, 2.5, {autoAlpha:0.5,overwrite:OverwriteManager.NONE,onComplete:smokeDissipate}) );
}

function smokeDissipate():void
{
tMushroomSmokeTween.insert(new TweenLite(this, 1, {autoAlpha:0,overwrite:OverwriteManager.NONE}) );

tMushroomSmokeTween.insert(new TweenLite(this, 1, {autoAlpha:0,overwrite:OverwriteManager.NONE,delay:1,onComplete:smokeRepeat}) );
}

 

As you can see, the overlap is kinda messy. But when they're left on their own (without using TimelineLite, just TweenLite), it works and gives the effect I need

 

I guess the big question here is when does the Tweens that I insert with .insert play? The functions are called, it's just that the Tweens do not fire off as expected

 

EDIT:

 

I checked with trace, and it seems that the onComplete functions do not fire off as expected. For example, the function smokeDissipate starts at the same time as smokeRepeat, while smokeRepeat supposedly should only fire off 1 second after smokeDissipate (I put the delay:1 on the Tween with onComplete:smokeRepeat)

 

After 2 iterations, the onComplete stops functioning altogether

[Carl]

both insert and append allow you to overlap.

 

append may be the easier option -

 

tl.append(someTween, -2);

 

that will put someTween 2 seconds BEFORE the previous tweens in the timeline complete.

 

with insert you could get the same effect with:

 

tl.append(someTween, tl.duration -2);

 

check out my TimelineLite video series linked in my sig, it contains a lot of good info on the basics.

 

enjoy!

[Raestloz]

Thanks, carl.

 

I think this should be one last question:

 

About the insert method. I understand that append inserts the new Tween at the end of timeline. What I want to know is, what happens when I do this:

 

Frame 1:

tSomethingTween.insert(this,1,{tweenhere});

tSomethingTween.play();

 

 

Frame 10:

tSomethingTween.insert(this,1,{tweenhere});

 

What will happen if

1. [*:wo4tr8cg]The tween is complete by the time it reaches Frame 9 (so the new tween do not overlap with anything?
   [*:wo4tr8cg]The tween is still playing by the time it reaches Frame 10 (so the new tween overlaps with the previous tween)?

[Carl]

tSomethingTween.insert(this,1,{tweenhere});

 

I'm sorry but I am confused by the usage of this,1,{tweenhere}

 

I'm also not really following your 2 additional followup questions. if you could post a file with an example I'm sure it will help us greatly.

sometimes it is difficult to explain and understand these code concepts with just text.

[Raestloz]

Sorry if it's confusing. Well, they're just a placeholder for actual code, kinda like foo and bar as placeholder for variables

 

Let's say I have a MovieClip. A box. With instance name Test_MovieClip

 

The MovieClip is put in a stage with 48 frames, with framerate of 24 frames per second. (the stage lasts for 2 seconds)

 

In Frame 1 of the stage, I put this code:

var tMyPersonalTween:TimelineLite = new TimelineLite({paused:true}); 
//I declare a variable to hold my Tweens


//Here I put a Tween which lasts for a whole second (meaning it lasts for 24 frames)
tMyPersonalTween.insert(Test_MovieClip, 1, {x:200,y:500});
tMyPersonalTween.play();

 

What I want to know is, suppose I have this line of code:

tMyPersonalTween.insert(Test_MovieClip, 1, {x:400,y:100});

 

What will happen if put that code:

1. [*:3c2c3d91]At frame 20? This means that the previous tween is still running, yet I insert another tween with .insert
   [*:3c2c3d91]At frame 30? Meaning that the last tween is already over quite some time ago, and I insert another tween into the timeline

 

My point is that append and prepend already has default values: it's either the beginning or the end of the Timeline, when exactly you put them doesn't matter. You can make a Tween that lasts for 5 seconds, and no matter when you put an append or prepend tween, they will always be put in the beginning or the end of timeline, and the animation will not break.

 

However, I don't find any documentation regarding where will a "insert" Tween be put. I assume that the code will run the moment it is inserted (meaning it overrides the previous tween), but I don't get consistent results to test it.

[Carl]

when using insert() the parameter after the tween is the exact time or label that the tween will be inserted at (see docs)

your tweens are all getting inserted at the beginning of the timeline at time = 0 because you are not telling them where to go.

 

if the timeline is currently playing and you want to insert a tween that will play immediately, insert them at the timeline's currentTime.

 

tl.insert(TweenLite.to(mc, 1, {x:100}), tl.currentTime));

 

if your timeline has finished playing and you add a new tween to the end with either

 

tl.insert(TweenLite.to(mc, 1, {x:100}), tl.currentTime));

 

OR

 

tl.append(TweenLite.to(mc, 1, {x:100}));

 

you just need to tell your timeline to start playing again with

 

tl.play();

[Raestloz]

Thank you very much, carl. You've been a great help. This clears out a lot of questions in my mind.

 

I'm accustomed to the behavior of TweenLite.to which automatically overrides the current tween whenever it is called, and I couldn't figure out the documentation, haha.