# Multiple Objects Easing Out - Decreasing Delays

Moderator Tag

## Recommended Posts

Hi. I hope this makes sense... I have an animation where 6 balls fall down and stop vertically/sequentially. All six balls then exit stage left, again sequentially.

Right now, as the balls head left, ball2 follows ball1 after .2 seconds. Ball3 follows ball2 after .2 seconds, and so on.

I would like to decrement the time so that ball2 follows ball1 after .2 seconds, ball3 follows ball2 after .2-.05 seconds, ball4 follows ball3 after .2-(2*.05), and so on. Do I just add gradual delays? Is there an elegant way to do this? Any advice appreciated. Thanks!

```var timeline:TimelineMax = new TimelineMax({repeat:-1});
timeline.append(TweenMax.to(b1, .5, {y:"200", ease:Cubic.easeInOut}));
timeline.append(TweenMax.to(b2, .5, {y:"200", ease:Cubic.easeInOut}));
timeline.append(TweenMax.to(b3, .5, {y:"200", ease:Cubic.easeInOut}));
timeline.append(TweenMax.to(b4, .5, {y:"200", ease:Cubic.easeInOut}));
timeline.append(TweenMax.to(b5, .5, {y:"200", ease:Cubic.easeInOut}));
timeline.append(TweenMax.to(b6, .5, {y:"200", ease:Cubic.easeInOut}));

timeline.appendMultiple([new TweenMax(b1, .5, {x:"-800"}),
new TweenMax(b2, .5, {x:"-800", ease:Sine.easeOut}),
new TweenMax(b3, .5, {x:"-800", ease:Sine.easeOut}),
new TweenMax(b4, .5, {x:"-800", ease:Sine.easeOut}),
new TweenMax(b5, .5, {x:"-800", ease:Sine.easeOut}),
new TweenMax(b6, .5, {x:"-800", ease:Sine.easeOut})], .5, TweenAlign.START, .2);```

##### Share on other sites

Hey mate,

Try this:

```H:\Zync Interactive\test\main.as

package
{
import com.greensock.easing.Cubic;
import com.greensock.easing.Sine;
import com.greensock.TimelineMax;
import com.greensock.TweenMax;
import flash.display.MovieClip;

/**
* ...
* @author Zync
*/
public class main extends MovieClip
{
private var aItems:Array;

public function main()
{
//Define all the clips you want to animate in an array
aItems = new Array(b1, b2, b3, b4, b5, b6);

//Setup TimelineMax Var and listners
var tl:TimelineMax = new TimelineMax( { repeat: -1 } );
tl.stop()

for (var i:int = 0; i < aItems.length; i++)
{
//Store reference to our clip in the loop
var mcClip:MovieClip = aItems[i];
//Append the tween to our timeline
tl.append(TweenMax.to(mcClip, 0.5, { y:"200", ease:Cubic.easeOut } ));
}
//Play the timeline after we've added the tweens to it
tl.play();
}

{
//When all clips have animated in, tween them out 1 by 1 in a loop
for (var i:int = 0; i < aItems.length; i++)
{
//Get a reference tot he current clip in the loop
var mcClip:MovieClip = aItems[i];
//Stagger out the tween by using a delay
TweenMax.to(mcClip, 0.5, { x:"-800", ease:Sine.easeOut, delay:(0.2-(i * 0.05)) } );

//So:
//1st Clip tweens in 0.2 seconds
//2nd Clip tweens 0.15 seconds later
//3rd Clip tweens 0.1 seconds later etc...
}
}
}
}
```

##### Share on other sites

Hey Zync,

That's an awesome answer. As someone who frequently participates on these boards, just want to say its great to see others jumping in to help people out.

Thanks!

Carl

##### Share on other sites

• 2 weeks later...

Hi Zync,

I apologize for not respondiing here earlier. I am not an as expert. I think what you showed me is a way to define a new external as file for my movie. Here's what I did:

- created main.as from your example

- in same folder, created stage.fla - put 5 ball clips on the stage - b1, b2, b3, b4, b5 - added include "main"; to actions

But nothing happened when I published stage. Any ideas what I'm doing wrong?

Thanks!

--rob

##### Share on other sites

Hi Rob,

when setting a document class in Flash Pro CS4 / CS5 you do it through the properties panel.

the #include directive works differently.

##### Share on other sites

Thanks Carl. I'm getting closer...

I added the class in the properties panel, now the movie works and the six balls do the "main" function (drop down 200)

but then the movie just repeats the drop down sequence over and over

The balls never get to the "delayOut" exit left 800 function

ideas? thanks

--rob

##### Share on other sites

If you could zip and post your fla and as file I can have a quick look see over it.

##### Share on other sites

attached - thanks!!!

##### Share on other sites

rjr4321,

glad you are getting closer. it looks like Zync is going to hook you up. nice work Zync.

Carl

##### Share on other sites

Hey ya,

Sorry took a while to get back to you, been a little busy. See if this effect works for you. Learned some new stuff in TweenMax which is probably better than a few for loops

```package
{
import com.greensock.easing.Cubic;
import com.greensock.easing.Sine;
import com.greensock.TimelineMax;
import com.greensock.TweenMax;
import flash.display.MovieClip;
import com.greensock.TimelineMax;
import com.greensock.events.TweenEvent

/**
* ...
* @author Zync
*/
public class main extends MovieClip
{
private var aItems:Array;

public function main()
{
aItems = new Array(b1, b2, b3, b4, b5, b6);

TweenMax.allTo(aItems, 1, { y:"200", ease:Cubic.easeOut }, 0.2, function()
{
TweenMax.allTo(aItems, 1, { x:"-800", ease:Sine.easeOut }, 0.1);
});
}
}
```

Or if you want to manually edit the delay's

```        aItems = new Array(b1, b2, b3, b4, b5, b6);

TweenMax.allTo(aItems, 1, { y:"200", ease:Cubic.easeOut }, 0.2, function()
{
for (var i:int = 0; i < aItems.length; i++)
{
var item:MovieClip = aItems[i];
TweenMax.to(item, 0.5, { x:"-800", ease:Sine.easeOut, delay:(i * 0.2) } );
}
});
```

##### Share on other sites

Nice!!! Thank you very much. That's exactly what I was trying to do!

Note: I think a final right brace may have been clipped off the end of the as file code.

Thanks again Zync!