Page 1 of 3 Note: Due to the functionality used in this tutorial, it requires at least Flash MX 2004 to complete
sIFR may well revolutionize web fontography. If you're not familiar with sIFR, it stands for scalable Inman Flash Replacement. You can read more about it, including the source of its name, at Mike Davidson's Blog, one of the lead developer's of sIFR (search for sIFR if it's no longer listed on the front page). At the time of writing, 2.0 Release Candidate 3 was the latest version available, which includes a sIFR example page using the 2.0 sIFR version. Basically, sIFR allows you, through unobtrusive JavaScript, to specify certain selectors in your page to be replaced with a Flash file that renders the replaced text in the font of your choice. The sIFR technique is a pretty neat application of technology that is both backward compatible and accessible.
This short tutorial will not go through all the steps necessary to allow you to sIFR-ize your site, although we do plan on putting together a quick start guide for implementing sIFR when it reaches the full 2.0 release. However, if you're already into sIFR, or if you're going to jump on board after seeing it in action, then this tutorial will help you to automate production of multiple sIFR font SWF files by using JSFL within Flash MX 2004. To see a sIFR font SWF in action, check out the sIFR example page and take a look at the headers, and the pull quote, they are all displayed using sIFR font SWFs, or see index.html within the sIFR files package.
Creating sIFR font SWFs for more than a very few fonts would be a tiresome exercise, editing the sIFR.fla file to set it for the new font, saving it with a new file name, exporting to SWF, and then repeating...again...and again. Of course with one or two fonts, no big deal, but try 30-50 at a time, and your mouse will revolt or you'll likely wear off the paint on your shortcut keys.
This is where JSFL can step in and assist by automating some tasks. Using the script discussed in this tutorial, I've created over 130 sIFR font SWF in well under a minute. So if you're in the mood for saving time and most importantly effort, read on.
If you've read up on sIFR, you'll have seen that all it takes is a little bit of client-side JavaScript and some specially create font SWF files. This tutorial will focus on the SWF side of things, by automating the creation of sIFR font SWF files from the base sifr.fla file. This is done through a script that opens up the sifr.fla Flash file and programmatically cycles through a user-supplied list of fonts, and then for each font exporting a SWF that contains what the Flash player needs to render text in the specified font on a sIFR-ized page.
JSFL: Flash JavaScript. This is the "internal" language for Flash that can be used to control actions inside the development environment. Since this is the first version of Flash to expose such an application programming interface (API), it still needs a little rounding out, but it is a good for some pretty nice interactivity within Flash. For more, check out the Flash JavaScript Dictionary documentation available in HTML and PDF formats at the Flash MX 2004 Documentation page. And perhaps check out the JSFL related articles here at Community MX.
Before you can jump right in, let's get everything gathered together so you can do the job properly.
allowedDomains = new Array("www.communitymx.com","communitymx.com");
Tip: You may also want to change the default publishing setting for sifr.fla so that a size report and HTML file are not generated when you create sIFR font SWFs. Files > Publishing Settings. These settings do not apply to using the script described in this tutorial, as the programmatic exporting of SWFs does not create these extra files. However, if you do "one-offs" then you probably won't want to get these extra files that really don't do anything for you when it comes to sIFR.
Keywords
Flash MX 2004, JSFL, sIFR, fonts, fontography, Flash JavaScript, API
