Flashy text

Through the use of a custom file format, Flash makes great use of vector text inside its animations. To get started, you need to download one or more fonts from http://www.neuralust.com/~mingdocs/fonts/getfonts.htm - these are a variety of popular fonts pre-packaged as Flash FDB font files. For this article, I will be using Impact, so you might want that one at the very least.

Following the rest of the library, text inside your Flash movie is manipulated using objects. The two key classes here are SWFFont and SWFText - the former holds the actual font shape data, whereas the latter holds information about the text as a whole, including colour, position, string data, and the instance of SWFFont used to draw the letters.

There is one minor hiccup here: all this code used to work fine previously, but now it seems quite broken under Windows. As a result, I need to show you separate code for Linux and Windows. First up, Linux users: place your chosen FDB file in the same directory as your Flash scripts, then save the following code into the file ming2.php:

<?php
    $font = new SWFFont("Impact.fdb");
    $text = new SWFText();

    $text->setFont($font);
    $text->moveTo(200, 400);
    $text->setColor(0, 0xff, 0);
    $text->setHeight(200);
    $text->addString("Text is surprisingly easy");

    $movie = new SWFMovie();
    $movie->setDimension(6400, 4800);
    $movie->add($text);

    header('Content-type: application/x-shockwave-flash');
    $movie->output();
?>

The Windows code isn't far off, and the end result is the same:

<?php
    $font = new SWFFont("Impact");
    $text = new SWFTextField();
    $sprite = new SWFSprite();

    $text->setFont($font);
    $text->setColor(0, 0xff, 0);
    $text->setHeight(200);
    $text->addString("Windows is a little harder!");

    $spritepos = $sprite->add($text);
    $spritepos->moveTo(200, 400);

    $movie = new SWFMovie();
    $movie->setDimension(6400, 4800);
    $movie->add($text);

    header('Content-type: application/x-shockwave-flash');
    $movie->output();
?>

You'll need to alter your viewflash HTML file to display ming2.php rather than ming1.php, and I suggest you also change the WIDTH and HEIGHT attributes of the <embed> object so that the Flash movie is larger - otherwise you will find the text is probably too small to notice.

Now that you have seen how it is done and what it looks like, onto how it works - we start with our two new classes, SWFFont and SWFText. The SWFFont class is remarkably easy to use - merely pass the name of the FDB file you want to use as a font, and save the return value for later use. You should already have downloaded an FDB font (or created your own using Ming's makefdb), so you should replace Impact.fdb in the example with your own font.

In line two of our script, we create a new SWFText object and store it in a $text variable. This object works in pretty much the same was as our previous SWFShape object - we set various properties of it, then add it to the parent movie once we're done.

The first thing we do with our $text object is call its setFont() function, which makes this SWFText object render in the font used to create the SWFFont object specified as the only parameter. In our case, we created our SWFFont object using Impact.fdb, so calling setFont() using the new SWFText object will draw the text in this object using the Impact font.

Next, we call the moveTo() function to place the text neatly inside the movie, and then call the setColor() function (the values are in hexadecimal) to set the text to lime green. The setHeight() function sets the height of the text in twips, but again remember the final size of the text is entirely dependent on the size the movie is played back, and also the dimensions of the parent movie object itself - the value you set here is just relative to the rest of the movie.

The final, and most important function we call for our SWFText object is addString() - this allows us to draw the string passed as parameter one to the position we set with our moveTo() call. It is important to note that the pen the text is drawn using is set to the baseline - if you use moveTo() to set the position to 0,0, the text drawn will be drawn outside of your movie.

You should recognise the last five lines of code from our previous script - we create a movie, set its dimensions to be nice and big, add our text object, then output the movie. As you can see, the basic process is the same as when working with shapes, so this should be fairly easy for you by now.

Copyright ©2015 Paul Hudson. Follow me: @twostraws.