Morphing Effect in Flash (Shape Tween)

Flash | Beginner | By Blue_Chi

Macromedia Flash is known as one of the greatest animation tools around. Using the Flash authoring tool you can create frame-by-frame animations, motion-tweened animations which are created by specifying the first and the last frames only, and dynamic animations that are generated via Action Script. In addition to all these animations, Flash can create morphing animations, in which you specify the first and the final shapes so that all the frames in between are created by the authoring tool. This is called Shape Tween. Flash can only motion tween vector shapes. Bitmaps, fonts, and all other objects such as symbols will have to be converted to or broken into vector shapes for flash to be able to motion tween them. This tutorial will teach you how to motion tween shapes, texts and bitmaps as well.

Creating a simple motion tween is a very easy process, you need at least two vector shapes, the initial shape and the final shape. You merely select the frame type as "Shape Tween" to make the first shape morph into the other during play back of the movie. Let's do this step by step.

First of all, in a new flash file, draw a circle in Frame 1. In the same layer, Insert a blank keyframe in frame 10 (Right-click that frame and select Insert Blank Keyframe) and draw a square in there. The sizes, positions, colours of both objects do not matter, all that matters is that they are in the same layer.

right-click the frame to see this menu

To do the magic trick you have to select the first frame that you created, you do that by clicking on Frame 1 of your layer in the timeline. Then you have to change the tween type from the Properties Inspector , if you cannot see this window you can show it by going to Window > Properties . In the Properties lnspector, simply change the tween to Shape, you should notice that the frame colour changes to green when Shape tween is used. You are not required to make any more changes to see the effect working. You can just hit Enter on your keyboard to see the animation rolling.

click on the actual frame once
properties panel

You can easily make the square in turn morph to another shape, you do that by repeating the process, in this case, we can add another blank keyframe at Frame 20, draw a circle this time in there. Now select Frames 10 on your layer and change the tween in the Properties panel to Shape, that should do it.

Our example was a very basic example of how to make a morphing effect in Flash. We have used only one shape in each frame, while in reality you can put as many shapes in any frame, if the number of shapes in the first frame is less than those in the second frame the shape will divide to create the new shape, if the case was the opposite, the shapes will combine to make up the new shape.

Morphing Texts

The main limitation on the morphing effect is that it works only on vector shapes, which in reality is the reason of why it actually works. Anyway, this means that blocks of text will not automatically work when put in a shape tweened frame. For you to be able to use text you will have to convert it to basic vector shapes, this is easily done by breaking it up. This is done by selecting the block of text and going to Modify > Break Apart. The first time you break up a text field the process will result in the separation of the text into separate letters that will not be shape tweened either, you would have to break a text it again to manage to use the effect. Instantly repeat the process, go to Modify > Break Apart, the text you now see is no longer editable as text, and it will morph into other shapes if used in a shape tweened frame.

Original text unbroken.
Select the text and break it apart.
The text will be broken into letters.
Break it apart again to make it work.

Morphing Bitmaps

Images imported into flash in any bitmap format will not be capable of being used in a shape tweened frame. This means that JPEGs, GIFs, PNGs, or whatever image format you use, it will not work in a morphing animation because they are not in vector format. Luckily for us, the Flash authoring tool can convert bitmaps to vectors for us. The command is readily available under Modify > Bitmap > Trace Bitmap. Tracing a bitmap will convert our image into a vector image that can be used normally in a shape tweened frame. For more specific details on how to use the Trace Bitmap command you can view this tutorial.

right-click the frame to see this menu
Select your image on the stage.
Refer to the other tutorial for more details on the command.
Draft vector version.

This should conclude our tutorial, though you might want to experiment on your own the different options and settings configurable at the properties panel of shape tweened frames. I might write a tutorial on shape hints in the soon future, these allow the user to have more control over the way shapes are automatically morphed. Other related tutorials that we have on this topic are Motion Tween Animation and our Motion Guide Animation Tutorials. Feel free to post at the Oman3D Forums if you needed any help.

- End of Tutorial