Adding Text Special Effects

Adding text in lesson 5 was fun, and allows us to communicate with many styles and colors, but that's not the limit of Ming and text!

You 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_Black.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.php.net/manual/en].

Initialize our loop to the length of our variable

for($i=0; $i Draw each character one at a time.
$myGlyphs->drawGlyph($myFont,$myString[$i]);

Move our drawing pen over to start the next character.
$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

print '<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">
</EMBED>
</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.

Code Summary for Lesson 7:



Result: