President Obama Illustration
This tutorial shows you how to use the Shape Tween function in Flash CS3 by transforming a square into text.

Version: Flash CS3

Download Source Files

1: Start Flash

Create a new document in Flash with default settings.

Start by selecting the Rectangle Tool (R) to draw a simple square. Choose a colour of your choice for the Fill but set colour None for the Stroke. Remember to hold down the shift key to draw a perfect square.

Rectangle Tool

2: Insert Keyframe

On the timeline select layer 1 and go to frame 60. Here right-click and insert a Keyframe. Remain on frame 60 and delete the square.

Insert a Keyframe

3: Text Tool

Whilst still in frame 60 select the Text Tool (T) and enter the text ‘Square’ in a font of your choosing. Set the position and size of the text as shown. Set the text colour to the same as your square.

Text Tool

4: Break Apart

With the text selected press Ctrl + B for Break Apart twice.

5: Shape Tween

Now select frame 1, right-click it and select Create Shape Tween.

Insert a Keyframe

6: Animation Order

To set the order of animation select the square in frame 1 and press Ctrl + Shift + H, drag the red circled a to the top left hand corner of the square. Do the same process for b (right-centre) and c (bottom-centre).

Animation Order

7: Play

That’s it. Go to Control > Play to try it out.

Square

We'd like to know your opinions and discuss it with us and others...

Post a comment...


pointer