20050120

easing and bounce


20050118

build a ball with easing and bounce














Finally, you are ready to add some Actionscript2 to bring this thing to life. Simply select Frame 1 of the "ball_e" layer, press F-9 to open the Actions Panel, then copy and paste the following Actionscript2. (You will be prevented from pasting anything if you don't see a blue stripe on the left side of the Actions Panel -- but clicking directly somewhere inside the Panel will produce the blue stripe, indicating the Panel is active).

<!-- ---------- start .as code ---------- -->
// ACTIONSCRIPT FOR ebutton_btn
// [ easing.Strong.easeOut ]
ebutton_btn.onRelease = function() {
tweenBall();
};
function tweenBall() {
easeType = mx.transitions.easing.Strong.easeOut;
var begin = 45;
var end = 270;
var time = 3.5;
var mc = greyball_mc;
ballTween = new mx.transitions.Tween(mc, "_y", easeType, begin, end, time, true); // PUT ALL OF THAT ON ONE LINE
}

<!-- ---------- end .as code ---------- -->

A small "a" should have appeared in Frame 1 of the "ball_e" layer.

Repeat the preceeding steps to the "ball_d" layer using the following Actionscript2:

<!-- ---------- start .as code ---------- -->
// ACTIONSCRIPT FOR dbutton_btn
// [ easing.Bounce.easeOut ]
dbutton_btn.onRelease = function() {
tweenBall();
};
function tweenBall() {
easeType = mx.transitions.easing.Bounce.easeOut;
var begin = 45;
var end = 270;
var time = 3.5;
var mc = oliveball_mc;
ballTween = new mx.transitions.Tween(mc, "_y", easeType, begin, end, time, true); // PUT ALL OF THAT ON ONE LINE
}

<!-- ---------- end .as code ---------- -->

Do the same to the "ball_c" layer using the following Actionscript2:

<!-- ---------- start .as code ---------- -->
// ACTIONSCRIPT FOR cbutton_btn
// [ easing.Back.easeOut ]
cbutton_btn.onRelease = function() {
tweenBall();
};
function tweenBall() {
easeType = mx.transitions.easing.Back.easeOut;
var begin = 45;
var end = 270;
var time = 3.5;
var mc = greenball_mc;
ballTween = new mx.transitions.Tween(mc, "_y", easeType, begin, end, time, true); // PUT ALL OF THAT ON ONE LINE
}

<!-- ---------- end .as code ---------- -->

Do the same to the "ball_b" layer using the following Actionscript2:

<!-- ---------- start .as code ---------- -->
// ACTIONSCRIPT FOR bbutton_btn
// [ easing.Regular.easeOut ]
bbutton_btn.onRelease = function() {
tweenBall();
};
function tweenBall() {
easeType = mx.transitions.easing.Regular.easeOut;
var begin = 45;
var end = 270;
var time = 3.5;
var mc = orangeball_mc;
ballTween = new mx.transitions.Tween(mc, "_y", easeType, begin, end, time, true); // PUT ALL OF THAT ON ONE LINE
}

<!-- ---------- end .as code ---------- -->

Do the same to the "ball_a" layer using the following Actionscript2:
NOTE: This Actionscript2 has additional code to give it a continuous "yo-yo" movement.

<!-- ---------- start .as code ---------- -->
// ACTIONSCRIPT FOR abutton_btn
[ easing.Regular.easeIn + YOYO function ]

abutton_btn.onRelease = function() {
tweenBall();
};
function tweenBall() {
easeType = mx.transitions.easing.Regular.easeIn;
var begin = 45;
var end = 270;
var time = 3.5;
var mc = blueball_mc;
ballTween = new mx.transitions.Tween(mc, "_y", easeType, begin, end, time, true); // PUT ALL OF THAT ON ONE LINE
ballTween.onMotionFinished = function() {
this.yoyo();
};
}

<!-- ---------- end .as code ---------- -->




Well, congratulations!
You should now have five balls, all bouncing and/or easing...