|
Now that we have learned to draw and write on our flash movie, let's take the next step towards making them look Flashy!
Gradients have long been used by WebTv users in tables to create incredible art (see the WebTv categories in these forums). Flash goes an extra step and uses gradients of two types, Linear and Radial. Linear gradients are similar to WebTv's, while Radial gradients offer the ability to create round gradient effects, excellent for creating spheres and various round objects with a 3d appearance. These gradient fills can be manipulated by Ming to have any ratio of colors, any scale, and can be moved around the fill area. Confused? Don't be, just jump in and it will make sense in a minute! A) Begin as always by opening our html page and beginning our php code block <html> <body> <?php b) Here are our shapes as before (the lines and squares) B) It is best to get in the habit of creating your gradients near the begining of your Ming code, so as to make it available to any shapes you may create later. So, let's define a SWFGradient. $myGradient1=new SWFGradient(); C) Next, we define the colors that will make up the gradient fill, as well as the ratio of change from one color to the next. The ratio is the first parameter, and it is always in increasing values from 0.0 to 1.0, never more or less. Let's make a gradual gradient through 5 colors of the rainbow. Since we are using 5 colors, a smooth gradient ratio will be in multiples of 0.2 We will make our first color white $myGradient1->addEntry(0.0,255,255,255); Now let's add yellow Gradient1->addEntry(0.2,255,255,0); Next we'll add red $myGradient1->addEntry(0.4,255,0,0); Then we add purple $myGradient1->addEntry(0.6,255,0,255); On to blue $myGradient1->addEntry(0.8,0,0,255); And finally black for a shading effect $myGradient1->addEntry(1.0,0,0,0); D) Next, we add our lines as before $myShape1=new SWFShape(); $myShape1->setLine(5,0,0,255); $myShape1->drawLine(440,0); E) Now we add our square shape, and include our gradient fill $myShape2=new SWFShape(); $myShape2->setLine(1,0,0,0); Here we define a fill for our shape, and set it to a linear gradient $myFill1=$myShape2->addFill($myGradient1, SWFFILL_LINEAR_GRADIENT); Now we set our new fill's scale and move it into position, both of which usually require experimentation to get just the look you desire $myFill1->scaleTo(0.04); $myFill1->moveTo(30,0); Then finsh our shape as usual, using our newly defined fill in our settings $myShape2->setRightFill($myFill1); $myShape2->drawLine(50,0); $myShape2->drawLine(0,50); $myShape2->drawLine(-50,0); $myShape2->drawLine(0,-50); F) Next let's add our circle shape using the same fill, only different this time $myShape3=new SWFShape(); $myShape3->setLine(1,0,0,0); Now we define our fill, just as above, except we define it as a radial gradient this time $myFill2=$myShape3->addFill($myGradient1, SWFFILL_RADIAL_GRADIENT); Then we set our new fill's scale and move it into position, once again experimenting to get just the look you desire $myFill2->scaleTo(0.1); $myFill2->moveTo(10,10); Then finsh our shape as usual again, using our newly defined fill in our settings $myShape3->setRightFill($myFill2); $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); G) Since we are finished adding new fills, the rest or our code remains the same, from adding our text to defining our swf movie to saving and using our object tag to display it $myFont=new SWFFont("ParkAvenue_BT.fdb"); $myText=new SWFText(); $myText->setFont($myFont); $myText->setColor(255,255,0); $myText->setHeight(40); $myText->addString(" My First Flash!"); $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); $firstText=$myMovie->add($myText); $firstText->moveTo((460/2-($myText->getWidth(" My First Flash!"))/2)+10,50); $myMovie->save("lesson6.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="lesson6.swf"> <EMBED src="lesson6.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 how to create our text with border colors and fills! Code summary for lesson 6: Result: |