Adding Text

By now, you should be familiar with creating shapes and adding instances to your movie. I know you all have something to say to the world, so let's start adding some text!

Ming uses special font files called fdb files which are created through special tools(flash generator templates and Dave's makefdb utility). Here are some fonts to get you started, you will need to place one of them in the directory your ming file that uses it is.

Note: This link is no longer available:
http://www.webwizardsways.com/flash/ming-fonts

However, you can upload some fdb fonts Here. You can also upload the font used in this Lesson Here, (right click, select all, copy, and transload to your server).

Once you have a fdb font file, you are ready to start.

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

<html>
<body>
<?php

B) Now add our shapes from previous lessons

$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);


C) Next, we set the fdb font we want to use, and place it's filename in the quotes

$myFont=new SWFFont("Park_Avenue_BT.fdb");

D) Now that we have a font, we can define our text and set it to use our chosen font

$myText=new SWFText();
$myText->setFont($myFont);

E) Next, set the color for the text, and it's height

$myText->setColor(255,255,0);
$myText->setHeight(40);

F) Now we add the text itself

$myText->addString(" My First Flash!");

G) Next, we define 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);
$firstCircle=$myMovie->add($myShape3);
$firstCircle->moveTo(190,0);

H) Then, we add an our instance of the text to our movie as we did with shapes previously

$firstText=$myMovie->add($myText);

I) Move the text just as you do shapes, luckily, the text object has some attributes we can use to position it.

Here we are setting the left to right position by taking half the width of our movie and subtracting half the width of our text (see the getWidth statement). Then, after experimentation, we found that the words needed to be moved over a bit more to fit in our circle shape, so we added 10 more. The top to bottom is dependant upon the height you set in the text definitions above, and the font used, and is measured to the bottom of your text. Some fonts have extra long lower loops (like g and y) while others have extra long upper loops.

Experimentation, or adding buffer space, is the only answer. I found 50 to work for the font used in this lesson.

$firstText->moveTo((460/2-($myText->getWidth(" My First Flash!"))/2)+10,50);

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

$myMovie->save("lesson5.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="lesson5.swf">
<EMBED src="lesson5.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 use gradient fills in our shapes.

Code summary for lesson 5:



Result: