Morphing Shapes

There is a very simple and straight forward example of morphing from a square to a diamond at the Ming site (Link at the bottom)

The basic lesson above uses two shapes with the same number of sides, and provides a clean example. However, what if we are morphing between shapes with different numbers of sides? Most often you will not end up with the morph desired, though you may get some interesting results!

In order to insure your morph ends up as desired, always attempt to draw your two shapes with the same number of lines. This may mean drawing one line by breaking it into two lines, or adding a single pixel to the end of a line. Here is an example of drawing a triangle with four lines so it will morph with a square properly.

A) Begin as always with our opening html tags and begin our php code block

<html>
<body>
<?php

B) Next, we define our morph.

$myMorph=new SWFMorph();

C) Morphs are a bit unusual, and must have both shapes drawn within the morph's coding. So next we define our first morph shape

$mySquare=$myMorph->getShape1();

D) When defining fills for your morphing shapes, you must use setLeftFill if drawing your shapes in a clockwise manner (as in these lessons), unlike our normal setRightFill.

$mySquare->setLine(5,0,0,255);
$mySquare->setLeftFill(255,0,0);

E) Now we draw our first shape as usual

$mySquare->drawLine(100,0);
$mySquare->drawLine(0,100);
$mySquare->drawLine(-100,0);
$mySquare->drawLine(0,-100);

F) Next, we define our second morph shape

$myTriangle=$myMorph->getShape2();

G) Remember to use setLeftFill, and to create the second shape with as close to the same number of lines as the first shape that you can. Here, we split the top of the triangle into two lines to give it a total of four lines like the square has. Notice that the pen placement must be adjusted accordingly.

$myTriangle->movePen(50,0);
$myTriangle->drawLineTo(100,0);
$myTriangle->drawLineTo(50,100);
$myTriangle->drawLineTo(0,0);
$myTriangle->drawLineTo(50,0);

H) Now we need to define our movie

$myMovie=new SWFMovie();
$myMovie->setDimension(200,200);
$myMovie->setBackground(255,255,255);

I) Then we can add our morph to our movie and position it

$firstMorph=$myMovie->add($myMorph);
$firstMorph->moveTo(100,100);

J) Next, we need to set the animation for our morph. You can do it step by step using nextFrame and setRatio for each step. However, our usefull loop will help us do it in a couple of lines. First, set up our loop, adjust these amounts to suit your morph's needs. Here we loop till 1.05 to insure the shapes finish. Normally, you only loop till 1.0 or 0.0, and don't forget your opening bracket!

for($i=0; $i<1.05; $i+=0.05){

K) Now we let the loop's value set our ratio each time the loop runs, and advance the movie by one frame

$firstMorph->setRatio($i);
$myMovie->nextFrame();

L) Don't forget to close your loop with the closing bracket!
}

M) Here is a new code snippet for you. Use this to add a pause or delay to your animation. I added it so you could see the morph complete itself. It simply adds 10 frames to the movie with no changes.

($p=0; $p<10; $p++){
$myMovie->nextFrame();
}

N) And finally, we save our movie, close the php code block, and add our object section tags, then close our html document

$myMovie->save("lesson10.swf");
?>

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0" ID=objects WIDTH=460 HEIGHT=80>
<PARAM NAME=movie VALUE="lesson10.swf">
<EMBED src="lesson10.swf" WIDTH=460 HEIGHT=80 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
</OBJECT>
</BODY>
</html>

Next lesson we will learn to create a link in our swf movie.

Code summary for lesson 10:
Result:
**********
FYI-

Lesson 10 shows another way to change colors without using the multColor function used previously.

Morphing not only creates gradual shape changes, it also can be used to create color changes.

Try making a morph with both shapes the same except for the color to see this in action.

Find more examples at Sourceforge.