SiFR3

[Chris]

What is SIFR?
SiFR (or Scalable Inman Flash Replacement) uses flash and javascript coupled with CSS to embed non web-safe fonts into a document, thus allowing you to use selectable (and indexable) text as headers instead of chunky images that aren't semantic. Long story short, it saves on bandwidth, and actually looks alot nicer in many ways.

What does it look like?
I used SiFR to replace my headers on my late blog (http://www.flashadvocate.com/v7/blog.html), but there's an example out that shows just how powerful the SiFR engine is. See the Official Example Here. You can see just how nifty a SiFR powered document can increase the attractiveness of your work, and allow you to use fonts that were oh so cool in photoshop, but aren't supported nor common in everyday computers. Now all you need to rely on is the existence of a flash plugin on your viewer's machine.

But what if they have flash disabled, or use flashblock?
Not to worry! SiFR uses a CSS file to gracefully degrade elements you originally intended to use SiFR to a backup setting. You can incorporate these CSS settings into your original document, or add them inline, whatever you prefer. The great thing is, you have control over any result that may occur.

So how do I use it?
I'll include the explanation that is shown on the NovemberBorn website. I will include quotes, as I do not intend to take away from the content, nor do I want to claim ownership of the information. This is simply an attempt to make the information more accessible.

" NovemberBorn Documentation can be found at http://wiki.novemberborn.net/sifr3/How+to+use "

--------------------------------------------------------------------------------------------------------

sIFR 3 Documentation & FAQ
As the first step, download the latest sIFR release. This tutorial is aimed at the latest nightly release, with special notes about the beta 1 release if applicable. When you unzip the file you'll see the following folders:

• css
• demo
• flash
• js

The css folder contains the relevant style sheets, the demo folder has a sweet demo, the Flash folder contains the Flash and ActionScript files and the js folder the (compressed) JavaScript files. The source subdirectory in the js folder contains the original source files.

Important: sIFR only works when you load it from a webserver. If you open it directly from your harddrive, it won't work due to security restrictions in Flash.


The Flash

Let's export the Flash movies first. Open sifr.fla with the Flash editor and double click in the "white area", you should see the following text: Bold Italic Normal. In order to minimize the required file-size, remove all text. Then, if you want to use a bold font, toggle bold on and type one character. The same goes for italic and normal text. Add all types you need (except for underline), or else the text won't render correctly. If you wish to display special characters such as accents, you need to embed these. Click the embed… button and select the extra characters you want to use, or type them in the box.
Next, export the movie. Click on the File menu, then Export, Export Movie…. Give the name and location for the new Flash file and click Save. A new menu opens. Here you need to do the following:

• Flash version is Flash 8.
• Set Load order to Bottom up.
• The ActionScript version is 2.0.
• Protect the movie from import and compress it.
• Omit trace actions and don't permit debugging. If you want to, you can generate a size report.
  This report will show you which font types have been exported. For instance, if you only wanted to use a bold font, and you see it has exported a normal font, you'll have to repeat the procedure to make sure the normal font isn't unnecessarily exported.

Finally, export the movie.

The HTML

Open the page you want to add sIFR to. You'll need to load the CSS file found in the css folder. Add the following to the HTML file:

<link rel="stylesheet" href="sifr.css" type="text/css">

Of course, make sure that the path to the style sheets is correct.
Next you can load the JavaScript files:

<script src="sifr.js" type="text/javascript"></script>
<script src="sifr-config.js" type="text/javascript"></script>

Important: you must not use the defer attribute when loading the files!

The JavaScript

Now comes the fun part, actually deploying sIFR. It won't be perfect just yet when this section is completed, as we need to edit the CSS files, but you'll be finally able to see some results!
Open the sifr-config.js file. First define the Flash file you want to use, assuming you have exported the font Cochin, we'll get:

var cochin = {
  src: 'cochin.swf'
};

The location of the Flash file is relative to the page it's being displayed in. When you put the page online it's best to make the location absolute, for example:

• The page is at http://example.com/pages/page.html
• The configuration file is at http://example.com/js/sifr-config.js
• The Flash file is at http://example.com/flash/cochin.swf
• The relative location is ../flash/cochin.swf (Note: there's an extra space after the periods, which is necessary to stop the security filters on the Wiki's web server from throwing a fit. Don't use it in your own code!)
• The absolute location is /flash/cochin.swf

Now's the time to configure sIFR itself, but we won't get to that in this tutorial. See JavaScript Configuration for more information. Instead, we'll tell sIFR to activate, and go load the movie file. This is needed to stop browsers from loading the file time and time again:

sIFR.activate(cochin);

If you have specified multiple Flash files, you can pre-fetch them all at once:

sIFR.activate(cochin, rockwell, vandenkeere);

Important: Call to sIFR.activate() directly, and not from another function or event.
And finally we can begin replacing the elements. Here's the code you need:

sIFR.replace(cochin, {
  selector: 'h1'
});

The selector works just like a CSS selector. You can change it so sIFR replaces the elements you want it to replace. It supports the common CSS syntax out of the box, but for more information please see Selectors.
Open the page in the browser and you should see the Flash text!

If the Flash text looks weird, for example it's being cut-off or there is too much space around the text, make sure you're not loading the page directly from your computer (without a webserver). If you got the security warnings and followed the directions above you need to play with the settings a bit to get it to render properly.

As an overview, the code should now look as follows:

var cochin = {
  src: 'cochin.swf'
};

sIFR.activate(cochin); // From revision 209 and onwards

sIFR.replace(cochin, {
  selector: 'h1'
});

CSS & Font Size

We're almost done with the tutorial. In this part you'll learn how to specify the font size for sIFR. Open the sifr.css file and add the following at the bottom:

.sIFR-active h1 {
  visibility: hidden;
  font-family: Verdana;
  line-height: 1em;
  font-size: 18px;
}

Let's dissect that bit of CSS. The .sIFR-active class is only set if sIFR is active. This allows us to specify some CSS just for sIFR. Set visibility: hidden; to make sure the normal text isn't shown to the users, this will make it look as if something is loaded instead of being replaced. As a font we choose Verdana, since it's available on virtually all machines this ensures the text behaves reliably.
The line-height: 1em; normalizes the line height for how it'll be rendered inside Flash. You can leave it out, if you want.
Make sure that these .sIFR-active styles are inside the @screen rule, or in another stylesheet with a media type of screen. Otherwise they may be applied when printing the document, which is not our intention.

When viewing the page you might notice it "jumps around" when loading, read up about Ratio Calculation for a way to fix this.
After all this, setting the font size is surprisingly simple: just change the font-size property and you're done!

Want More?

Of course this is just the beginning, read Styling to learn how to make the text look good, Filters how to make it look great and Flash Configuration and JavaScript Configuration to get into all the juicy details.


Trouble-shooting

If your text doesn't work and always uses the replacement span, double check to make sure that if you include the print stylesheet, it is included with media="print"

--------------------------------------------------------------------------------------------------------


I hope you find this information useful! I love the introduction of SiFR in web technology, and it's obviously a massive leap forward from the other methods.