Adding Motion

Now that everyone is chomping at the bit to get things moving, let's take some time to explore various types of motion. Lesson 8 will be in 3 parts, each showing different motions and/or combinations of motions.

Note-I refuse to take responsibility for any motion sickness!

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

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 move our shape to it's new position.

$movingSquare->move(40,0);

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

$myMovie->nextFrame();
$movingSquare->move(40,0);
$myMovie->nextFrame();
$movingSquare->move(40,0);
$myMovie->nextFrame();
$movingSquare->move(40,0);
$myMovie->nextFrame();
$movingSquare->move(40,0);
$myMovie->nextFrame();
$movingSquare->move(40,0);
$myMovie->nextFrame();
$movingSquare->move(40,0);
$myMovie->nextFrame();
$movingSquare->move(40,0);
$myMovie->nextFrame();
$movingSquare->move(40,0);
$myMovie->nextFrame();
$movingSquare->move(40,0);
$myMovie->nextFrame();
$movingSquare->move(40,0);
$myMovie->nextFrame();
$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("lesson8a.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="lesson8a.swf">
<EMBED src="lesson8a.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 color and transparency of our movies contents!

Code summary for lesson 8a:


Result: