1.
Start by creating a subfolder in your site where you store the sIFR code. Create a folder named sifrunder your seophpfolder, so the complete path to it will be /seophp/sifr/.2.
Download sIFR. Navigate to http://www.mikeindustries.com/sifr/and find the Down -load link at the bottom of the page. At the time of writing, the direct link to the latest zip package is http://www.mikeindustries.com/blog/files/sifr/2.0/sIFR2.0.2.zip.3.
Unzip the package into your /seophp/sifrfolder. The contents of the folder should look the same as Figure 6-4.4.
You need to open the sifr.flafile located in your sifrfolder with Macromedia Flash (not the Flash Player!). If you don’t have it, you can find the trial download at http://www.adobe.com/downloads/, or at a software catalog web site such as http://www.softpedia.com.
5.
If you installed Macromedia Flash correctly, it should open up sifr.fla(see Figure 6-5).Using sIFR Properly
If you decide to use sIFR for your projects, we recommend that you also check its documentation at http://wiki.novemberborn.net/sifr/, and its description at http://www.mikeindustries.com/sifr/, because they contain more tips and hints that we could not include in the book. You can find a very useful walkthrough at http://wiki.novemberborn.net/sifr/How+to+use. This quote is particularly pertinent: “sIFR is for headlines, pull quotes, and other small swaths of text. In other words, it is for display type — type which accents the rest of the page. Body copy should remain browser text. Additionally, we recommend not replacing over about 10 blocks of text per page.
A few more is fine, but once you get into the 50s or so, you’ll notice a processor and speed hit.”
In this exercise you learn how to embed a font into an .swffile. If you don’t have Macromedia Flash, or you don’t want to install a trial version, you can use one of the two Flash files that ship with sIFR. To do that, instead of following steps 4 through 9 of the exercise, simply rename tradegothic.swfor vandenkeere.swffrom the sirffolder to super_font.swf.
Figure 6-4
Figure 6-5
6.
The sifr.flascript that you’ve just loaded allows you to embed fonts into the.swffiles that render your graphical text. You’ll need to follow the same procedure for each font you want to use. For the purpose of this example choose the Trebuchet MS font (but you can use the font of your choice if you prefer). Double-click the white box in the center of the stage. The “Do not remove this text.” text should appear, and the Properties window should be highlighted. Click the font combo box from the Properties window, and choose the font you want to use. This process is shown in Figure 6-6.7.
Export the new file to an .swffile by going to File➪Export➪Export Movie. When asked for the name, you should name the file depending on the font you’ve chosen, because that’s what the exported file is used for — to store the font. For the purpose of this exercise, choose super_font.swfand click Save (see Figure 6-7).Figure 6-6
Figure 6-7
8.
In the options form that shows up after clicking Save, leave the default options, making sure you’re exporting to Flash Player 6 format, and click OK.9.
After exporting your file, it’s OK to close Macromedia Flash. You don’t need to save any changes to sifr.fla.10.
Open catalog.phpand add a reference to the sifr.jsfile. Note that you’re working on the catalog.phpfile you created in the previous chapters. Use the code provided by the book’s code download if you didn’t follow the first six chapters in sequence.<?php
// load the URL factory library
require_once ‘include/url_factory.inc.php’;
?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
11.
The final step required to see sIFR in action is to select the strings you want replaced. You do this by including JavaScript code that makes the changes when the page loads. Add this code before the closing </body>tag in catalog.php, as shown in the following code snippet. (Note there are additional ways to do this, as explained in sIFR’s documentation.)<!-- sIFR replacement code -->
<script type=”text/javascript”>
// continue only if the sIRF code has been loaded if(typeof sIFR == “function”)
12.
You’re done! If you disable JavaScript and load http://seophp.example.com/catalog.html, you get to your catalog page that uses the default heading font, which you can see in Figure 6-8.
13.
Loading the very same page with JavaScript and Flash enabled, you get your title drawn with the new font! (See Figure 6-9.)Figure 6-8
Figure 6-9
After all the configuration work is done, sIFR is really easy to use! For starters, you needed to create a Flash application that contains the font you want to distribute to your users. You could use different fonts for various elements, but for the purposes of this exercise just one font was enough.
In order to be able to effectively use sIFR, you needed to reference the sIFR JavaScript library and its two CSS files in your catalog.phpscript:
<script src=”sifr/sifr.js” type=”text/javascript”></script>
<link rel=”stylesheet” href=”sifr/sIFR-screen.css” type=”text/css”i media=”screen” />
<link rel=”stylesheet” href=”sifr/sIFR-print.css” type=”text/css”i media=”print” />
After referencing the JavaScript library, you need, of course, to use it. Just referencing sifr.jsdoesn’t have any effect by itself — and here the fun part comes. The following code, which you added at the end
of catalog.php, uses the sIFR.replaceElement()function to replace all <h1>tags with Flash files that render text:
<!-- sIFR replacement code -->
<script type=”text/javascript”>
// continue only if the sIRF code has been loaded if(typeof sIFR == “function”)
{
// replace the <h1> text
sIFR.replaceElement(named({sSelector:”body h1”, sFlashSrc:”./sifr/super_font.i swf”}));
};
</script>
The (typeof sIFR == “function”)condition verifies that the sIFR library has been loaded success-fully, so the script won’t attempt to call sIFR.replaceElement()in case you forgot to reference the sIFR JavaScript library.
The replaceElement()function supports more parameters, but the necessary ones are sSelector (which defines which HTML elements should be replaced), and sFlashSrc(which references the Flash movie containing the font to be used). However, many more parameters are supported, and can be used when you need to fine-tune the replacement options. Table 6-2 contains the list of parameters that you can use with replaceElement().
Table 6-2
replaceElement() Parameter Description
sSelector The CSS element you want to replace. Include whitespace in the string onlywhen selecting descendants, such as in body h1. You can separate multiple CSS elements using commas.
sFlashSrc The Flash file that contains the font.
sColor The text color using hex notation.
sLinkColor The link color using hex notation.
sHoverColor The hover link color using hex notation.
sBgColor The background color using hex notation.
nPaddingTop Top padding in pixels.
nPaddingRight Right padding in pixels.
nPaddingBottom Bottom padding in pixels.
See the “How to use” documentation at http://wiki.novemberborn.net/sifr/How+to+usefor more details about using sIFR.
After adding this last bit of code, you’re done! Your page will now work by default with replaced text. If Flash or JavaScript aren’t supported by the user agent, it falls back gracefully to the default page font.