Multiple Objects Easing Out - Decreasing Delays

[rjr4321]

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);

[Zync]

Hey mate,

 

Try this:

H:\Zync Interactive\test\main.as

package  
{
import com.greensock.easing.Cubic;
import com.greensock.easing.Sine;
import com.greensock.events.LoaderEvent;
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.addEventListener(LoaderEvent.COMPLETE, delayOut)
		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();
	}

	private function delayOut(e:LoaderEvent):void 
	{
		//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...
		}
	}
}
}

[Carl]

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

[rjr4321]

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

[Carl]

Hi Rob,

 

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

 

http://tv.adobe.com/watch/actionscript- ... pisode-46/

 

the #include directive works differently.

[rjr4321]

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

[Zync]

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

[rjr4321]

attached - thanks!!!

[Carl]

rjr4321,

 

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

 

Carl

[Zync]

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.events.LoaderEvent;
  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) } );
		 }
	 });

 

And cheers Carl, love your videos on your site as well!

[rjr4321]

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!