Lessons 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8a | 8b | 8c | 8d | 9 | 10 | 11 | 12 | 13 | 14 | 15 |___| Home | Code Summary
[home]Lesson 4 - Drawing more complex shapes!


Drawing curves and/or circles requires a bit more complex geometry. Spend some time studying the examples that draw curves, it will pay off in the long run.
Luckily, Ming's creator Dave provided a code to use to draw circles recently:

// draws a circle with radius $r
// centered at ($x,$y) into shape $s

$a = $r * 0.414213562;
// = tan(22.5 deg)

$b = $r * 0.707106781;
// = sqrt(2)/2 = sin(45 deg)

$s->movePenTo($x+$r, $y);

$s->drawCurveTo($x+$r, $y-$a, $x+$b, $y-$b);
$s->drawCurveTo($x+$a, $y-$r, $x, $y-$r);
$s->drawCurveTo($x-$a, $y-$r, $x-$b, $y-$b);
$s->drawCurveTo($x-$r, $y-$a, $x-$r, $y);
$s->drawCurveTo($x-$r, $y+$a, $x-$b, $y+$b);
$s->drawCurveTo($x-$a, $y+$r, $x, $y+$r);
$s->drawCurveTo($x+$a, $y+$r, $x+$b, $y+$b);
$s->drawCurveTo($x+$r, $y+$a, $x+$r, $y);

So, let's add a circle to our banner!

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

<html>
<body>

<?php 

B) Here are our shapes as before (the lines and squares)

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

$myShape2=new SWFShape(); 
$myShape2->setLine(1,0,0,0); 
$myShape2->setRightFill(0,255,0); 
$myShape2->drawLine(50,0); 
$myShape2->drawLine(0,50); 
$myShape2->drawLine(-50,0); 
$myShape2->drawLine(0,-50);

C) Next, we must define our circle shape and set it's line and fill attributes.

$myShape3=new SWFShape(); 
$myShape3->setLine(1,0,0,0); 
$myShape3->setRightFill(255,0,255); 

D) Next, we set the variables to use Dave's circle drawing function. We need to define the radius of the circle ($ra), and if we want it centered in the shape's area, we define it's center ($x and $y).

$ra = 40; 
$x = 40; 
$y = 40; 

E) Then we throw in Dave's circle draw function.

$a = $ra * 0.414213562; // = tan(22.5 deg)
$b = $ra * 0.707106781; // = sqrt(2)/2 = sin(45 deg)

$myShape3->movePenTo($x+$ra, $y); 

$myShape3->drawCurveTo($x+$ra, $y-$a, $x+$b, $y-$b); 
$myShape3->drawCurveTo($x+$a, $y-$ra, $x, $y-$ra); 
$myShape3->drawCurveTo($x-$a, $y-$ra, $x-$b, $y-$b); 
$myShape3->drawCurveTo($x-$ra, $y-$a, $x-$ra, $y); 
$myShape3->drawCurveTo($x-$ra, $y+$a, $x-$b, $y+$b); 
$myShape3->drawCurveTo($x-$a, $y+$ra, $x, $y+$ra); 
$myShape3->drawCurveTo($x+$a, $y+$ra, $x+$b, $y+$b); 
$myShape3->drawCurveTo($x+$ra, $y+$a, $x+$ra, $y); 

F) Next, we create our movie and add our previous shapes as always.

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

$firstLine=$myMovie->add($myShape1); 
$firstLine->moveTo(10,10); 

$secondLine=$myMovie->add($myShape1); 
$secondLine->moveTo(10,70); 

$firstSquare=$myMovie->add($myShape2); 
$firstSquare->moveTo(15,15); 

$secondSquare=$myMovie->add($myShape2); 
$secondSquare->moveTo(395,15); 

G) Then we add our circle just like any shape, and move it to the center of the banner.

$firstCircle=$myMovie->add($myShape3); 
$firstCircle->moveTo(190,0); 

H) Finally, we save our movie, close our php code block, and add the standard html to display the generated swf file.

$myMovie->save("lesson4.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="lesson4.swf">
<EMBED src="lesson4.swf" WIDTH=460 HEIGHT=80 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"> 
</OBJECT>

</body>
</html> 

NOTE-see how the circle is over the lines? This is due to the circle's instance being added after the line's instance in the coding. If we add the circle's instance first, the lines will overlay the circle instead.

Next lesson, we will add some text to our banner!

Code summary for lesson 4:

<html>
<body>

<?php 
$myShape1=new SWFShape(); 
$myShape1->setLine(5,0,0,255); 
$myShape1->drawLine(440,0); 

$myShape2=new SWFShape(); 
$myShape2->setLine(1,0,0,0); 
$myShape2->setRightFill(0,255,0); 
$myShape2->drawLine(50,0); 
$myShape2->drawLine(0,50); 
$myShape2->drawLine(-50,0); 
$myShape2->drawLine(0,-50); 

$myShape3=new SWFShape(); 
$myShape3->setLine(1,0,0,0); 
$myShape3->setRightFill(255,0,255); 

$ra = 40; 
$x = 40; 
$y = 40; 

$a = $ra * 0.414213562; // = tan(22.5 deg)
$b = $ra * 0.707106781; // = sqrt(2)/2 = sin(45 deg)

$myShape3->movePenTo($x+$ra, $y); 

$myShape3->drawCurveTo($x+$ra, $y-$a, $x+$b, $y-$b); 
$myShape3->drawCurveTo($x+$a, $y-$ra, $x, $y-$ra); 
$myShape3->drawCurveTo($x-$a, $y-$ra, $x-$b, $y-$b); 
$myShape3->drawCurveTo($x-$ra, $y-$a, $x-$ra, $y); 
$myShape3->drawCurveTo($x-$ra, $y+$a, $x-$b, $y+$b); 
$myShape3->drawCurveTo($x-$a, $y+$ra, $x, $y+$ra); 
$myShape3->drawCurveTo($x+$a, $y+$ra, $x+$b, $y+$b); 
$myShape3->drawCurveTo($x+$ra, $y+$a, $x+$ra, $y); 


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

$firstLine=$myMovie->add($myShape1); 
$firstLine->moveTo(10,10); 

$secondLine=$myMovie->add($myShape1); 
$secondLine->moveTo(10,70); 

$firstSquare=$myMovie->add($myShape2); 
$firstSquare->moveTo(15,15); 

$secondSquare=$myMovie->add($myShape2); 
$secondSquare->moveTo(395,15); 

$firstCircle=$myMovie->add($myShape3); 
$firstCircle->moveTo(190,0); 

$myMovie->save("lesson4.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="lesson4.swf">
<EMBED src="lesson4.swf" WIDTH=460 HEIGHT=80 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</OBJECT>

</body>
</html> 

^ Execute this php script.
Go on with Lesson 5!



Free Hosting Provide By: Web Hosting Service http://www.hostrocket.com
Make $50 Per Sale: VoIP Affiliate Program http://affiliates.viatalk.com
ViaTalk: Internet Phone Service http://www.viatalk.com