By John Ulliman
By Tommi West
24 August 2009
24 August 2009
- motion_editor.zip (399 KB)
Adobe Flash CS4 Professional includes some incredible new features that enable you to create complex animations with precise control and minimal effort. In this article, we focus on using the new Motion Editor, which lets you quickly tune motions, transformations, color effects, and more.
Setting the keyframes
To get started, download the sample source files linked to in the Requirements section above. Launch Flash CS4 Professional and open the sample file named car.fla (see Figure 1). To contrast the workflow between Flash CS4 and previous versions, let's make a simple animation with the car movie clip using the Timeline first.
To make the car drive onto the Stage, create a motion tween for the movie clip, move the playhead to the end of the tween, and then drag the car onto the Stage to set up the property keyframe. Scrub the playhead to watch the standard animation of the car driving in. Then choose Edit > Undo several times to remove the tween and revert back to a single keyframe on frame 1.
Now let's try this using the Motion Editor instead. Let's begin by setting the keyframes. Choose Window > Motion Editor to open the panel. By default, the Motion Editor docks with the Timeline. The following message is displayed: "To edit properties, select a tween span in the Timeline or a tweened object in the document."
Select the car and either choose Insert > Motion Tween or right-click (or Control-click) and choose Create Motion Tween from the context menu. Add a frame to the end of the background layer to make the two layers the same length.
The Motion Editor panel displays all the properties that can be tweened: basic motion, transformations, color effects, and more. The dotted lines on the graph indicate that there aren't any animations yet. The red bar is the playhead, which you can drag around to different locations just like the Timeline (see Figure 2).
Figure 2. The Motion Editor panel contains many settings, so you may want to resize it to see all the options.
Set the playhead at the end of the tween and move the car horizontally onto the Stage. The keyframes are set just as they are in the Timeline, but now the Motion Editor displays a solid line that indicates the motion of the car in the x direction.
On the left side of the panel, you'll notice that the X and Y properties are shown as numbers representing the pixel locations, similar to the Property inspector. If you hover over them, you'll see the arrow cursors indicating that you can click and drag in either direction to change the numbers.
On the graph, the keyframes are represented with black squares. To the left of the graph, you'll see the keyframe icons: arrow, diamond, arrow (see Figure 3).
Figure 3. The keyframe icons in the Motion Editor give you more precise control than you have with the Timeline.
The arrow icons enable you to jump the playhead from keyframe to keyframe. The diamond icon in the center enables you to insert keyframes at the current playhead location or delete a keyframe if one already exists at that spot. You can insert and remove keyframes using the Timeline, but the process requires a lot of dragging and right-clicking. Also, the Timeline displays a diamond representing a keyframe property change, but there is no indication which property it represents. The Motion Editor enables you to see exactly which property is changing as the object tweens.
Move the playhead and click the diamond icon to add and remove a few keyframes to see how much easier it is.
Making precise adjustments
Setting the keyframes is only the first part. As you review the sections in the Motion Editor, you'll probably notice the advanced ease controls. When you create animations in the Timeline, you have the ability to set a simple ease control on a tween, but you can only set a single ease value for each keyframe change, and only one type of ease is available.
The Motion Editor enables you to add a unique ease setting for each property that can be individually controlled.
Next to the X property, choose Simple (Slow) from the Ease pull-down menu (see Figure 4).
Figure 4. Choosing the Simple (Slow) ease setting doesn't affect the animation yet; you also need to adjust the value for the ease to specify the amount of slowing desired.
Scroll down to the bottom of the Motion Editor panel, and you'll see the Eases section. You'll see a setting next to the Simple (Slow) ease that is identical to the normal ease available from the Timeline. You can set this numeric value from –100 to 100. For this example, set it to 100 and test the movie. The car slows down at the end of the tween. This is the same thing you could have accomplished by applying an ease in the Timeline, but by making this change in the Motion Editor, you can now see the ease path of the car displayed in the Motion Editor graph as a purple dotted line.
Now here's the fun part. Return to the Eases section and click the plus (+) sign to see the entire list of available eases. To begin, choose the Simple (Fastest) option (see Figure 5).
Figure 5. The new ease is added to the Eases section, and it has its own settings to adjust the ease curve.
This curve is much steeper than the first, meaning the animation will slow down more dramatically than before. Return to the X property and use the Ease menu to choose the new ease you just set up. Test the movie. The car animation now has a much more dramatic speed change than before. It looks like the driver slams on the brakes much harder.
You can also use the Motion Editor panel to create the animations for both sets of wheels. Double-click the car to edit the movie clip. The front and back wheels are already on separate layers, ready to be tweened. The Motion Editor panel displays the message about selecting a tween span, so go to the Timeline and add two motion tweens for the wheel layers. Insert static frames for the car and driver layers, so they are all the same length, and then select the tween of the front wheel.
Return to the Motion Editor panel and direct your attention to the Rotation Z property. You'll see it is a flat dotted line, but you can move the playhead to the end of the tween and then adjust the rotation value to add a keyframe. When you do this, the graph moves to indicate the new motion applied to the front wheel. Try setting it to 360 degrees (or one rotation) as the car moves onto the Stage. Scroll down to the Eases section again, click the plus (+) sign, and add a Simple (Fastest) ease. You can adjust the value to match the ease used for the car (100). Notice that each object in the Motion Editor has its own custom ease settings.
Save time by copying the motion settings for the front wheel and applying them to the back wheel. Select the front wheel and either choose Edit > Timeline > Copy Motion or right-click (Control-click) and choose Copy Motion from the context menu. Select the back wheel tween and paste the motion—by either choosing Edit > Paste from the main menu or by right-clicking and choosing Paste from the context menu.
The Motion Editor offers so much more control over the little details of animations compared to working exclusively in the Timeline. You can apply different ease settings for different properties, add and remove keyframes in new ways, and see the complete picture of the movements applied to each tweened object.
Eases made easy
Now let's explore some of the other types of eases provided in the Motion Editor. When you click the plus (+) sign, you'll see that the four ease settings after Simple (Slow) are Stop and Start eases. These settings speed up the motion at the beginning and slow it down at the end.
Stop and Start (Fastest) is the perfect choice if you want the car to animate as shown earlier in Figure 1. To achieve this effect using the Timeline, you need to create two separate tweens—one at the beginning to speed up the car and another to slow down the ease. The Motion Editor simplifies this process because you can apply the advanced ease curve to get both ease effects on a single tween. Experiment with these settings by applying them to both the car and the wheels.
The rest of the eases in the list make it quick and easy to set up repeating or oscillating motions. To experiment with some of these eases, open the sample file named jack.fla.
The action of the toy can be created if Jack swings back and forth as he protrudes from the top of his box. You can accomplish this using the Timeline by setting up individual keyframe settings for the rotation tweens, or you can let the ease settings do all the work for you.
Double-click Jack to edit the movie clip. Create a motion tween for the Jack layer. Also add a static frame to the end of the box layer so that it does not disappear. While the tween for Jack is selected, return to the Motion Editor panel. Place the playhead on the first frame and adjust the Rotation Z value so that Jack is tilted to the left but still appears to protrude from the hole in the box (–16 looks good). Then move the playhead to the last frame and set the Rotation Z for the right side of the swing (29 works well). Test the movie (see Figure 6).
Return to the Eases section, click the plus (+) sign, and choose Sine Wave. Scroll back up and choose the Sine Wave option in the menu next to Rotation Z. Now Jack will swing back and forth, using the two keyframes as minimum and maximum values. You can adjust the speed of the swinging motion by assigning different numeric values to the Sine Wave curve. If you use an even number, Jack will complete a full swing before he repeats the loop.
Test the movie again to see the perfect motion for the swing. If you look closely, you'll notice that Jack even slows down a little at the end of each swing, which is a realistic touch. It's almost like Flash completed the hardest part of the animation for you.
Let's apply one more ease setting to the Y property. Return to scene 1. Select frame 1 of the Jack layer and create a motion tween. Then extend the background layer to match. Move the playhead to the last frame in the Jack layer and use the Selection tool to move Jack straight up in the air. This positioning sets the property keyframe for the Y value. Test the movie to see a bland animation of the vertical movement.
Return to the Motion Editor and scroll down to the Eases section. Click the plus (+) sign and add the Bounce ease. Use the menu next to the Y property to apply the Bounce ease setting. Test the movie again and see the difference. By applying a single ease setting, you've added a complete series of animation that uses the last keyframe's setting for the first bounce. And you have complete control over the way the toy bounces because you can adjust the numeric value of the bounce to set the number of bounces in the Bounce ease curve.
You can continue to experiment by moving the jack-in-the-box to the right to create a little X movement. In the Motion Editor, you can use the default Simple (Slow) ease for this property, and the jack-in-the-box will bounce across the screen as it wiggles its head. This example is really just the tip of the iceberg because there are so many cool motion effects and animations you can create by simply applying different ease settings to different properties in a single tween.
Now that you've taken a test drive and seen how easy it is to use the new types of ease settings, try adding the Custom ease setting and experiment by drawing your own curves. This feature gives you complete control over each movement of every property in the projects you create with Flash.
Where to go from here
For more information about the new and improved way of creating and editing motion tweens using the Timeline and Motion Editor, visit the Animation Learning Guide for Flash CS4 Professional. Also read Motion migration guide for Flash CS4 Professional if you have used animation in earlier versions of Flash and want to learn how to migrate your skill set.
Note: This article appeared originally in the Edge newsletter.
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License
More Like This
- Creating a simple animation in Flash
- Building Preloaders and Progress Bars in Macromedia Flash
- Augmented reality with animated avatars using the 3D drawing API
- Automating tasks in Flash Professional CS5
- Using the Adobe Flash Sprite Sheet Generator
- Automating tasks in Flash Professional CS6
- Lip-syncing automatically with SmartMouth in Flash Professional
- Creating an accessible animated presentation in Flash
- Creating a simple document in Flash CS4 Professional
- Creating graphic effects using the new Deco scripts in Flash Professional CS5