Flash Text Replacer

You've probably seen this effect elsewhere on the Web and just thought the text was images. I first noticed it on an online news site which appeared to have images for their news headings. Being a nosey sort of person, it struck me as interesting that they were generating images for the headlines - but on closer inspection it turned out that the headings were in fact Flash. On even closer inspection (and here's the cool part) it turned out to be done dynamically: the text was written to the webpage, and then converted on page load by Flash and JS, making the text appear anti-aliased and image-like.

So that's exactly what this script does. It's a pre-written Flash "template" with support for some common stylistic options to let you add this effect to your site with ease.

The majority of the code is lifted from Shaun Inman's excellent article IFR: Revisited and Revised. All I did was re-write the flash code to accept parameters, letting you easily change the font, colour and size and make the text appear bold, italic or both.

An Example

Here's a little example of some text snippets showing off the various styling options.

Arial

Georgia

Garamond

Times New Roman

Verdana

Arial

Georgia

Garamond

Times New Roman

Verdana

Arial

Georgia

Garamond

Times New Roman

Verdana

My title

Getting it Installed

Step 1: Trimming down the Flash file

Now onto the nitty gritty. You may have noticed that this page took a while to load - hardly surprising considering the Flash .swf file is a whopping 215KB...! But don't worry, you can significantly slim it down by removing the stuff you don't need.

What makes the file so large is the support for all the fonts. Purely for demonstration purposes, I included Arial, Georgia, Garamond, Times New Roman and Verdana - in their four flavours: normal, italic, bold and bold + italic. I selected these fonts since most people have them all installed on their computers. If I had specified a font that was not on their computer, they would see a blank spot. Bear this in mind while choosing your font...

Needless to say, you probably won't need all the fonts listed - most likely, you'll only need one. Open up the Flash file contained in the downloadable zipfile. On the left of the Stage, you'll see a number of dynamic text boxes, each with a corresponding font name. Delete everything you don't need and re-publish the file. When I do this leaving only the Arial font, the .swf file is a mere 9KB. Much more manageable!

Step 2: How to set up your page

First you'll need to upload your newly created text_replacer.swf to the same folder as your webpage (the location can be configured in the JS, but for simplicity I've defaulted it to look for the file in the same folder).

Next, open up the demo.html file (included in the zipfile) and copy and paste the stuff between the <head> and </head> nodes into your webpage. This contains all the key javascript and CSS. Next you'll need to indicate which page elements are going to be replaced through the Flash.

In the demo.html file, I've "marked off" those elements with HTML classes. Specifically, I've wrapped all the bits of text that I want to render with Flash within <h1> tags with their own classes. However, this is only one way of doing it. Shaun's code is very generic and can let you specify the elements in a variety of ways. Read the comments of the SI_replaceElement function for some pointers.

Step 3: Configuring the SI_flashReplacement function

Now we're onto the fun stuff! As mentioned in the JavasScript comments, the SI_flashReplacement function is the only part of the JavaScript that you will need to configure. This function is called on page load and indicates which page elements should be converted. Here are a couple of example lines:

    SI_replaceElement('h1.myclass', 'text_replacer.swf', 120, 25, 'font=Verdana&color=000000&size=14');
    SI_replaceElement('h1.myclass2', 'text_replacer.swf', 180, 25, 'font=Times New Roman&color=aa0000&size=22&bold=1');

The first parameter indicates the page element to convert; in the examples above, all h1 tags that have class="myclass" or class="myclass2" attributes.
The second parameter indicates the name of the Flash file.
The third and fourth parameters are the width and height respectively.
The last parameter may contain all the style settings for the text:
- font - the font to display the text
- color - the hex value (minus the "#" character)
- size - in "pt", not "px"
- italic=1 - italicized
- bold=1 - emboldened
Combine multiple options with a "&" character, as in a regular query string.

And that's all, folks!

Afterword

Bear in mind that this technique requires both JavaScript to be enabled in your visitor's browser and for Flash to be installed. So always test your pages by disabling Javascript. You'll probably want to set some default styles for the page elements so they look good even when they don't meet this basic criteria.

Again, many thanks to Shaun Inman for posting his code and solution.

If you encounter any bugs or have feature suggestions, please contact me.