![[home]](isologo.gif)
Lesson 10 - Morphing one
shape to another (morph tween)Lesson 10 - Morphing one
shape to another (morph tween)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->setLine(5,255,255,0);
$myTriangle->setLeftFill(0,0,255);
$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.
for($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=200 HEIGHT=200>
<PARAM NAME=movie VALUE="lesson10.swf">
<EMBED src="lesson10.swf" WIDTH=200 HEIGHT=200 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</OBJECT>
</body>
</html>
Next lesson we will learn to create a link in our swf movie.
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. In most cases, it takes less coding to make
color changes using multColor.
<html>
<body>
<?php
$myMorph=new SWFMorph();
$mySquare=$myMorph->getShape1();
$mySquare->setLine(5,0,0,255);
$mySquare->setLeftFill(255,0,0);
$mySquare->drawLine(100,0);
$mySquare->drawLine(0,100);
$mySquare->drawLine(-100,0);
$mySquare->drawLine(0,-100);
$myTriangle=$myMorph->getShape2();
$myTriangle->setLine(5,255,255,0);
$myTriangle->setLeftFill(0,0,255);
$myTriangle->movePen(50,0);
$myTriangle->drawLineTo(100,0);
$myTriangle->drawLineTo(50,100);
$myTriangle->drawLineTo(0,0);
$myTriangle->drawLineTo(50,0);
$myMovie=new SWFMovie();
$myMovie->setDimension(200,200);
$myMovie->setBackground(255,255,255);
$firstMorph=$myMovie->add($myMorph);
$firstMorph->moveTo(100,100);
for($i=0; $i<1.05; $i+=0.05){
$firstMorph->setRatio($i);
$myMovie->nextFrame();
}
for($p=0; $p<10; $p++){
$myMovie->nextFrame();
}
$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=200 HEIGHT=200>
<PARAM NAME=movie
VALUE="lesson10.swf">
<EMBED src="lesson10.swf" WIDTH=200 HEIGHT=200
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</OBJECT>
</body>
</html>