Tweening with Ease: Using Easing Controls

If you’ve been using Flash for a while, you’re probably very familiar with animating objects using Timeline tweening and may want to skip past the next paragraph. However, if you’re a new user, you might need a little information about tweening and frame rates before starting the tutorial.

So what is a tween? Tween is the shortened term for “in-between”. It refers to the consecutive frames between two keyframes. When you apply tweening to an object, you are changing the objects position, appearance, or both over a period of time. For example, in Flash you place an object on the Stage in a keyframe (beginning). Next, you add a second keyframe (ending) somewhere in the Timeline, then move the object to a new position. When you apply Motion Tweening, Flash creates all of the frames between beginning and ending keyframes.

In timeline-based animation programs such as Flash, time is represented by a series of frames. For example, 15 fps (frames per second) means that 15 frames are equal to one second. When creating a new Flash document, you specify the fps for the movie in the Document Properties Inspector. You can only set one frame rate for the entire movie. So what do you do if you want a motion tween to start slow, increase the speed then slow it down again and make it last for two seconds? If you guessed the use of easing, you’re right! Let’s see how.

Flash 8’s new custom easing controls are located in the Custom Ease In / Ease Out dialog box. The dialog box displays a graph representing the degree of motion over time. Frames are represented by the horizontal axis, and the percentage of change is represented by the vertical axis. The button for opening the box is located in the Frame Properties Inspector. A motion tween must be applied to the frame to make the button appear.

STEP 1

Create a new Flash document. In the Document Properties Inspector enter 15 for the Frame rate. Draw an object in the lower left-hand corner of the Stage and convert it to a Graphic symbol.

STEP 2

Insert a Keyframe in Frame 30. With the Playback head still in Frame 30 move the object to the upper left-hand corner of the Stage. Right-mouse click on Frame 1. Select Create Motion Tween from the context menu. Or, you can click on Frame 1 and choose Motion from the Tween menu in the Properties Inspector.

STEP 3

Make sure you still have Frame 1 selected. Click the Edit button in the Properties Inspector. The Custom Ease In / Ease Out dialog box will open. Click the Use one setting for all properties check box to clear it.

STEP 4

Click on the ease line where it crosses Frame 20. The number of the frame selected and the percentage are displayed at the bottom right of the window. You can change the selected frame by clicking and dragging the control point to another position on the graph.

STEP 5

Click and drag the right vertex handle up and to the left. Notice how the curve changes. Drag the dialog box to a location that allows you to see the Stage. Click the Play button located in the lower left of the window. Notice how the speed of the object changes at Frame 20. Change the slope of the curve and click the play button again. The slope of the graph’s curve shows the rate of change of the object.

Tip: If you want to adjust the position ease line, choose position from the Property menu while you still have the Ease In / Ease Out box open.

STEP 6

You can add multiple points to create some interesting movements. Click another point on the ease line and adjust the vertex handles. Click the Play button and watch the results. Continue to add and adjust points until you are satisfied with the animation. If you need to remove a point, Command-click (Macintosh) or Control-click (Windows) on the point. Click the Reset button to remove all of the points.

STEP 7

Click the OK button to apply your settings and return to the Timeline. Move the Playback head to Frame 30. Select the object on the Stage. In the Properties Inspector choose Tint. From the Color Swatch menu choose a tint color.

STEP 8

Select Frame 1. Click the Edit button in the Properties Inspector. The Custom Ease In / Ease Out dialog box will open. Choose Color from the Property menu. Click a point on the ease line. Adjust the vertex handles to create a curve. Click the Play button to see the effect. Make any adjustments then click OK when you are satisfied with the results.

Courtesy of Layers magazine.