Tweening Shapes

The aim of the tutorial is to learn how to morph shapes in Flash. In Flash this is called tweening shapes. This is a simple form of animation that changes one shape into another.

New: See Flash Demo Movie of how to build this Flash file

Step one: Creating a Shape

1. Open a new document.
2. Select an appropriate size and background colour by going to: Modify > Document
   The size of my movie is: 200 x 130
3. Type the word: one
   
   
   

   The layer I shape tweened starts with nothing but the word: one
   
   Note: Anything you shape tween must be on the same layer, so make sure that objects that are not going to be shape tweened are in a separate layer.
   
   
4. You may wish to change the size of your text with the free transformation tool .
5. Select your arrow tool .
6. With the word 'one' still selected go to: Modify > Break Apart
   This breaks the word up into individual letters.
7. Do the same thing again: Modify > Break Apart
   The second break apart creates shapes.
   
   
   

   When a shape is selected, it is dotty.
   
   If it is not dotty when selected, but has a rectangle around it, it is not a shape, which means you cannot shape tween it!

Step two: Selecting the frame to shape tween

1. If the Property panel is not open, open it by going: Window > Properties
2. The shape tween is a frame property. To display the frame details in the Property panel click on the keyframe in frame one (the dot under the play head).
3. You should now see the word Tween in the Property panel. From the drop down menu select: Shape
   
   

There are now other options visible in this section of the Property panel, none of which you have to use!

Tween options visible in the Timeline when the tweened frame is selected.

Ease: A positive value will speed the tween, so that the shape changes very rapidly, then slows down. A negative number does the opposite. Quite honestly it does not make a big difference.
Blend - Distributive: Creates more smooth but irregular shapes in the animation.
Blend - Angular: Preserves angles and straight lines during the animation. If there are no angles or straight lines, Flash will revert back to Distributive without asking!

Note: As the tween is not finished, you will not see what these settings do, so don't change them now, come back to frame 1 and play with these settings when you have finished the tween.

Step three: Your second shape

For a shape tween to work you must have two shapes.

1. Right click (Mac: Ctrl click) on frame 15 and select: Insert Keyframe.
   
   
   

   The time line should now have a arrow between frame 1 and 15.
   
   This is the symbol for a tween. If your time line does not have an arrow, you have done something wrong
   
   At this stage you can either change the shape of your existing art work, or delete it and create a new shape. I am going to do the latter.
   
2. Delete the word: one
   The word will still be in frame 1.
3. Type the word: two
4. If you wish, change its size, position, rotation or colour.
5. With the word 'two' still selected go to: Modify > Break Apart
6. Do the same thing again: Modify > Break Apart

Step four: Test your movie

Your shape tween should now be finished.

1. Save the movie
2. Go to: Control > Test movie

Step five: Shape hints

You do not need to use shape hints and I did not use them in the movie above, but often shape tweens throw up unexpected results. To control the way the shape changes as it moves you use shape hints.

1. Go back to frame 1
2. Go to: Modify > Shape > Add Shape Hint
   This will place a disk marked with a letter: A
3. Drag this to point to a new position that you want to mark on the word: one
4. Go to the last frame of the shape tween: frame 15
   The disk will already be there.
5. Drag it to mark a corresponding point on the word: two
6. Test the move to see the difference.
7. Change the position of the disks and test again.

• If you place additional disks in frame 1, they will be marked B , C , D etc. You can only have 24 disks.
• If the disks are not visible go to: View > Show Shape Hints
• It is best to place the first disk in the top left hand corner of your shape and work anti-clockwise around the shape with subsequent disks.

Step six: Tips

For the best results try not to make the shapes too complicated. Otherwise you may get unexpected results.

You can shape tween things you draw or type, but if they are groups, instances or text, they must be broken apart (Modify > Break Apart). Text has to be broken apart twice! Some groups or other objects may need to be broken apart several times. Remember if the object is not dotty, you cannot shape tween it.

The simplest thing to shape tween is something you have drawn on stage.

You can also break apart and shape tween a bitmap, but it does not work very well.