Shape Tween

In this tutorial, you're going to learn how to create a tweened animation: Shape Tweening.

Start by clicking on the first frame of "Layer 1", just to be sure the object we are going to draw will be placed there.

Now draw a circle on the stage using the "Oval Tool", as shown in Fig 1.

Fig 1

Next, we are going to apply "Shape Tween" to the KeyFrame.

But first, you need to make sure the object is broken apart, you can not apply "shape tween" to a grouped object.

Select the object, go to "Modify>Break Apart"

As show in Fig 1, the dotted circle means the object is broken apart.

You're good to go to the following step :)

Click on the first frame and, and click on the "Tween" drop down menu and select "Shape" in the "Properties" toolbar below, as show below. (Windows>Properties)

Right-click on the, let's say.. the 15th frame, and select "Insert Keyframe" as shown in fig 2.

Fig 2

You're going to see an arrow with green background connecting the first frame with the 15th, as an indication there's "Shape tween" between the 2 keyframes we made.

There is "Shape tween" now, but.. how are you going to see the change in the shape while both keyframes have the same shape of an object?

Therefore, we are going to change one of the objects, let's say the second one on frame 15, and place a square instead.

Let's do it!

Select the 15th frame (Fig 3), and press "delete" on your keyboard.

Make sure the selection is still on the 15th frame, now draw any other shape other than the circle, let's say a square.

Got to the "Control" menu, and select "Test Movie".

Fig 3

Fig 4

You're done! You'll notice the animation going in loop, just like in fig 3

To stop the animation when it reaches frame number 15, which is the end of the movie, right click on the 15th frame and select "Actions"

In the left column, under Actions>Movie Control, double click on "stop"

Test your movie, it should stop when the animation ends, unlike Fig 5

Fig 5

Excellent work!

Conclusion:

We created 2 different objects:

1- Circle.

2- Square.

Because there's Shape Tween, flash gradually changes the shape of the circle to square when it gets to the 15th frame.

Note: You can place Text instead of the square, make sure you break it apart.

Shape Tween, break apart. Always.

Do you still think flash is difficult? :)

Download *.fla