Even though sIFR has been around for a couple years, many web designers have still never heard of it, let alone use it. sIFR (or Scalable Inman Flash Replacement) allows you to use custom typography on your site by utilizing JavaScript, Flash, and CSS. While most people simply create images when they need a custom-type title, sIFR can dynamically create short text blocks using whatever font you want (while still rendering the text with a default font on non-Flash browsers).
Why would this be useful? Well, for starters, it makes creating custom titles a snap (no images needed). sIFR is also great if you need to create titles on the fly (like for blog post titles). In general, if you want to utilize better typography for your site, sIFR might be the easiest way to pull it off.
Unfortunately, using sIFR is somewhat programmatic in nature and reliant on the user having a little familiarity with JavaScript and Flash. So for those who care more about implementing the effect than the actual programming behind it, here's a quick guide to get you started:
Step 1: Download the Necessary Files
For our purposes, you can download this zip with the necessary sIFR files (currently in version 3).
Step 2: Choose Your Font in the FLA and Publish
After unzipping the file, locate and open sifr.fla in the Flash directory. Double-click on the text movie clip, then click on the text and change the font to any font on your system. Publish the Flash file and move the newly created sifr.swf down to the same directory as your web page. Rename sifr.swf to a more descriptive name like avenir.swf.
Step 3: Include the CSS and Javacript in Your Page
Open up default.htm and notice the inclusion of these three necessary files:
sIFR-screen.css
sIFR-print.css
sifr.js
These files need to be included wherever you will be using sIFR.
Step 4: Create the CSS for Your Custom Type
Also notice in the default.htm that there is some CSS (which is included internally here for simplification):
This first part sets the size of the font as well as the backup font-family for non-Flash browsers:
.flash-title
{
font-size:22px;
font-family: Arial;
}
This second part is a required class used to hide the text if they do have Flash.
.sIFR-active .flash-title
{
visibility: hidden;
font-family: Verdana;
line-height: 1em;
}
Step 5: Run the JavaScript and Use the CSS
And lastly in default.htm, you need to run the few lines of JavaScript you see there, making sure to use the swf you published and named in Step 2.
var avenir = {
src: '/sifr3/avenir.swf'
};
sIFR.activate(avenir);
sIFR.replace(avenir, {
selector: '.flash-title',
wmode: 'transparent'
});
Now you're free to wrap any text in the flash-title class. That's all there is to it (note that you may have to run this on an actual server).
If you're feeling more ambitious, you can always explore the multitude of options via JavaScript and Flash at the official sIFR wiki and download site. And if you end up using sIFR a lot, consider donating to the developers who've spent hundreds of hours on this. Hope this little guide has been helpful!
Community Comments
Greg
Samuel
+ iggy +
Daniel
Katie
johan
