Shape Tweening

Do the following to create a Shape Tweening.

1. First insert 41 frames in your movie.
To do this click frame 41 in Layer 1 on the timeline, then press F5.

Timeline


2. Enter a 1-digit on the canvas of your movie.
To do this: choose the Text Tool in the Toolbox.
Then enter "1" with font-size 48 and bold.
It is important that the font is not too thin.
Text Tool

3. Now yo need to position the 1-digit at the very center of your movie.
Select it by clciking it with the mouse.
Choose Modify > Align in the menu (or press Ctrl + K),
an Align Properties box appears.
Choose the settings shown below.
Remember to select the "Align to page"-option.

Click OK.

Align

Your 1-digit is now positioned at the center of the movie.

4. Next step is to "break apart" the font.
Select your 1-digit with the mouse and press Ctrl + B
(or choose Modify > Break Apart inthe menu).
Do this twice!

5. Now insert keyframes in frame 19, 40 and 41,
You do this by positioning the frame pointer in frame 19 - then press F6,
then repeating the same procedure for frame 40 and frame 41.

Timeline - Keyframe - Frame pointer


6.Now delete the 1-digit in frame 19.
To do this: position the frame pointer in frame 19.
Select your 1-digit and press the delete-button on the keyboard.

7.Next step is to enter a 2-digit in frame 19.
Choose Text Tool in the Toolbox and enter "2" with font-size 48 and bold.
(The 2-digit can be in another color than you used for the 1-digit)

8. Now align the 2-digit to the center of the movie.
Select the 2-digit with the mouse and choose Modify > Align in the menu(or press Ctrl + K),
an Align Properties box appears.
(Remember to select the "Align to page"-option).
Click OK.

Align Properties Box

The 2-digit is now positioned at the center of the movie.


9. Next step is to "break apart" the font of the 2-digit.
Select it with the mouse and press Ctrl + B (Or choose Modify > Break Apart in the menu).
Do this twice.

10. Now you need to insert a keyframe in frame 21.
This is done by positioning the frame pointer in frame 21 and then pressing F6,
(eventually look at point 5 in this tutorial).

11. Now comes the shape tweening.
First double-click the keyframe in frame 1.
A Frame Properties Box appears.
Choose "Tweening" and select Shape in the "tweening"-drop-down-box.
Click OK.

Frame Properties Box

Repeat this step to make a Shape Tweening in frame 21.

12. Next step is to add shape hints to your movie.
Shape Hint's allows you to control the shape tweening.
This means that you select certain points on the element you want to shape tween,
and then select the according points on the element you want the tweening to end with.
This way you are in charge of which points on the start-object should become which on the end-object.

Shape Hints contains characters to identify corresponding points on the start- and end-objects.

You can add up to 26 different Shape Hints in a Shape Tweening.

Position the frame pointer on frame 1.
Choose Modify > Transform > Add Shape Hint in the menu (or press Ctrl + H).
Do this twice.

Now you have 2 Hint's in frame 1 and 2 Hint's in frame19.
Each hint has a letter showing its current position.

13. Now you'd want to position the hints. Starting with the hints on the 1-digit.
Position the frame pointer on frame 1.
Drag the a-hint to the top of your 1-digit.
Drag the b-hint to the bottom of the 1-digit.

Hint's

The Hintt must be on the edge of the 1-digit.

14. Next position the hints on the 2-digit.
Position the frame pointer on frame 19.
Move the a-hint to the top of the 2-digit.
Move the b-hint to the bottom of the 2-digit.

hint2.gif (803 bytes)

You will notice that the hints changes color as they get positioned in frame 19.
When they are yellow in frame 1 and green in frame 19 they're positioned correctly.

15. Now you need to repeat step 12 to enter Shape Hints on frame 21 and frame 40.
Position the frame pointer on frame 21.
Choose Modify > Transform > Add Shape Hint in the menu (or press Ctrl + H).
Do this twice.

Now you have 2 Hints in frame 12 and 2 Hints in frame 40.
Each hint has a letter showing its current position.

16. Next repeat step 13 to position Shape Hints on frame 21
Position the frame pointer on frame 21.
Drag the a-hint to the top of your 2-digit.
Drag the b-hint to the bottom of the 2-digit.

The Hintt must be on the edge of the 2-digit.

17. Finally repeat step 14 to position Shape Hints on frame 40
Position the frame pointer on frame 40.
Move the a-hint to the top of the 1-digit.
Move the b-hint to the bottom of the 1-digit.

 

18. Now we only need to get the movie to loop.
You do this by double-clicking the keyframe in frame 41.
A Frame Properties Box appears.
Choose "Actions".

Click the button with the plus-sign on it.

Choose GoTo.
Select the "Go to and Play"-option.
Click OK.


You have now created your Shape Tweening.
Test the movie by pressing Ctrl + Enter.

You can create Shape Tweenings on any elements.
You just need to remember to break apart the element before doing so.
It's better to break apart once too many than once to few when you do a Shape tweening.

Remember: Flash requires that you must press Ctrl + B twice to break text.