Bounce Easing

Bounce Easing

Flash CS4 ActionScript 3.0 Tutorial

 

How to Vary the Speed and Duration when Applying a Tween with Flash ActionScript

 

 

Easing is used with transitions and tweening. For more information, see topics, Blinds Transition, Fade Transition, Fly Transition, Iris Transition, Photo Transition, Pixel Dissolve Transition, Rotate Transition, Squeeze Transition, Wipe Transition, Zoom Transition, and Tweening Object Properties. There are several easing choices (i.e., Back, Bounce, etc) and multiple ways to apply the ease (i.e., easeIn, easeOut, or easeInOut).

In this example we will demo the Bounce ease on the rotation property. You can change the rotation parameter to any other object property (i.e., alpha, height, rotationX, rotationY, rotationZ, scaleX, scaleY, width, x or y). To make things even more exciting, consider duplicating your tween and assigning the new tween a new variable name. In the second tween, change the property so now the object tweens two properties at the same time.

Tutorial Elements

Movie Symbol with instance name blueBar_mc

 

Step One

Add a Movie Symbol to the stage and select the symbol with the Selection tool (v key).

Step Two

Open the Properties panel (Cmd/F3 (PC-Ctrl/F3)) and type in the name blueBar_mc for the Instance Name.

Step Three

Add a new layer called Actions.

Step Four

Option double-click (PC - Alt double-click) the keyframe in the Actions layer to open the ActionScript panel.

Step Five

Copy/Paste the following code to the ActionScript panel.

import fl.transitions.Tween;

import fl.transitions.easing.*;

var adjRotation:Tween = new Tween (blueBar_mc, "rotation", Bounce.easeInOut, 5, 180, 2, true);

//Tween Options: instance name, "object property", ease type, start value, end value, duration, true = seconds false = frames;

Step Six

Test your movie by pressing Cmd/Return (PC - Ctrl/Enter). The object is placed on the stage with a 5 degree rotation. It then bounces and rotates 180 degrees in a clockwise direction. The object also bounces to it's final location.

Dissecting the Code

The first two lines import the Tween Class and easing package into your document. The var line establishes a new Tween. It affects the blueBar_mc and targets the object's rotation property. The ease is set to Bounce and it happens in the beginning and in the end.

The object is rotated 5 degrees clockwise before the the tween begins. It then makes it's 180 degree rotation in a bouncing motion. It occurs over 2 seconds. By setting the last parameter to true, the values are in seconds, not frames.

More Ease Options

You can substitute easeInOut (beginning and end) with easeIn (beginning) or easeOut (end). You can always replace Bounce with None to cancel the Bounce feature.

Tweens and Animated Movie Symbols

Consider using an animated Movie Symbol in your Tweens. The animation plays while the Tween creates additional movement

Stopping and Starting a Tween

At times you may want to stop, start or start your Tween back at the beginning. Since you assigned a variable to the Tween, you can supply the variable with specific instructions. For instance, the following lines of code control the Tween in our example.

adjRotation.stop();

//stops the tween

adjRotation.resume();

//resumes playing the tween

adjRotation.start();

//starts the tween at the beginning

 

DAZ Studio FREE 3D MODELS AND SOFTWARE