Using the Motion Editor

Use the Motion Editor to finely control the tweening of individual properties. Also apply ease curves to individual property tweens.

• 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 files

lrvid4057_fl.zip (ZIP, 665K)

Prerequisite knowledge

Intermediate knowledge of animation and motion tweens

The Motion Editor

Adobe® Flash® CS4 gives you great control over motion tweens through the Motion Editor. In this tutorial, you will learn how to use the Motion Editor to control the individual properties of animations.

Using the Motion Editor

The Motion Editor allows you to view your animation property-by-property. To use the Motion Editor:

1. Select a tweened element from an animation. Choose the first keyframe of the motion tween for that element on the Timeline. This step is critical, as it is necessary to select a motion tween in the Timeline in order to use the Motion Editor.
2. Click the tab for the Motion Editor. The Motion Editor tab is located next to the Timeline tab directly underneath the Stage. At the top of the Motion Editor, you will see the X and Y properties of the animation.

   

   Figure 1: The Motion Editor
3. To preview the animation, drag the playhead in the Motion Editor. The individual property values update as you scrub the Timeline.
4. Return the playhead to the beginning of the Timeline.
5. To modify the property values, use the blue underlined hot text for the property in question. For example, to change the X property value, drag the X Position text to the right to increase the property value and to the left to decrease it.

   

   Figure 2: Modifying property values

   Note: As you drag the slider to the right, the motion tween on the Stage will also move to the right. As you drag the slider to the left, the motion tween on the stage will move to the left.

Changing other properties

The Motion Editor gives you access to any property that can be animated, not just the X and Y properties. For example, to scale your object as it moves to the left, use the Scale X and Y properties:

1. Scroll down to Scale X and Scale Y in the Motion Editor.
2. Make sure the X and Y properties are linked using the Link icon in the Motion Editor. Click the Link icon to unlink properties. Click the Link icon again to relink properties.
3. To scale down a tweened object at the beginning of the animation, drag the Scale X slider to the left.

   

   Figure 3: Scaling a tweened object
4. To scale up a tweened object at the end of the animation, drag the Scale X slider to the right.
5. Scrub the playhead in the Motion Editor to preview the new animation on the Stage.

Adjusting color effects

You can also adjust color effects, such as Alpha, from the Motion Editor. To adjust color effects:

1. Move the playhead to one-third of the way through the animation. Scroll down to the Color Effect area of the Motion Editor.
2. Click the Plus button. Choose Alpha from the context menu.

   

   Figure 4: Choosing Alpha from the context menu

   Note: Alpha, or the alpha channel, is the channel that controls the transparency of images and vector objects in Flash. By animating the Alpha property, you can change an object’s transparency over the course of the animation.

3. Make sure that the animation starts with the object at an alpha of 0. Drag the playhead back to the first frame of the animation and then drag the Alpha slider to the left until it reaches 0.
4. Move the playhead about a third of the way through the animation.
5. To create a new property keyframe, click the Add Or Remove Keyframe icon at the bottom-left of the Motion Editor. The new keyframe appears as a black square in the Motion Editor. Leave the Alpha value at 0.

   

   Figure 5: Creating a property keyframe
6. Scroll to the end of the animation and create another keyframe by holding down Command/Ctrl and clicking the last frame shown on the Timeline. A line now connects the second and third keyframes. This line represents the alpha property animation.
7. Drag the last Alpha property keyframe up to increase the alpha percentage. Alternatively, drag the alpha property keyframe down to decrease the alpha percentage. Notice you are changing the property values not by dragging the blue hot text, but within the Motion Editor graph itself.

   

   Figure 6: Dragging the Alpha property keyframe
8. Drag the Alpha property keyframe up to 100%.
9. Preview the animation by choosing Control > Test Movie. The object should move from the right side to the Stage to the left, increase in size, and go from zero to full opacity.

Adding an ease

Another feature that can greatly enhance an animation is adding an ease. Easing is a way of decelerating or accelerating motion in an animation in order to make the movement appear more realistic. Before you add the ease, preview the existing animation. To preview the animation:

1. Choose Control > Test Movie. A full-screen preview of the animation plays. Scroll up in the Motion Editor until you reach the X and Y properties at the top.2. Click the Ease menu located to the right of the X Property. The default options available on the menu are No Ease and Simple (Slow).
2. Choose Simple (Slow). This option allows you to apply basic easing to your animation and enables you to slow down or speed up the end of the animation.
3. Choose Simple (Slow) from the Ease menu of the Y Property as well.

   

   Figure 7: Applying an Ease
4. Scroll down to the Eases section of the Motion Editor. Scrub the Simple (Slow) Eases hot text all the way to the right to a value of 100. The Ease curve on the Motion Editor graph eases out, or bends in a convex direction. Easing out in this fashion causes the animation to slow down at the end.

   

   Figure 8: Easing out an animation
5. Test the movie and preview the animation by choosing Control > Test Movie.

Where to go from here

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

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

About the authors