Adding Motion - Spin

In this version of lesson 8, we will make a box shape move across our movie screen while spinning.

A) Begin as always by opening our html page and beginning our php code block

<html>
<body>
<?php

B) Next, we define our shape and set it's line and fill attributes as usual

$myShape1=new SWFShape();
$myShape1->setLine(5,0,0,255);
$myShape1->setRightFill(255,255,0);

C) When moving shapes, it is best to try to draw them with a centered starting point. Since this square is going to be 60x60, we will move the drawing pen -30,-30 to center it, then draw it's lines as usual.

$myShape1->movePen(-30,-30);
$myShape1->drawLine(60,0);
$myShape1->drawLine(0,60);
$myShape1->drawLine(-60,0);
$myShape1->drawLine(0,-60);

D) Next, we define our movie and it's attributes as usual

$myMovie=new SWFMovie();
$myMovie->setDimension(460,80);
$myMovie->setBackground(255,0,0);

E) Now we define our instance of the shape we will be moving, and move it to the starting point of our animation

$movingSquare=$myMovie->add($myShape1);
$movingSquare->moveTo(40,40);

F) Next, we move our movie forward one frame, as if going to the next frame of a gif animation or any movie film.

$myMovie->nextFrame();

G) Once we are on a new movie frame, we can rotate our shape to any degree of rotation (we use negative values here since we are moving left to right), and then we can move our shape to it's new position.

$movingSquare->rotate(-15);
$movingSquare->move(40,0);

H) Repeat the previous two steps, rotating and moving your shape to it's next position and advancing the frames till you are done with your animation

$myMovie->nextFrame();
$movingSquare->rotate(-15);
$movingSquare->move(40,0);
$myMovie->nextFrame();
$movingSquare->rotate(-15);
$movingSquare->move(40,0);
$myMovie->nextFrame();
$movingSquare->rotate(-15);
$movingSquare->move(40,0);
$myMovie->nextFrame();
$movingSquare->rotate(-15);
$movingSquare->move(40,0);
$myMovie->nextFrame();
$movingSquare->rotate(-15);
$movingSquare->move(40,0);
$myMovie->nextFrame();
$movingSquare->rotate(-15);
$movingSquare->move(40,0);
$myMovie->nextFrame();
$movingSquare->rotate(-15);
$movingSquare->move(40,0);
$myMovie->nextFrame();
$movingSquare->rotate(-15);
$movingSquare->move(40,0);
$myMovie->nextFrame();
$movingSquare->rotate(-15);
$movingSquare->move(40,0);
$myMovie->nextFrame();
$movingSquare->rotate(-15);
$movingSquare->move(40,0);
$myMovie->nextFrame();
$movingSquare->rotate(-15);
$movingSquare->move(40,0);

I) Once we are done moving things around, we can save and output our movie to our html tags as usual.

$myMovie->save("lesson8b.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="lesson8b.swf">
<EMBED src="lesson8b.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 change the size of our movies contents!

Code summary for lesson 8b:



Result: