Creating motion tweens: Part 1

Create animation using motion tweens. Create complex effects by creating custom motion paths and adding and editing property keyframes.

• View full-size on Adobe TV
• View more videos like this

Requirements

To complete the tasks demonstrated in this tutorial, you need the following software and files:

Adobe Flash Professional CS4

• Try
• Buy

Sample file

lrvid4054_fl.zip (ZIP, 495K)

Prerequisite knowledge

Intermediate knowledge of animation in Flash

Creating motion tweens: Part 1

Adobe® Flash® CS4 has streamlined the process for creating keyframes and added a new motion editor. This tutorial shows you how to use the newest features in Flash to create broad-based animations for the Internet, mobile devices, broadcasts, and more.

Creating motion tweens

Previous versions of Flash required you to create motion tweens manually through a number of steps, all of which were essentially timeline-based. With the new motion model, which is object-based, creating keyframes and motion tweens has become an automated, streamlined process. To create a motion tween in Flash CS4:

1. Right-click an object on the Stage. A context menu with the Create Motion Tween command appears.

   Note:Motion tweens can only be added to symbols.

2. Select Create Motion Tween. Flash automatically inserts enough frames into the Timeline to create a one-second animation. The exact number of frames is dependent on your frame rate.

   

   Figure 1: Creating a motion tween using the context menu
3. To view the frame rate, choose Modify > Document. The New Document dialog box appears. You can modify the frame rate in this dialog box.

   Note: The default frame rate is 24 frames per second (fps). In previous versions of Flash, the default frame rate is 12.

Animating an object

Making an animation is simple in Flash CS4. To make a basic animation:

1. Drag your object across the Stage. You have successfully created an animation. You have created a spline path, a curved line connected by two points, for the object to travel on. The path is fully editable.
2. Click the Selection tool in the toolbox.

   

   Figure 2: The Selection tool
3. Click on the spline path and drag downward. Doing so will bend and add more anchor points to the path.

   Note:If you scrub the Timeline, you will see that the object on the Stage follows the spline path. You will also notice that Flash has automatically inserted a black dot in the middle of the last frame of your animation. This black dot represents a property keyframe, which is inserted when a property of the object is changed, in this case, its position.

4. Position the playhead in the middle of the animation in the Timeline.

   

   Figure 3: Positioning the playhead in the middle of the frame span
5. Select the Free Transform tool in the toolbox.
6. Click the object on the Stage and drag on of the corner handles inward to scale it down. You will see that Flash has added another property keyframe to the Timeline. This keyframe represents the scale.

Viewing property keyframes

1. To view property keyframes, click the Selection tool in the toolbox.
2. Right-click the animation in the timeline. A context menu appears.
3. Choose View Keyframes. By default, Flash shows all property keyframes in the Timeline, but from this menu you can select None and the keyframes will disappear. Another option is to select just one or two of the property keyframes to view. Keep in mind that the default setting of Show All is usually the best option.

   

   Figure 4: Viewing position keyframes

Changing properties

In Flash CS4, it is possible to change a variety of motion tween properties such as adding a color effect, changing the position of an object, replacing an object, and changing the duration of an animation.

Applying a color effect

In addition to motion and scale, you can also tween color in Flash. To animate the color of an object:

1. Select the last frame of the animation and then click the object on the Stage. Go to the Properties panel.
2. To apply a color effect, adjust the tint. Move the Tint slider to the right until it reaches 100%.

   Note:Anything less than 100% results in a blend of the object’s initial color and the selected Tint color.

   

   Figure 5: Adjusting the tint using the Tint slider
3. Click the color control next to the Style menu. The Color Picker appears. Click to select the tint color.

   Note:This change only affects the appearance of the symbol on the last keyframe.

   

   Figure 6: Using the Color Picker to select the tint color
4. Scrub the Timeline. The object on the Stage changes color as it moves from its starting point to its destination.

Changing the position of an object

You can adjust the position the object at any frame using the playhead. To change the position of an object:

1. Go to the Timeline and move the playhead to any point in the animation. Select the corresponding point on the spline path and drag it up or down. Repeat this process as many times as you desire. As you scrub the Timeline, the object follows the new spline path.

   

   Figure 7: Scrubbing the timeline to view the animation
2. To fine-tune the path, click the Subselection tool, located directly below the Selection tool in the toolbox as shown in Figure 2.
3. Click an anchor point on the spline path. Bezier handles appear. You can drag these handles to create more refined curves.

   

   Figure 8: Adjusting points along a path using the Bezier handles

