Using the Easing Graph to Create Animation Effects

The following example mimics the collision of two metal balls. In previous versions of Flash, you had to go through a lot of motion tweening and keyframes to get the result you wanted. But as you will see, you will accomplish the effect with only one motion tweening for each symbol (the metal ball).

To create the effect in the example, follow the steps below:

1. Create a metal ball symbol as shown in the MetalBall.fla example and put it on the Stage.
2. Duplicate the metal ball symbol instance and put each one on a different layer.

3. In the first keyframe of the animation, position the metal ball symbols as shown in Figure 4. The transformation point is as shown.

   

   Figure 4. Symbol positions in the first animation keyframe

4. In frame 50, create another keyframe and position the metal ball symbols, as shown in Figure 5.

   

   

   Figure 5. Symbol positions in frame 50

5. Create a motion tween for both symbols and select any frame within it.
6. In the Property inspector, click the Edit button next to the Ease slider.
7. In the Custom Ease In/Ease Out dialog box, edit the velocity curve so that it resembles the graph you see in Figure 6.

8. Preview your animation by clicking the Play button in the dialog box. It should appear as it does in the following animation.

   

   Figure 6. Editing the velocity curve

Play the following demo to see the sample motion tweening animation that uses a Custom Ease In/Ease Out setting: