Animation in a Nutshell

The fundamental element of an animation is time, and in most cases a transition from one state to another. This state can be anything, such as a position, color, scale, transparency, volume, intensity, and so on.

In Adobe Flash, you can use either the timeline - or a combination of timelines - or ActionScript to create an animation.

In this example, ActionScript is used to create an animation.

Interpolation

Interpolation is a technique that provides an easy way to calculate the transition between two states over a period of time.
In ActionScript - or any other programming language - a state is most of the time represented by a number. For example, a color, volume, position, rotation angle, and so on.

In this example, the position of a sphere which moves from 'a' to 'b' is used to explain interpolation.

The interpolation formula is relative simple:

 position = a + (lambda * (b-a));

Interpolation and Actionscript

Let's take a closer look at the interpolation formula:

 position = a + (lambda * (b-a));

'b-a' is also known as delta. Delta is the value you have to add to 'a' to get value 'b'.
Delta can be positive or negative, depending on the value of 'a' and 'b'.

This formula allows you to calculate all positions between position 'a' and position 'b'. This is done by simply changing the value of the variable 'lambda' from 0.0 to 1.0.
If the value of lambda is equal to 0.0, the calculated position is equal to the value of position 'a', if the value of lambda is equal to 1.0, the calculated position is equal to position 'b'.
If lambda is equal to 0.5, the calculated position is exactly in the middle between position 'a' and 'b'.

If values below 0.0 or above 1.0 are used for lambda, the technique is referred to as extrapolation.

Suppose you want to make an animation that moves from position 'a' to position 'b' in twenty frames.
Instead of using time, a variable 'frame' is used. The value of this variable is increased by one every time Flash renders a new frame.

The code within the ActionScript command 'onEnterFrame' is executed every time Adobe Flash renders a new frame. Depending on the frame rate of the animation, the value of the variable 'frame' is updated 24 times a second if the frame rate is equal to 24; or if 31 is used as the frame rate, 31 times a second, and so forth.

The length of the animation measured in frames is used to calculate the value of lambda at a specific frame during the animation.

The first frame of the animation is frame zero and the last frame is frame nineteen (not frame twenty!).
The value of lambda is equal to 0.0 at the start (frame 0) and 1.0 at the end (frame 19).
Lambda is calculated by multiplying the frame number by one nineteenth.
During the animation the value of lambda will increase from 0.0 to 1.0, and the animation will move smoothly from position 'a' to position 'b'.

In this example, 'a' is equal to the horizontal position 0, and 'b' is equal to the horizontal position 475.

 position = a + (lambda * (b-a));

The next table shows the result of the calculation per frame.

If the value of the positions 'a' and 'b' doesn't change and the length of the animation is increased, the animation will be slower. If the length of the animation is decreased the animation will be faster.

The variable 'total_frames' is used to store the length of the animation in the next example.

 var frame        : Number = 0;
 var total_frames : Number = 20;
 var a            : Number = 0.0;
 var b            : Number = 475.0;

 /**************************************************************/
 /*                                                            */
 /**************************************************************/

 onEnterFrame = function() : Void
 {var lambda, position : Number;

  lambda   = frame*(1.0/(total_frames-1.0));
  position = a+lambda*(b-a);
  frame    = (frame+1)%total_frames;
 }

The last line of code looks a little bit cryptic.

 frame = (frame+1)%total_frames;

The value of the variable 'frame' is increased by one. A so-called modulus operation (%) is used to limit the value of this addition. A modulus operation calculates the remainder of the division of the first value by the second value, which in this example is the value of the variable 'total_frames'.
The modulus operation can only be performed on so-called integers; variables like -1, 0, 1, and 2; in other words, natural numbers.

The next table shows the result of the modulus calculation.

By using 'total_frames' in the modules operation, the result of the formula is always a number between 0 and 19 ('total_frames' minus one).
The animation starts again as soon as the last frame is drawn. Once the value of the frame becomes 20, the modulus operation reduces this number to 0 (see table).

Linear Interpolation

During the animation, the value of lambda increases with the same value of 1/19.
This type of interpolation is called linear interpolation.

By raising the value of lambda to a power - in ActionScript: Math.pow (number, exponent) - lambda increases or decreases during the animation, depending on the value of the exponent.

The code to calculate the position with lambda raised to a power:

 position = a + (Math.pow(lambda, 2.0) * (b-a));

Depending on the exponent value, the result is a so-called ease in or ease out animation.
An ease in animation starts slowly and ends relatively fast. The exponent has a value above 1.0.
An ease out animation starts relatively fast and ends slowly. The exponent has a value less than 1.0.

If the exponent is equal to 1.0, the result is a linear animation. The extra Math.pow command is in this case a waste of computation power, since the result of Math.pow (lambda, 1.0) is equal to the value of lambda.

An ease in or ease out animation looks less mechanical/more natural than a linear animation.

Ease In

 position = a+Math.pow(lambda,2.0)*(b-a);

 var frame        : Number = 0;
 var total_frames : Number = 20;
 var a            : Number = 0.0;
 var b            : Number = 475.0;

 /**************************************************************/
 /*                                                            */
 /**************************************************************/

 onEnterFrame = function() : Void
 {var lambda, position : Number;

  lambda   = frame*(1.0/(total_frames-1.0));
  position = a+Math.pow(lambda,2.0)*(b-a);
  frame    = (frame+1)%total_frames;
 }

Ease Out

 position = a+Math.pow(lambda,0.5)*(b-a);

 var frame        : Number = 0;
 var total_frames : Number = 20;
 var a            : Number = 0.0;
 var b            : Number = 475.0;

 /**************************************************************/
 /*                                                            */
 /**************************************************************/

 onEnterFrame = function() : Void
 {var lambda, position : Number;

  lambda   = frame*(1.0/(total_frames-1.0));
  position = a+Math.pow(lambda,0.5)*(b-a);
  frame    = (frame+1)%total_frames;
 }