Custom Search

Flash - Morphing

In this lesson we are going to use Flash to 'morph' one shape into another

Open up a new Flash document. Call it 'Morph' and save it.

Click on frame 1 and draw a filled circle within the canvas.

You can choose the size and fill of the shape - it doesn't matter!

Now insert a blank keyframe in frame 10 and construct a filled square at that point.

The sizes, positions, colours and fill style of both objects do not matter - all that matters is that they are in the same layer.

Now select the first frame that you created. (You do that by clicking on   Frame 1 of your layer in the timeline - the cell on the timeline goes black when selected).

You now have to change the 'tween type'. You do that within 'Properties'. This window is usually at the bottom of your screen. If you cannot see this window you can show it by going to the top menu bar and selecting 'Window' - then select properties and a tick will appear by it as the frame opens at the bottom of the page. Within 'Properties' select Tween and select 'Shape' from the drop-down menu,

You will then notice that the 'tween frame' colour becomes green.

You can then test your movie.

The one shape Morphs into the other. You need to experiment with colour, shape and timings to get the desired effect. To make it smoother you need more frames between the images and to increase the framerate (Modify - Document...).

The sample below had morphing images 100 frames apart and the rate was 36 fps. To make the effect more pleasing to the eye I had the shape morph into another and then back again so that the repeat was smooth. I also added a pause at the end of the sequence. Each shape was morphed in a different layer - that makes editing much easier to do. I had them all change in time with each other - perhaps you would like to make them change at different times and rates - it is fun to experiment - but also very time consuming!

Notice that the morphing can occur over a distance apart on the canvas and that colours can gradually change too... you should be able to use this in many ways!

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player