THIS ARTICLE IS OUT-DATED : READ THE NEW INTENSIVE TUTORIAL HERE

As I told my readers before, I will start experimenting with some new techniques in the future. sIFR is one of those things I already read something about, but never learned how to use it. I thought it could be handy in the future, so maybe for you too!

What is sIFR?

In the past, when using headings with fonts out of the public domain, you would have a problem. You should used images. If you are using a database to create those headings, it became a bit harder. sIFR was developed by Mike Davidson and Mark Wubben and for me, it was a great alternative for my images. CSS, JavaScript and flash are working together on the so-called ‘sIFR’ or ‘Scalable Inman Flash Replacement’ technique. With sIFR you can style your headings the way you designed it, without the need of finding a good alternative for your font. Without even loosing one keyword on your page.

What’s the system behind sIFR?

Some browser is loading a normal (x)HTML page. A javascript function checks, if the visitor has got Flash installed. If this is the case, javascript checks all the tags you would like to use sIFR on. Next, flash will automatically make flash movies from those tags. Actionscript will finish the job. It takes 6 points as size, and scales the whole tag up until the whole flash movie is filled. Your heading is finished. If javascript detects that flash isn’t installed, or if javascript is turned off, if renders the HTML page the way it was styled by CSS. This way, a visitor without the necessary support, doesn’t see a screwed up page, but a perfect normal page. They wouldn’t even notice they are missing something! These steps will take slightly longer then loading a normal webpage.

When to use sIFR?

You can use sIFR everywhere and anytime. As you have read before, sIFR has to execute some steps (html>javascript>flash). You wouldn’t notice the difference in loading time in the small usage, but when using sIFR for you whole page, you are going to see the difference. It is developed to style headings, quotes or any other small sentences. Therefore it is recommended to use sIFR for that purpose.

What machines and browsers support sIFR?

sIFR works on Windows, Linux and Mac machines with Flash 6.0 or higher, and javascript turned on. sIFR is supported by all major browsers like Firefox, IE 5+, Safari, Opera 7+. Some small browsers like Konqueror support sIFR too.

What do you need to use sIFR?

- The sIFR 2.0.2 files. – Flash program. You have to edit .fla files and export .swf, so a program like Adobe Flash Pro is recommended. – A website already styled with CSS. Your headings already have to look good, for the visitors without javascript and/or flash. They would like a good looking website too .

How to integrate sIFR?

First, you should have downloaded and extracted the sIFR 2.0.2 files to a map on your computer. As you can see, it includes a .fla file, some .as files, a javascript file (.js) and a couple .css files. Open up the sIFR-print.css and sIFR-screen.css. Add all the codes to your existing CSS file. Next, make sure you are linking to your stylesheet the following way:

Don’t forget the media attribute, this is important.

The flash part

We’ll start with the flash file. Open up the sifr.fla file with your favorite flash-editing program. Do not upload this file to your website. The .as files will add important information to your exported .swf file. You’ll see the following box:

Double-click now on the box:

Click once again, and you’ll see under the box, another box called ‘properties’.

You can now change your font and add bold or italic to your headings. You shouldn’t touch the other variables, because this doesn’t change anything in the output on your website. When done, you should go to file > export > export movie and save it as ‘yourfont.swf’. Another window will pop up afterwards, and you should use Version: Flash player 6. Leave the other settings what they are.

The javascript part

The next thing you should do is to take a look in the sIFR 2.0.2 files you have downloaded. You’ll find a file called sifr.js. Open it with your text-writing program. Scroll through the lines of code and find these codes:

if(typeof sIFR == "function" && !sIFR.UA.bIsIEMac){
sIFR.setup();
};

You can add basic elements to this function, like background color, font color and which CSS tag you would like to add the flash too. You should do it like this:

if(typeof sIFR == "function" && !sIFR.UA.bIsIEMac){
sIFR.replaceElement("h1.heading", named({sFlashSrc: "./yourfont.swf", sColor: "#004677", sBgColor: "#CACACA"}));
sIFR.setup();
};

sIFR.replaceElement: Tag what you want to add the flash to. In my CSS file, the heading I want to use sIFR on, is named h1 .heading. When you use Id’s for headings, add instead of this:

sIFR.replaceElement("h1 #heading",

This:

sIFR.replaceElement("h1>#heading",

You should change the space to a >. Your sIFR will work. named: the .swf file you made earlier. Never forget to add the ./ before ‘yourfont.swf’. sColor: Font color. sBgColor: Background color. Now, when everything has been filled out, save your sifr.js file and move on to the page you want to add sIFR too. Add this code between your ‘head’ tags:

%MINIFYHTML4efc4de7dfa5d7bb3f2e645ec7201ead14%

Don’t forget to change or delete the ‘path’ in the src.

That’s it! We are finished.

Upload your sifr.js, yourfont.swf, stylesheet.css and homepage.html to your website and see what sIFR does with your page.

Examples

My own try http://www.divitodesign.com
http://www.cactuslab.com/
http://www.astonmartin.com/
http://www.bryght.com/
http://www.jeffersonstreetinn.com/

Please support Mike and Mark in further developing this wonderful technology!