![[home]](isologo.gif)
Lesson 7 - Adding appereance to our textYou can add borders and fills to your text, creating the appearance of shape masks and/or adding to the beauty of your written words!
Let's make some words with borders and fill them with our rainbow gradient. No reason to keep adding to the complexity of these lessons, instead let's make this without all the extra shapes, and then see what everyone can do to customize it themselves!
A) Begin as always by opening our html page and begining our php
code block
<html>
<body>
<?php
B) Now let's define our gradient fill like in the
lesson 6
$myGradient1=new SWFGradient();
$myGradient1->addEntry(0.0,255,255,255);
$myGradient1->addEntry(0.2,255,255,0);
$myGradient1->addEntry(0.4,255,0,0);
$myGradient1->addEntry(0.6,255,0,255);
$myGradient1->addEntry(0.8,0,0,255);
$myGradient1->addEntry(1.0,0,0,0);
C) Next, we need to set a
variable to the characters we want to use, you'll see why in a momment
$myString="Bordered & Filled!";
D) To border and fill characters, we need to define
them as shapes
$myGlyphs=new SWFShape();
E) Next, we define the font to be used, block fonts
work best for filled characters
$myFont=new SWFFont("Arial_Block.fdb");
F) Now define our gradient fill so we can add it to our
shape and scale/move it to suit our designs (experiment according to the
gradient/font used)
$myFill1=$myGlyphs->addFill($myGradient1, SWFFILL_LINEAR_GRADIENT);
$myFill1->scaleTo(0.4);
$myFill1->moveTo(200,40);
G) Now we can define our shape's fill and line
style
$myGlyphs->setRightFill($myFill1);
$myGlyphs->setLine(1,0,0,0);
H) We need to
keep track of the size of our textual shapes, so let's define some variables for
easy reference when needed
$totalWidth=0;
$myHeight=$myFont->getAscent();
G) Unlike the Ming text function,
the drawGlyph function draws one character at a time. So we need to use a loop
to go through each character in the variable we set earlier
[Note-if you are new to loops, you should check out the php manual to get a basic understanding of them http://www.html.net/manual/en]
Initialize our loop to the length of our variable
for($i=0; $i<strlen($myString); $i++){
Draw each character one at a time
$myGlyphs->drawGlyph($myFont,$myString[$i]);
Move our drawing pen over to start the next chracter
$myGlyphs->movePen($myFont->getWidth($myString[$i]),0);
Keep track of our dimensions by adding the width of each charater to our variables
$totalWidth+=$myFont->getWidth($myString[$i]);
End the loop
}
If the loop gives you trouble, cc&p this code to use for now, and experiment with copies of it till you get a feelign for it.
H) Now we define our movie as usual, this time using our size
variables for the dimensions
$myMovie=new SWFMovie();
$myMovie->setDimension($totalWidth,$myHeight+($myHeight*.4));
$myMovie->setBackground(255,255,255);
I) Next we add
our bordered character shapes to the movie by creating our instance as usual,
moving it into place according to our size variables
$myInstance=$myMovie->add($myGlyphs);
$myInstance->moveTo(0,$myHeight);
J) Next, we save our movie as usual
$myMovie->save("lesson7.swf");
K) This is new for you in these
lessons, you can use php to print out your flash coding, setting the dimensions
according to any variables that contain the size in your coding.
Note that you must use an escape slash before each quotation mark you want in the tags, only the begining and ending quotation mark should not have escape slashes before them!!!
[Side-Note- if this confuses you, just do it the same as other lessons, then read the php manual to get an understanding about php's print function and escaping quotation marks]
$totalWidth*=2;
$myHeight*=2;
print "<center><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=$totalWidth HEIGHT=$myHeight>
<PARAM NAME=movie VALUE=\"lesson7.swf\">
<EMBED src=\"lesson7.swf\" WIDTH=$totalWidth HEIGHT=$myHeight TYPE=\"application/x-shockwave-flash\" PLUGINSPAGE=\"http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash\">
</OBJECT>
";
L) Finally, we close our php code
block and our html document as usual
?>
</body>
</html>
Don't forget, you can use radial
gradients as well as the linear gradient used in this lesson's example!
Next lesson, we will learn how to move, that's right I finally said it, move things around using frame by frame animation.
<html>
<body>
<?php
$myGradient1=new SWFGradient();
$myGradient1->addEntry(0.0,255,255,255);
$myGradient1->addEntry(0.2,255,255,0);
$myGradient1->addEntry(0.4,255,0,0);
$myGradient1->addEntry(0.6,255,0,255);
$myGradient1->addEntry(0.8,0,0,255);
$myGradient1->addEntry(1.0,0,0,0);
$myString="Bordered & Filled!";
$myGlyphs=new SWFShape();
$myFont=new SWFFont("Arial_Black.fdb");
$myFill1=$myGlyphs->addFill($myGradient1, SWFFILL_LINEAR_GRADIENT);
$myFill1->scaleTo(0.4);
$myFill1->moveTo(200,40);
$myGlyphs->setRightFill($myFill1);
$myGlyphs->setLine(1,0,0,0);
$totalWidth=0;
$myHeight=$myFont->getAscent();
for($i=0; $i<strlen($myString); $i++){
$myGlyphs->drawGlyph($myFont,$myString[$i]);
$myGlyphs->movePen($myFont->getWidth($myString[$i]),0);
$totalWidth+=$myFont->getWidth($myString[$i]);
}
$myMovie=new SWFMovie();
$myMovie->setDimension($totalWidth,$myHeight+($myHeight*.4));
$myMovie->setBackground(255,255,255);
$myInstance=$myMovie->add($myGlyphs);
$myInstance->moveTo(0,$myHeight);
$myMovie->save("lesson7.swf");
$totalWidth*=2;
$myHeight*=2;
print "<center><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=$totalWidth HEIGHT=$myHeight>
<PARAM NAME=movie VALUE=\"lesson7.swf\">
<EMBED src=\"lesson7.swf\" WIDTH=$totalWidth HEIGHT=$myHeight TYPE=\"application/x-shockwave-flash\" PLUGINSPAGE=\"http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash\">
</OBJECT>
";
?>
</body>
</html>