Introduction to Motion Tweening (beginning with CS4)

Flash CS4 renamed what was formerly motion tweening as classic tweening and introduced a new motion tween. Whereas shape tweens and classic tweens require a beginning and ending keyframe, a motion tween requires only a single keyframe, known as the tween target or target instance, and a motion-tween span, and within that span property keyframes account for changes in the symbol's properties.

Creating a Bouncing Ball with Motion Tweening (p. 279-287)

Select the frame that marks the end of your desired tween and choose Insert>Timeline>Frame or simply press F5. Select keyframe 1 and place an instance of the symbol in frame 1. Click anywhere in the Timeline between frame 1 and the ending frame of the tween (inclusive) to select the instance of the symbol on the Stage or click on the instance of the symbol on the stage. Choose Insert>Motion Tween or right click in the timeline and choose Create Motion Tween. A motion tween icon will be added in front of the layer name and the frames of the span will be light blue.

If you do not select the end of your desired tween, the tween will be of a default length. If the target symbol is in frame 1 and there are no other frames, the default span length will be the number of frames for a one second tween. To do this, place an instance of a symbol in a keyframe and then select the instance and right-click and choose Create Motion Tween.

To change the tween target's position for halfway position

To set the tween target position for the bottom of the bounce, click in the Timeline for a frame halfway through the span and drag the ball to the desired position. A diamond will be inserted in this frame, indicating a property keyframe, in this case a position keyframe. Save your document as a template for future use.

The Timeline can display diamonds for six properties - Position, Scale, Skew, Rotation, Color, and Filter. The Motion Editor displays curves for all tweenable properties. The Timeline lumps some of these properties together - e.g. the horizontal and vertical position of an object, which are separate properties in the Motion Editor, are lumped together in the Timeline as Position.

Templates (p. 7)

File>Save as Template. To specifiy a category either select an existing category or type in a name in the category field to create a new category. The description is limited to 255 characters. Choose File>Save. The template is saved within the Configuration Folder. To open a new document from a template document, in the Welcome screen, in the Create from Template section, click the appropriate template category and choose the template you want to use. Templates are stored in the Configuration Folder; the location of this folder varies by operating system (p. 9).

To change the tween target's position for ending position

Use the template you created earlier to create a new document (File, in the Create from Template category, choose the category of template, and then choose your particular template. Click in the timeline in the ending frame for the tween and then drag the ball to the desired position. Choose Control>Test Movie to preview the animation. Save the document as a template for a full bounce. Note that this technique means that the motion path for the rebound lies directly on top of the motion path for the downward portion. This can make it difficult to manipulate these separately. Easing is an alternative for creating animation that avoids this problem.

Roving Keyframes

With more than one position keyframe in a tween, the perceived speed of motion can differ in various portions of the tween. One can make the speed of motion uniform, thus removing the position keyframes in the middle of the span, by right clicking the tween span in the Timeline and choosing Motion Path>Switch Keyframes to Roving. To turn off roving, right click in the tween span in the Timeline and choose Motion Path>Switch Keyframes to Non-Roving. In the Motion Editor, roving keyframes appear as dots instead of squares in the property curve.

About Motion Presets

A motion preset is basically a copy of a tween with with its motion path, property keyframes and easing intact, just waiting to be assigned a screen target. To use motion presets, access the Motion Presets panel (if closed, Window>Motion Presets). On the Stage, select the instance of the symbol you want to animate and then in the Presets panel click on the preset you wish to use, and then click the Apply button. Flash turns the selected item into a tween target and createa a motion tween layer and tween span. If you want the tween target to end at its current position, Shift-click Apply. You can save your own motion tweens as presets. In the Timeline, select a tween span and then in the Motion Presets panel, click the Save Selection as Preset button (button at bottom left). Give it a name and then Flash will save it in the Custom folder.

Source: Flash CS4 Professional Visual QuickStart Guide by Katherine Ulrich, revised April 11, 2011