sIFR is how we made our headlines look so smashing
.......................................................................................................................................................(Columbus, Ohio - Posted on Wednesday, December 16th, 2009 at 11:20 am and is filed under Web Design, Web Tutorials. → todd)
.......................................................................................................................................................
Like the fonts our headlines are in?
We accomplished this with a small piece of opensource JavaScript and Adobe Flash software called sIFR or Scalable Inman Flash Replacement. Come on, I’ll show you how to do this in 15 minutes or less.
This is a quick start tutorial and will accomplish two things:
- Replacement of your site’s <h1> tags, if you have any
- Replacement of a CSS class named “replace-me” which we will create on a page
Things you will need for this tutorial:
- A simple text editor (I use Dreamweaver CS3 – you can use anything)
- Adobe Flash (I use Flash CS3 Professional)
- A font you like (I like to look on daFont.com – they are free:)
Lets get started
Step #1: Download and unzip the latest version of the sIFR project here. This tutorial uses sIFR-2.0.7
Step #2: Fire up Adobe Flash and open sifr.fla (it is in the .zip file you just downloaded in step #1) If your version of Flash will not open up the sifr.fla file (Usually cs4 users) then you can download a compatible version here
Step #3: Double click on the stage.
Step #4: Select the Dynamic Text box on the stage.
Step #5: Change the font to one you like. Don’t worry about the font size as sIFR takes care of that for you. The font color will be defined later on in the implementation process.
Step #6: We are now done with Flash, so save the file as the name of the font you used and publish it (eg: swatch_it.fla). This helps when you have multiple fonts on a page.
Step #7: Open up your text editor and follow along. It is pretty easy to just cut and paste:)
Step #8: Open customize_me.as and change line 14 to your reflect your domain name. You just need your domain name here. It does not matter where you will be using sIFR on your site. Make sure you have one with www. and one without. Then save and close it.
example:
allowedDomains = new Array("*","www.toddsantoro.com","toddsantoro.com");
Step #9: Open up your site’s stylesheet (Hint: its a .css file)
Step #10: Add these lines to your sites stylesheet:
example:
.replace-me { font-size: 18px; display: none !important; } h1 { display:none !important; }
OR
.replace-me { font-size: 18px; height:75px; width:250px; padding-left:25px; } h1 { display:none !important; font-size: 22px; }
The class replace-me will trigger sIFR to replace the text with a Flash movie that has your special font. For those people that do not have flash installed, they will see normal text. By adding attributes to the class you can achieve different results, be creative:) As for the <h1> tag… everywhere a <h1> tag is on your site, sIFR will replace it with a Flash movie.
Step #11: Now we bring everything together. Open up your header.php page if you have one. If not; open up the page you want to have sIFR replace your text on. I usually work with WordPress and it has a header.php file that is included on every page of my site.
Add these lines to the <head></head> of your page:
<script src="sIFR-2.0.7/sifr.js" type="text/javascript"></script> <script src="sIFR-2.0.7/sifr-addons.js" type="text/javascript"></script>
Step #12: Add this line somewhere in the <body></body> of your page:
<div class="replace-me">This is the text I wanted to replace. Yippie!</div>
Step #13: Open up footer.php if you have one or continue working with the file you were just working with in Step #12. Add these lines just before the ending </body> tag:
<script type="text/JavaScript">if(typeof sIFR == "function"){ sIFR.replaceElement(named({sSelector:"h1", sFlashSrc:"sIFR-2.0.7/swatch_it.swf", sColor:"#4E4C00", sLinkColor:"#4E4C00", sHoverColor:"#4E4C00", sWmode:"transparent"})); }</script> <script type="text/JavaScript">if(typeof sIFR == "function"){ sIFR.replaceElement(named({sSelector:"#replace-me", sFlashSrc:"sIFR-2.0.7/swatch_it.swf", sColor:"#4E4C00", sLinkColor:"#4E4C00", sHoverColor:"#4E4C00", sWmode:"transparent"})); }</script>
Be sure to set your font and link colors in the code above. Also make sure your paths to stuff are correct. You can also combine these like this:
<script type="text/JavaScript">if(typeof sIFR == "function"){ sIFR.replaceElement(named({sSelector:"h1,#replace-me", sFlashSrc:"sIFR-2.0.7/swatch_it.swf", sColor:"#4E4C00", sLinkColor:"#4E4C00", sHoverColor:"#4E4C00", sWmode:"transparent"})); }</script>
Notice that I simply added a comma to separate the two CSS elements I wanted to replace. This method would also render the same font colors on both <h1> tags and the replace-me class.
Step #14: You are done! Upload all of your files to your server and check out your work. If you have problems… I would first make sure all of the paths to the sIFR stuff are correct and that you have uploaded all of the sIFR files.
I will try to help troubleshoot if you post your comments below.
Cheers!
Previous: Icon Global Sports Case Study | Next: How to set up a wordpress blog in 5 simple steps
 (3 votes, average: 4.00 out of 4) Loading ... |
 |
|
Stay Informed and spread the good design word!Choose the way you would like to be notified for latest posts.
|
Feedburner
Follow us on Twitter
Stumbleupon
Technorati
del.icio.us
Digg
Facebook
Hey Todd, your tutorial is one of the better ones concerning sIFR on the web. I’ve tried just about every tutorial I can find and still, they haven’t worked. I’ve done more than triple-check my linking and followed every step of your tutorial. Any ideas why it wont work? I’m working on a Mac, using Dreamweaver CS4 & Safari.
Hi Todd!
Your Tutorial is excellent! :-) But I have some Problems in the new Opera and Safari Versions (Mac). Behind the replaced Text is a white box. Do you have an idea what´s the reason?
THX,
Marko
Thanks for the kind words:) The only thing I can think of… Is that Opera and Safari do not like the “Transparent” WMODE property in Flash. I found this: http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=1&postId=1801 which basically says that Safari and Flash do not play nice together. I would suspect the same is true for Opera.