Flash 8 : Shape tween

Shape tween or else we can say it as morphing. We used it when we want to morph a shape. For example from a triangle to a circle. Now’s let look how we can do it.

First create a new movie.

Next we must create an object. For this step we will used circle. Let’s draw a circle in the working panel at frame 1. For color I leave it for you to choose.

Next we want to create a rectangle. Choose frame 50, and insert keyframe by right right click and insert keyframe.

Click at frame 50. You can see the circle at the working panel selected. Now delete the object.

Draw a rectangle at frame 50 as a replacement for the circle we just deleted.

Now Click at frame 1 and open properties panel at the bottom Choose Shape for tween.

You will get a frame with a green frame with arrow showing for shape tween.

Save this file and go to File | Publish Preview | HTML. You will now see your animation. Another way you can use is, Control | Test Scene or Control | Test Movie.

Well, it’s not just finish like that, you can add more morphing. Now let’s change from a rectangle to a simple letter. Add a keyframe at frame 100. We can see that the rectangle is selected. Now delete the shape, as we delete the circle previously. We replace the rectangle with a letter “T”, font type : arial, size : 125.

There is a difference between a normal shape and text. Before animate the text we must convert it to an object. This only apply for shape tween animation. Choose Modify | Breakapart. When we are done, you can see the text is selected.

Now we are ready to animate the object. Click at frame 50 where the rectangle origin. Open the panel properties and choose shape as their tween. Same like before you should get a green frame like the previous step.

Save the file and preview the output. When the rectangle want to morph to a text, you can see a the transition is not very smooth. You can change it using a shapehint.

Back to frame 50, click Modify | Shape | Add Shapehint. You will get a small circle with a letter inside. Move it to the edge of the rectangle.

Move to frame 100, you will also get a small circle same as before. Move it to the edge of the letter.

Now do the same thing and add another 3 shape hint. Arrange it accordingly.

Save your work. Now preview it. You can see there is a difference compared to before. [^_^]

Note : Breakapart only apply for text in shape tween animation.