Tweening: Part - I

Tweening word is the formation from the words "in between". As suggested by the meaning, tweening has something to do with whatever motion is happening "in between" 2 states. For example, a ball drops from 10th floor of a building to the ground. So here, whatever motion the ball has "in between" the 10th floor and the ground constitutes the tweening effect.

We can make use of the tweening effect in 2 ways:

1. Using time lines
2. Using code / action script

To add the tween motion using the timeline, add the first state of the object in the first frame. The state could be any property, like, color, dimensions, x-y co-ordinates etc. Leave 18 frames in between, and add a key frame to the 20th frame. Add second state of the same object (change any of the above mentioned properties). Right click on the timeline anywhere between the first and the 20th frame. There will be an option to add tween effect. Select that, and you will find the the tween motion is added to your timeline. Press enter while in the first frame, you will see how the tween effect comes out in the time line.

Tweening can be added using action script as well. The tween class is not included in the flash movie by default. It needs to be imported as follows:

import fl.transitions.Tween;
import fl.transitions.easing.*;

Tween class is to add tween motion to the desired object. Lets check what does "easing" do. "Easing" refers to gradual acceleration or deceleration during an animation, which helps your animations appear more realistic. The fl.transitions.easing package provides many easing methods that contain equations for this acceleration and deceleration, which change the easing animation accordingly.

Another class TweenEvent can be imported as follows (though not mandatory)

import fl.transitions.TweenEvent;

This class besically contains a few events, like, MOTION_CHANGE, MOTION-FINISH, MOTION_START, etc etc. Such events can be fired to handle any other changes as per the requirements. This will be explained in the next post.

Now let us see how tweening class is used. Check out the syntax below:

var myTween:Tween = new Tween(object, "property", EasingType, begin, end, duration, useSeconds);

The parameters mentioned above are mandatory to be specified whenever the Tween class is instantiated. Each of them is explained as follows:

1. object - This is the instance name of the object which will be animated or on which tween is applied. Example: myMovie, myTxt
2. property - This is the name of the property which will be animated, it must be specified as a string (in double quotes). Example: "alpha", "scaleX", "scaleY", "x", "y".
3. EasingType - The easing type will determine how the tween animation will flow so that it looks natural and real. Examples: Strong.EaseIn, Elastic.EaseOut, Back.EaseInOut.
4. begin - This is the position from which the animation will start, it must be specified as a number.
5. end - This is the position at which the animation will stop, it must be specified at as a number.
6. duration - This is the period for which the animation will run, the default unit for it is frames, however, the unit can be set in seconds if you set the next parameter as true.
7. useSeconds - Set this parameter to true if you want to the duration to be measured in seconds instead of frames

For example:

var myTween:Tween = new Tween(myMovie, "x", Strong.easeOut, 25, 100, 10, true);

In the above script, observe the third parameter, Strong.easeOut. This is a function which has a property easeOut. Like "Strong" we have 5 more functions, each of them described as follows:

1. Regular: the motion speed will gradually increase or decrease in speed as specified by the easing method.
2. Bounce: the motion will bounce back a few steps when it reaches the end position before settling at it.
3. Back: the motion will go beyond the end position before bouncing back into it.
4. Elastic: a mixture of Bounce and Back effects combined.
5. Strong: a more emphasized Regular effect.
6. None: no easing, the motion will not speed up.

Each of these functions must be then be configured using one of the easing methods to determine at which part of the tween it shall apply the effect, i.e. at the start of it, the end of it, both, or none:

1. easeIn: - The tween effect is applied to the start of the animation.
2. easeOut: - The tween effect is applied to the end of the animation.
3. easeInOut: - the tween effect is applied to the start and end of the animation.
4. easeNone: - no tweening effect is applied, to be used with the None tween function.