Creating motion tweens: Part 2

Learn editing techniques that allow you to create more complex animations by using nested symbols and custom ease curves.

• 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

lrvid4055_fl.zip (ZIP, 207K)

Prerequisite knowledge

Intermediate knowledge of Flash animation

Creating motion tweens: Part 2

This tutorial shows you how to create advanced animations using nesting and the new motion model in Adobe® Flash® CS4. Nesting animations gives you more control over timing.

Using nesting to animate an object

Nesting is the most efficient way to create an animation that moves across the Stage. To nest one object inside another:

1. Select a symbol from your Library and drag it onto the Stage to add an instance.
2. Select the symbol instance and press the F8 key. The Convert To Symbol dialog box opens.

   

   Figure 1: The Convert To Symbol dialog box
3. Name your object. Give your symbol a descriptive name that differs from the first symbol. Leave the Type as Graphic and click OK. You have created a symbol within a symbol.
4. Double-click the object on the Stage to enter Symbol Editing mode.

   Note: The breadcrumb at the top of the Flash window shows the name of the second symbol. However, in the Property panel, you will see that the object on the Stage in Symbol Editing mode is itself an instance of the first symbol.

   

   Figure 2: Symbol Editing mode
5. To animate the nested symbol, right-click the object and choose Create Motion Tween from the context menu.

   Note:Note: Flash automatically inserts enough frames in the Timeline to create a one-second animation. This will vary depending on your frames per second setting, but the default is 24 fps.

   

   Figure 3: Creating a motion tween using the context menu
6. You can also constrain the object so that it moves vertically. To create a vertical animation, hold down the Shift key and drag the object up to the top of the Stage. You have successfully created a vertical animation. If you exit Symbol Editing mode and test the movie, the object will move up and down the Stage, even though there is only one frame of animation in the main Timeline.

Creating a custom ease

You can use easing to create an effect of gravity pulling the object up and down as it follows a vertical path. To view the Easing command:

1. Return to Symbol Editing mode, to the nested animation. Drag on the top border of the Motion Editor in an upward direction to expand the panel.
2. To create a custom ease, go to the Eases row in the Motion Editor. Click the plus icon and choose Custom from the context menu. A custom ease will appear in the Eases row.

   

   Figure 4: Adding a custom ease in the Motion Editor
3. The curve of the custom ease is now visible in the Graph area of the Motion Editor. Click in an empty area of the Custom Ease row to expand your view of the property.
4. To create a gravity effect, choose the start point and end point handles on the custom curve and drag them in the shape of an upside-down U. The handles appear when you click on any point in the curve.
5. To assign the ease, collapse the Eases row and go to the Basic Motion row. Click on the Y property to expand the row and choose Custom from the Ease menu.
6. Drag the playhead in the Graph area of the Motion Editor back and forth to preview the effect of the ease on the animation.

   

   Figure 5: Previewing the ease using the Motion Editor Graph

Changing the duration of nested animations

It is a simple matter to change the length of a nested animation. To change the duration:

1. Go to the Timeline. Make the animation longer by choosing the last frame of the animation and dragging it to the right. Make an animation shorter by dragging the last frame to the left.

   

   Figure 6: Drag the end of the frame span to lengthen the animation
2. Click Scene 1 to return to the main timeline.
3. Right-click the object again and choose Create Motion Tween.
4. Place the playhead on Frame 1 in the timeline.
5. Press the Shift key and drag the symbol containing the nested animation off the Stage to the left.
6. Extend the duration of the animation by repeating Step 1.
7. Select the last frame of the animation and hold down the Shift key to constrain the nested animation and drag it to the right, just off the Stage.
8. Scrub the timeline to see the object bounce across the Stage.

   Note: You can change the number of times the object bounces across the Stage by increasing or decreasing the main timeline animation. The longer the timeframe, the more times the object will repeat the animation. The shorter the timeframe, the fewer times the object will repeat the animation. If a single instance of the nested animation is 24 frames, then the object will bounce only once if the main timeline is set to 24 frames.

Where to go from here

• Flash CS4 Help and Support
• Learn Flash CS4
• Creating motion tweens: Part 1, 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