The word “Tweening” comes from traditional cel animation where top artists would draw the key frames and the less talented, lower-paid artists would create the frames between the key frames. Flash has the ability to fill in the frames between keyframes. All you have to do is ask.

Using motion tweens you can move, scale, tint, rotate and make transparent, various objects on your timeline. The key to motion tweening is in the use of symbols. You can not motion tween a drawing on your stage. ONLY SYMBOLS CAN BE MOTION TWEENED!

To Create a Motion Tween

1. Open leaf.fla that we created in the last lesson.

Remember, each of these leaves is already a symbol.

2. Click on frame 1 of one of the leaf layers. Right click on frame 1, and choose Create Motion Tween.

3. Repeat this process for each layer.

Your timeline should appear as seen below:

4. Drag the end of each layer (at frame 24) and extend it to Frame 40.

5. Keep your playhead at frame 40 and move each leaf until it is past the stage at the bottom.

Hint: Stagger the leaves to create a random falling effect

6. Press Command + Enter to Test Movie

Your animation should appear as seen below

This is basic motion animation. You can use motion animation to achieve various effects.

Scale Tweening

You can use scale tweening to make items grow and shrink. This can be done either while they move, or while they are stationary.

To Scale Tween

7. Select the keyframe on frame 40 of leaf1.

8. Use the Free Transform Tool  to make the leaf symbol larger

****Note**** You can use CMD + T to access the Transform Panel which allows you to scale by percentage for accuracy. It also offers a constrain proportions check box to make sure the height and width will resize proportionately.

9. Repeat this step on leaf3 and leaf5 layers but use different sizes.

Your animation should appear as seen below

Tint Tween

You can also use tweening to change the color of your symbols. This will not work with overly complicated drawings, but simple shapes can be easily tinted.

To Tint Tween

10. Select the keyframe on frame 40 on the leaf5 layer

11. Select the leaf symbol

It is really important that you actually click on the instance of the symbol that you want to change, or you will not get the proper options available in the property inspector.

12. On the property inspector choose the Color Effect drop down menu and choose Tint

13. Choose a color and decide how much tint you would like to apply (percentage)

14. Repeat this step with the remaining layers and use various colours.

Your animation should now appear as seen below:

The effect can be more noticeable when the symbol moves more slowly.

 

Rotate Tween

To tween using rotation depends on the Registration Point discussed in the last lesson. Your symbol will rotate around the registration point as you have set it inside your symbol. You could rotate the end keyframe, but setting rotation is much more simple than you think.

To Rotate Tween

15. Click anywhere in the tweened area on leaf 5 layer

16. In the property inspector set the Rotate drop down to CW (clockwise)

17. Select the object to rotate 2 times

Hint: This will determine how fast the object turns. A higher number will mean that the object has to turn faster to complete that number of rotations in 40 frames.

18. Repeat this process for the other leaf layers. Change the direction and speed of rotation for each one.

Your animation should appear as seen below:

Tweening Text

You can tween text, but not when it is an object. To tween text, you must create the text object and then convert it to a symbol.

19. Create text on a new layer, convert it to a symbol and animate it to reflect the animation seen below.

Save this flash animation as leaf.fla and place it in the folder that you share it with me.