Changing the duration of an animation

Another powerful new feature in Flash CS4 is the ability to change the duration of an animation. To change the duration of the timeline:

1. Drag the right edge of the animation and stop at a designated point in the Timeline. The animation expands to fit the new duration. Your keyframes are also moved to fit the new duration.

   

   Figure 9: Drag the end of the timeline to change the duration of the animation

Replacing an object

If you have multiple symbols in the library, you can replace an object on the Stage without losing the animation. To replace an object:

1. Click the object on the Stage and press the Delete key.
2. Select the layer in the Timeline containing the animation and go to the Library panel. The Library panel is located next to the Properties panel in the default Flash workspace.

   

   Figure 10: The Library panel
3. Drag another symbol from the Library to the Stage. The new symbol appears on the Stage and inherits the existing animation properties, keyframes, and duration.

   Tip: Another way to replace an object on the Stage is to drag the new symbol directly from the Library to the Timeline (without deleting the current object). Flash will prompt you to replace the existing tween target object. Click OK and the new object appears on the Stage.

The Motion Editor

Another new feature of Flash CS4 is the Motion Editor. To get a better view of the Motion Editor:

1. Collapse the Properties and Library panels.
2. Click the top border of the Motion Editor panel. Drag the border upward until the Motion Editor panel fills the bottom of the Flash CS4 window. The Motion Editor displays a list of the properties of the object and any modifications you have applied via property keyframes.

   Note: Notice the panel contains its own timeline in the Graph area. Just as with the main Timeline, you can scrub the timeline in the Motion Editor to see the animation on the Stage in real time.

   

   Figure 11: The Motion Editor panel
3. Click the triangle next to a property category to expand it. Click again to collapse the property view.

   

   Figure 12: Expanding the Eases property

   Note:The expanded view allows you to adjust properties on the fly and displays a detailed Graph that charts the property’s value as it changes over the course of the animation. For example, an object’s X position would be charted in pixels, as shown in Figure 13.

   

   Figure 13: The Motion Editor Graph
4. To change the height of the expanded properties inside the Motion Editor, scrub the underlined value next to the Graph Size icon in the bottom-left corner of the panel.
5. To expand a single property row, click an empty area inside the row or scrub the underlined value next to the Expand Graph Size icon at the bottom of the panel.
6. To adjust the number of viewable frames, scrub the underlined value next to the Number of Frames icon at the bottom of the panel. You can also use the Motion Editor to fine-tune your animations. To edit the properties in the Motion Editor, expand a property and drag the keyframes in the graph. The property curve and the animation on Stage adjust automatically. For example, dragging the Basic Motion property keyframes up or down in the graph changes the position of the corresponding anchor points along the path on the Stage.
7. You can also right-click on the property’s curve and choose Copy Curve. You can then right-click on another property, such as Skew, to paste this curve into that property’s graph.

   

   Figure 14: Copying a curve in the Motion Editor

Applying easing in the Motion Editor

The Motion Editor also allows you to apply easing to one or more properties in your animation. Easing is the process of slowing down or speeding up the motion in an animation to make the movement appear more realistic. When you ease in, the motion starts slowly and picks up speed. Easing out is the opposite; the motion starts at regular speed and decelerates.

1. To create a custom ease and apply it to the entire animation, click on the plus sign in the Eases category row to access the context menu.

   

   Figure 15: The eases available in the Motion Editor
2. Choose Custom at the bottom of the context menu. A Custom Ease row appears in the Motion Editor.

   Note: In addition to creating a custom ease, this menu contains a number of preset eases as well.

3. Click the Custom Ease to expand the row.
4. To have the object ease in at the start of the animation and ease out at the end, first choose the initial point on the ease curve in the Motion Editor graph. Drag down. Repeat this process at the end point, this time dragging in an upward direction. You will end up with an S-curve.
5. To apply the ease to all the Basic Motion properties, choose Custom from the Ease menu in the Basic Motion row.

   

   Figure 16: Adding a custom ease

Where to go from here

• Flash CS4 Help and Support
• Learn Flash CS4
• Creating motion tweens: Part 2, by Chris Georgenes
• Using motion presets, by Todd Perkins
• Using the Motion Editor, by Todd Perkins
• Lynda.com

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

About the authors