easing and bounce

2005-01-20T03:34:00.000-08:00

build a ball with easing and bounce

2005-01-18T04:40:00.000-08:00

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


// 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
}


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:


// 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
}


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


// 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
}


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


// 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
}


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.


// 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();
};
}


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

flash7 easing and bounce

easing and bounce

build a ball with easing and bounce