Links

Did You Know?

 

What is Tweening?

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 snowflake.fla that we created in the last lesson.

Remember, each of these snowflakes is already a symbol.

2. Add a keyframe to each layer on frame 40

Your timeline should appear as seen below:

 

3. Choose Frame 40 on the snowflake1 layer

4. Make sure the snowflake on that keyframe is selected and use your shift + down arrow keys to nudge the snowflake until it is past the stage at the bottom.

5. Repeat this process until the snowflakes on all 5 new keyframes have been moved below the stage.

Hint: Remember to stagger the snowflakes to create a random falling effect.

 

6. Right-click anywhere between the keyframes on the snowflake5 layer.

5. Choose Create Motion Tween

You will notice that the space between keyframes is now a light purple instead of grey and there is an arrow that stretches across the frames. This indicates that the frames have been tweened.

7. Repeat this process until all 5 snowflake layers have been tweened.

8. Choose Contol > Test Movie

Your animation should appear as seen below

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Note - The snowman will flash at the end of the animation because we have inserted it on the timeline but we haven't tweened it yet.

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

9. Select the keyframe on frame 40 of snowflake1.

10. Use the Free Transform Tool to make the snowflakes 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.

11. Repeat this step on snowflake3 and snowflake5 layers but use different sizes.

Your animation should appear as seen below



Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

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

12. Select the keyframe on frame 40 on the snowflake5 layer

13. Select the snowflake 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.

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

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

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

Your animation should now appear as seen below:

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

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

17. Click anywhere in the tweened area on snowflake 5 layer

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

19. 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.

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

Your animation should appear as seen below:

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

Transparency Tween

This type of tween is what we use to fade in and fade out. You can place objects into your timeline and make them transparent and they have them fade in when you want them to, and fade out when you are ready.

To Transparency Tween

21. Go to the snowman layer and insert a keyframe at frames 51, 61 and 71.

22. Select frame 41 on the snowman layer

23. Select the snowman symbol on the stage.

***Note*** - It is important to actually click on the snowman symbol on the stage to get the available properties in the property inspector.

24. In the property inspector, choose Alpha from the Color menu.

25. Change the percentage to 0%

26. Reduce the Alpha to 0% for the snowman symbol on frame 71 aswell.

27. Right-Click anywhere in between frame 41 and 51 on the snowman layer and choose Create Motion Tween.

28. Right-Click anywhere in between frame 61 and 71 on the snowman layer and choose Create Motion Tween.

Your timeline should appear as seen below

 

Your animation should now appear as seen below:

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player



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.

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

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

Save this flash animation as snowflake.fla and complete Assignment 7.