Home / Design Center / Tutorials

Creating animations using Motion tweens

Chris Georgenes

This video shows you how to create simple animations using motion tweens. You learn how to create keyframes and frame spans, and how to motion tween a symbol by changing its skew, color, position, and alpha transparency overtime.

Requirements

To follow along with this article, you will need the following software and files:

• Flash CS3 Professional
• Sample file (ZIP, 0.1 MB)

Watch this tutorial in the Adobe Creative Suite 3 Video Workshop.

Creating animations using Motion tweens

1. In Flash, choose File > New to open a new document. Choose the Flash File (ActionScript 3.0) format and click OK.
2. Choose the Oval tool in the Tools panel. Select a green swatch from the Fill color box and draw a green circle on the left side of the Stage.
3. Choose the Selection tool and select the circle. Now you'll convert the shape to a symbol. Symbols are required to work with Motion tweens.
4. Choose Modify > Convert to Symbol, or simply press F8 on your keyboard. This opens the Convert to Symbol dialog box.

5. Accept the defaults, including the symbol name (Symbol 1), by clicking OK. Symbol 1 is added to your Library panel.

   As you build your project and organize layers in the Timeline, keep in mind the two basic rules for Motion tweens: Apply them to symbols instances and use one symbol per a tween per a layer. Adding multiple symbols to a single layer and then adding a tween, usually breaks the tween.

   Now you need to create another keyframe in the Timeline.

6. Select Frame 25 and press F6 to insert a new blank keyframe. Remember that whenever you add a new keyframe, you can make a change to your animation. In this instance, you'll move the circle to the right side of the Stage (see Figure 1).

   

   Figure 1: Setting a keyframe lets you change your animation, here by moving the symbol to the right.

7. Select Frame 45 and press F6 to insert another blank keyframe. Now move the circle to the lower left side of the Stage. One more keyframe remains.

8. Select Frame 60 and press F6 again. Move the circle to the lower right side of the Stage.

   Now you'll add the Motion tweens between the keyframes.

9. Select Frame 20 in the Timeline. You can select any frame between the first two existing keyframes.

10. Make sure the Property inspector is open. If not, choose Window > Properties > Properties. Then choose Motion from the Tween dropdown in the Property Inspector. This is one way to insert the tween.

    The frames affected by the Motion tween turn a green color and a horizontal arrow appears below them (see Figure 2). A solid arrow lets you know the tween was successful; a dotted arrow indicates that the tween is broken or an error has occurred.

    

    Figure 2: Adding a Motion tween colors the frame and adds a horizontal arrow below it.

11. Now select Frame 30. This time, add the Motion tween by right-clicking (Windows) or Control-clicking (Mac OS) the selected frame and choosing Create Motion Tween from the context menu that appears.
12. Select Frame 50 and add another Motion tween, either using the Property inspector or by right-clicking or Control-clicking the selected frame. Now the animation is complete.

13. Move the playhead in the Timeline back and forth to preview the animation. The circle should move from left to right and back again until it reaches the bottom of the Stage.

    When you apply Motion tweens, you're not just limited to moving objects on the Stage. You can also scale objects.

14. Select Frame 25, a keyframe. Choose the Free Transform tool in the Tools panel, and scale down the circle to about half its original size.

15. Select Frame 45. Select the circle, and with the Free Transform tool, skew the object by dragging the top border to the left. Rotate it by hovering your pointer over a corner handle until the rotate icon appears and then drag the corner to up or down (see Figure 3).

    

    Figure 3: Skew and rotate the circle using the Free Transform tool.

16. Now that you've made these changes, move the playhead back and forth in the Timeline to preview the animation. Between the initial keyframe and Frame 25, the circle will move and shrink; between Frames 25 and 45, it moves, grows, and skews; and in the last frame, returns to its original shape.

    You can also apply different colors to keyframe objects, and Motion tweens will blend the colors over the animation.

17. Select Frame 30 and press F6 to insert a new keyframe. Drag the circle to the center of the Stage.
18. Choose the Property inspector. Choose Tint from the Color pop-up menu. Click the Fill color box and choose a blue swatch.

19. Now move the playhead to preview the animation. The color of the circle changes from green to blue and back again between Frames 25 and 45. You haven't added a new Motion tween here, just another keyframe where you changed the color of the symbol to blue.

    To complete the animation, you'll add a fade near the end.

20. Select Frame 60.
21. Choose the Property inspector. Choose Alpha from the Color pop-up menu. Use the Alpha slider to select a fade to 0.

22. Return to the Timeline and play back the animation from start to finish. The shape moves, changes shape and color, and fades out at the end all using Motion tweens.

    Before you finish, you will review one more Motion tween feature, easing.

23. Select any frame between the two initial keyframes, 1 and 25.
24. Choose the Property inspector, and notice the Ease option (below the Tween dropdown), which allows you to control the speed of the object as it reaches the next keyframe. Easing in ( 100) gradually increases the speed, and easing out (100) slows the object as it moves to the next keyframe.

25. Click the Edit button next to the Ease option to open the Custom Ease In/Ease Out dialog box (see Figure 4).

    

    Figure 4: Use the Custom Ease In/Ease Out dialog box to set custom rates for rotation, position, and other object properties.

26. Use the Property pop-up menu to create custom ease in and ease out rates for various properties of the selected object, including its position, rotation, and so on. Position, selected by default, is what you're adjusting when you use the simple Ease option in the Property inspector.
27. Adjust the curve handles in the Tween/Frames grid to set how quickly the selected property of the symbol tweens between the two defining keyframes.
28. Click Cancel to close the dialog box without making changes.

Where to go from here

For more information and additional tutorials, visit the Adobe Design Center.