3 Part Video Series on Bubbles with TimelineMax

So here it is. A step by step walkthrough of using TimelineMax to control the sequenced animation of hundreds of items. Here I’m using bubbles, but this code can be easily adapted for twinkling stars, falling snow, or leaping frogs. If you watch all three parts I guarantee you will learn a trick or 2 about using TimelineMax. This is really the stuff that matters, once you can understand the basic concepts like nesting timelines and using append(), insert(), prepend(), restart(), pause() etc. You really have what it takes to make amazing things. To top it all off you can rewind and pause a zillion things happening at once. sheesh.

Okay folks here we go.

Part 1: Setting up the file and basic animation

Featured AS3 Code:

        //create new Timeline for each bubble's animation properties
	var nestedTl:TimelineMax = new TimelineMax();
	//set random speed value between 1 and 3 seconds (also used for scaling)
	var speed:Number = randomRange(1,3);

	//bubble up
	nestedTl.insert(TweenMax.to(bubble, speed, {y:-40, ease:Quad.easeIn}));
        //bubble fade and grow
	nestedTl.insert(TweenMax.to(bubble, .5, {scaleX:speed, scaleY:speed, alpha:randomRange(.5, 1)}));

	//add each new bubble timeline with a negative offset.
        //my explanation in the video isn't entirely accurate but it will do.
	tl.append(nestedTl, speed*-.89);

Part 2: Random Wiggles in 2 Directions

Featured AS3 Code:

        // how far to wiggle
        var wiggle:Number = randomRange(25,50);
	// set wiggle to + or - value
	wiggle = Math.random() > .5 ? wiggle : -wiggle;

       ....
     //make the wiggle repeat a random number of times. make sure duration of single wiggle is 25% of speed going up.
     nestedTl.insert(TweenMax.to(bubble, speed*.25, {x:String(wiggle), repeat:randomRange(1,4), yoyo:true}));

note: writing wiggle = Math.random() > .5 ? wiggle : -wiggle; is the same as

if(Math.random() > .5) {
     wiggle = wiggle
} else {
 wiggle = -wiggle
}

or even better, but too late

if(Math.random < .5) {wiggle *= -1}

Part 3 Play, Pause, and Rewind your particles

Featured AS3 Code:

       function playTl(e:MouseEvent):void {
	// if timeline done playing then restart or else play from wherever the playhead is.
	if(tl.currentProgress == 1){
		tl.restart();
		}else{
			 tl.play();
			}
}

function pauseTl(e:MouseEvent):void {
	tl.pause();
}

function reverseTl(e:MouseEvent):void {
	tl.reverse();
}

Download Flash CS4 Files

AS3
Bubble Files

AS2
bubbles_as2_cs4
Whew.