Flash Lesson: Always Hack It In First

I'm going through Foundation Actionscript for Flash 8 in an effort to re-learn how to code. In chapter 9, there's some talk of tweening, so I thought I'd try to apply my knowledge to our logo to make a simple animation.

In doing this, I learned an important lesson: always hack it in first. The first thing I did, in an effort to be fancy and add the utmost scalability, was try to create a timed delay that called a tweening function that could be applied to each ball. I was convinced that I would have to manually set the delay so the balls could fall in sequence. I needed to dynamically name a variable based on the input of the function. I couldn't figure out how to do that and wracked my brain for almost an hour. And then I realized that I could simply set the tween to be longer for each ball. So much simpler and you couldn't tell the difference.

Here's the code for it:

//OMG Tweens. They're so, like, cool and stuff!
import mx.transitions.Tween;
import mx.transitions.easing.*;

//activating the tweens so the balls bounce
//the onMotionFinished event handler needs to go here or it wont work - for scope reasons?
function bounceBalls()
{
//bounce the balls in sequence, coming from off-stage at the top
var ball1Tween:Tween = new Tween(ball1_mc, "_y", Bounce.easeOut, -100, 112.0, 1.2, true);
var ball2Tween:Tween = new Tween(ball2_mc, "_y", Bounce.easeOut, -100, 112.0, 1.4, true);
var ball3Tween:Tween = new Tween(ball3_mc, "_y", Bounce.easeOut, -100, 112.0, 1.6, true);
var ball4Tween:Tween = new Tween(ball4_mc, "_y", Bounce.easeOut, -100, 112.0, 1.8, true);

//after the last tween finishes, reset the animation
ball4Tween.onMotionFinished = function()
{
//set a delay, reset the animation, and store the return in a variable
var initDelay:Number = setTimeout(init, 3000);
};
}

//the animation for the logo
function animation():Void
{
//fade out help text quickly so you don't get distracted by it
var helpTextTween:Tween = new Tween(helpText_mc, "_alpha", Strong.easeIn, 100, 0, 0.5, true);

//fade in the logo text - slowly at first, then speed up
var textTween:Tween = new Tween(text_mc, "_alpha", Strong.easeIn, 0, 100, 1.5, true);

//after the text fades in, bounce the balls
textTween.onMotionFinished = bounceBalls;
}

//set things up
function init():Void
{
//we are ninjas in the TREES
ball1_mc._y = -100;
ball2_mc._y = -100;
ball3_mc._y = -100;
ball4_mc._y = -100;
text_mc._alpha = 0;

//fade in help text so you know what to do
var helpTextTween:Tween = new Tween(helpText_mc, "_alpha", Strong.easeIn, 0, 100, 0.5, true);
}

//you're supposed to store the return of the delay function in a variable
//that is this variable
var initDelay:Number = 0;

init();

//play the animation once you click down on the mouse
this.onMouseDown = animation;