TweenMax.delayedCall

[farmazone]

Hello,

 

I have such code:

 

var tlIn:TimelineMax=new TimelineMax;
var tlOut:TimelineMax=new TimelineMax;
var spr:Sprite=new Sprite;

public function show():void
{
tlIn.append(TweenMax.to(spr,1,{autoAlpha:1}));
}		
public function hide():void
{
tlOut.append(TweenMax.to(spr,1,{autoAlpha:0}));
}
public function animateIn():TweenCore
{
tlIn=new TimelineMax;
tlIn.append(TweenMax.delayedCall(0,show));
return tlIn;	
}		
public function animateOut():TweenCore
{		
tlOut=new TimelineMax;
tlOut.append(TweenMax.delayedCall(0,hide));
return tlOut;
}
private function onClick(event:MouseEvent):void
{			
var tal:TimelineMax=new TimelineMax				
tal.append(animateOut());
tal.append(animateIn());
}

 

I want to put all animation into show and hide functions( to extend some base class) , but the sequence should start when animateOut/In is fired. I thought that TweenMax.delayedCall could help but it doesn't wait in queue and fires when animateOut/In function is called so tweens from show/hide function overrides each other.

 

Why? Shouldn't it act as normal TweenMax instance? Of course I can replace TweenMax.delayedCall with ex tlIn.append(TweenMax.to(spr,1,{autoAlpha:1})); and it will work but I want to know the logic.

 

thank you.

[Carl]

i'll admit I don't totally understand why you are doing it this way , as it seems a bit circuitous to be jamming 0 duration delayed function calls into timelinelines that return timelines and such.

That doesn't mean its necessarily wrong or anything. i'm no genius. you don't have to explain it to me, you could have a very sound reason.

 

I did find your problem interesting though as I wondered why it wasn't working.

 

Here is what I found.

 

I believe the crux of the problem is that using delayed call with 0 duration prevents the parent timeline from accurately gauging its duration and thus both appends happen at the same time.

 

The first thing I did was load up a bunch of traces and set your delayedCalls to 1 instead of 0 and everything worked as expected:

import com.greensock.*;
import com.greensock.core.TweenCore;

var tlIn:TimelineMax=new TimelineMax;
var tlOut:TimelineMax=new TimelineMax;


function show():void
{
  tlIn.append(TweenMax.to(mc,1,{autoAlpha:1}));
}      
function hide():void
{
trace("hide");
  tlOut.append(TweenMax.to(mc,1,{autoAlpha:0}));
}
function animateIn():TweenCore
{
  trace("in");
  tlIn=new TimelineMax;

//CHANGED DELAY TO 1

  tlIn.append(TweenMax.delayedCall(1,show));
  return tlIn;   
}      
function animateOut():TweenCore
{      
trace("out");
  tlOut=new TimelineMax;

//CHANGED DELAY TO 1

  tlOut.append(TweenMax.delayedCall(1,hide));
  return tlOut;
}

stage.addEventListener(MouseEvent.CLICK, onClick);

function onClick(event:MouseEvent):void
{         
trace("CLICK");
  var tal:TimelineMax=new TimelineMax 

//added traces of the timeline's duration

  tal.append(animateOut());
  trace("tal " + tal.duration);
  tal.append(animateIn());
  trace("tal " + tal.duration);

}

 

this code works and outputs:

----------

CLICK

out

tal 1 //duration after append(animateOut);

in

tal 2 //duration after append(animateIn);

hide

show

----------

 

so that output proves that

a) the functions are all firing and in the right sequence

the tal timeline is accurately having it's duration adjusted when new timelines are appended

 

 

Now, if we change the delays back to 0 we this output

 

----------

CLICK

out

tal 0

in

tal 0

hide

show

--------

 

notice the main timeline tal never knows how long those tweens are, or it has the same 0 duration for both appends.

so in essence both hide and show are running at the same time.

 

it still doesn't make perfect sense to me, but hopefully this helps you or someone else figure out what you need to do instead of using delayedCall(0, something).

[Carl]

ok, now I got it.

 

when you do

 

trace("out");

tlOut=new TimelineMax;

tlOut.append(TweenMax.delayedCall(1,hide));

return tlOut;

}

 

the tlOut timline's duration is only as long as the amount of time in the delayed call.... what the hide function returns has no immediate effect on the duration of the tlOut timeline and thus no effect on the duration of the parent tal timeline. so that's why animateIn happens directly after animateOut and your show / hides get overwritten when using delays of 0.

 

it actually makes perfect sense as the hide function isn't called until 1 second AFTER the tlOut timeline starts playing

 

so if hide returns a tween that is 4 seconds long it has no effect on offsetting the appends you to do with animateOut and animate in

 

 

 

check out the code below

 

import com.greensock.*;

import com.greensock.core.TweenCore;

 

var tlIn:TimelineMax=new TimelineMax;

var tlOut:TimelineMax=new TimelineMax;

 

 

function show():void

{

trace("show");

tlIn.append(TweenMax.to(mc,4,{autoAlpha:1}));

}

function hide():void

{

trace("hide");

tlOut.append(TweenMax.to(mc,4,{autoAlpha:0}));

}

function animateIn():TweenCore

{

trace("in");

tlIn=new TimelineMax;

tlIn.append(TweenMax.delayedCall(1,show));

return tlIn;

}

function animateOut():TweenCore

{

trace("out");

tlOut=new TimelineMax;

tlOut.append(TweenMax.delayedCall(1,hide));

return tlOut;

}

 

stage.addEventListener(MouseEvent.CLICK, onClick);

 

function onClick(event:MouseEvent):void

{

trace("CLICK");

var tal:TimelineMax=new TimelineMax

tal.append(animateOut());

trace("tal " + tal.duration);

tal.append(animateIn());

trace("tal " + tal.duration);

 

}

 

note the show and hide tweens are both 4 seconds long.

the delayed calls are both 1 second long.

 

output:

 

CLICK

out

tal 1 //THIS IS THE DURATION OF THE DELAYED CALL in tlOut that is returned by animateOut();

in

tal 2 ///THIS IS THE DURATION OF THE PREVIOUS DELAYED CALL PLUS THE DELAYED CALL in tlInthat is returned by animateIn();

 

//when the above code runs, the hide and show functions have not yet been called, thus their duration of 4 seconds is not accounted for:)

 

hide

show

 

 

hopefully this makes some sense. thanks for the opportunity to challenge myself. this was a good one.

[farmazone]

Thank You Carl for commitment

 

I thought that TweenMax.delayedCall(0,show); would allow me to do both: fire some functions (like addChild etc) and append Tweens to sequence. But of course tal Timeline from onClick makes sequence sooner that I thought. My mistake.

 

The reason I did such a strange piece of code is that I'd like to have something like this functionality in TweenMax:

 

tl=new TimelineMax;

tl.append(TweenMax.to(mc_1,1,{autoAlpha:1}));

tl.append(TweenMax.to(mc_2,1,{autoAlpha:1}));

tl.append(TweenMax.delayedCall(0,getData,seqWait:true));

tl.append(TweenMax.to(mc_3,1,{autoAlpha:1}));

 

where getData contains async server call. I added seqWait param (marked in red) to show what I am thinking about. The sequence stops in that point and waits for ex TweenMax.goOn() which is fired from onResult handler and whole sequence resumes.

 

I simulated this whit TweenMax.pause() in getData and TweenMax.resume in onResult but It seems to me not so elegant solution.

[GreenSock]

Just wanted to mention that TimelineMax has an addCallback() method that might be useful if you're just trying to call a method at a particular time in a sequence. But you're welcome to use a delayedCall() instead.