If you are reading this, please get modern browser.
skip to main content | skip to main navigation | skip to secondary content

Two Color sIFR Take Two

~ 16th March 2005. · 12:45 CET · permanent link · printer friendly ~

Ed’s note: This is an outdated material. Please visit the article with a new version.

Here again Vanja reloads Two color sIFR technique—better, improved and easier to use. Here’s the article…

Based on the suggestions I’ve received, and on my own observations, I decided to revisit the topic. There are two issues that I was particularly ichy, and which I’ll try to scratch:

  • <span class="sifr-alt-color"> is not semantically correct, and it’s ugly too - thnx to Daniel Duriš
  • described technique relies on hacking source actionscript files every time a color needs to be changed. I’d like it to be a bit more flexible - thnx to Mark Wubben

Change <span> to <em>. Two things have to be done.

  1. Change the notation in html files, ie. 
    <h2>This is <span class="sifr-alt-color">2 color</span> sIFR</h2>
    to 
    <h2>This is <em>2 color</em> sIFR</h2>
  2. Modify javascript file (the following code exists in two locations in the javascript file, both of them have to be changed) 
    } else if(oSearch.nodeName.toLowerCase() == "span" && oSearch.getAttribute("class") == "sifr-alt-color"){

    to

    } else if(oSearch.nodeName.toLowerCase() == "em"){

Part two of this session focuses on invocation part. I thought that it could be nice to be able to specify alternate color during the invocation phase. So I added another parameter to sIFR.replaceElement(). I added sAltColor after sHoverColor, so the list of parameters looks like:

function replaceElement(sSelector, sFlashSrc, sColor, sLinkColor, sHoverColor, sAltColor, sBgColor, nPaddingTop, nPaddingRight, nPaddingBottom, nPaddingLeft, sFlashVars, sCase, sWmode){

Couple of things need to be done in javascript file also. Change

function replaceElement(sSelector, sFlashSrc, sColor, sLinkColor, sHoverColor, sBgColor, nPaddingTop, nPaddingRight, nPaddingBottom, nPaddingLeft, sFlashVars, sCase, sWmode){

to

function replaceElement(sSelector, sFlashSrc, sColor, sLinkColor, sHoverColor, sAltColor, sBgColor, nPaddingTop, nPaddingRight, nPaddingBottom, nPaddingLeft, sFlashVars, sCase, sWmode){

then, after line

sHoverColor : function(value){ sHoverColor = value },

add line

sAltColor : function(value){ sAltColor = value },

and then, after line

if (sHoverColor != null){sVars += "&hovercolor=" + sHoverColor};

add line

if (sAltColor != null){sVars += "&altcolor=" + sAltColor};

That should take care of the javascript part.

The last thing we should do is handle the flash side. In the dont_customize_me.as, change:

if (placeholder.indexOf(colorDelimiter) > -1) {

to

if (altcolor != undefined && placeholder.indexOf(colorDelimiter) > -1) {

then

tempBlock += tempArray[0]+"<FONT COLOR=""+alternateColor+"">"+tempString+"</FONT>";

to

tempBlock += tempArray[0]+"<FONT COLOR=""+altcolor+"">"+tempString+"</FONT>";

and finally, reexport the movie.

You can download the uncompressed javascript source here, and actionscript file here. There is also demo page. I didn’t make the compressed version of the js file because of obvious reasons. This is by no means an attempt to fork off the main sIFR branch, it’s just a possible addition. If the guys behind sIFR decide to include the code in the next release, you’ll get the compressed version there. If not, and you still want to use this, then you’re probably into hacking yourself, and it’s not gonna be too much trouble to replace couple of spaces, cr’s and lf’s yourself : ).

27 Comments

  1. Sweet. There are some other things Vanja could change, though. Right now you are inserting the alternative color between the other colors. If somebody decides to switch to your code, but doesn’t use alternative colors everywhere, her old replace statements will break. If you add sAltColor as the latest argument, this won’t happen.

    Also, in the article, you forgot the “,” after the named argument mapping for sAltColor.

    Perhaps a better name for sAltColor would be sEmphasizeColor?

    I’ll discuss this with Mike to see if this is a useful addition to the main sIFR code. If that doesn’t happen, I’d like to encourage you to get this code into the compressed code of the final. And finally, there’s an RC4 out… so you might want to place a notice that your code still uses RC3. (We’re hoping to release the final soon, but I have exams coming up, so I’m not sure…)

    Again, great work.

  2. Mark, thanks for the “,” note. It was my mistake. I fixed it now : )

  3. Much nicer, indeed ;-) I am glad I gave some ideas.

  4. i just wanted to say thank you, i am using this technique on my website now.

  5. It seems to break down when I export the movie. Does it matter which version of Flash?
    It works perfectly using the swf files on your site for the two color examples, but once I export a movie with the fonts I want to use it doesn’t work at all.
    I’ve downloaded the dont_customize_me.as file… what about the customize_me.as? does that remain unmodified from the original?

  6. I am having the same problem as Ben…any solutions yet? I just get two “T"-s which change color and size when hovered…:(
    would be great if you could tell us what there is wrong…cheers!

  7. Steve and Ben, this is hack for sIFR 2.0 RC3, so it might not work with newer versions. The principle is the same, though.

  8. Thx for the quick response…but I also tried it in RC3…same result…I opened a thread in the forum

    see:
    http://forum.textdrive.com/viewtopic.php?id=4181

  9. Cool technique.

    Is it possible to add a third color?

  10. derek, you can theoretically add as much colors as you want, but you’ll unfortunately have to figure it out by yourself. Vanja and I are currently out of time to try all requests we are receiving on a daily basis. After all, this was never meant to be plug᾿n’play solution, just a guidance which way to go if you want to expand sIFR’s functionality.

  11. Understandable.

    Just wondering.

  12. Quick question:

    For some reason the line:
    tempBlock += tempArray[0]+"<FONT COLOR=""+altcolor+"">"+tempString+"</FONT>";

    is giving me a syntax error when trying to change the ‘don’t_customize_me.as’ file

    any ideas why?

  13. Has anyone figure this out on RC4 yet? I can’t seem to get it to work.

  14. Steve and others. The bug is in “dont_customize_me.as” hacked file on line “204″
    correct syntax is:
    colorDelimiter = “-"; // use &shy; character
    without the whitespace (!important)

  15. Great technique, thanks a lot for this information. sIFR is really gaining some popularity now, which is great.

  16. i can’t seem to get this to work.
    It worked fine before i switched the code to the 2 color version. I took the new JS file and AS file from the links above ( i didn’t actually go through and change everyhing). But now it doesnt’ render my text anymore.

    i am not very good with code, but just need to know how to have 2 colors. Thanks for this great code.

    can’t wait to get it to work properly.

    Thanks

  17. you can get the link to my source files here

    http://www.palaquin.com/test/site.zip

    if anyone has the time to look. That would be of tremendous help.

    Thanks again.

  18. so i got it to work, but can’t get different colors, and tag does not work anymore…. HELP.

  19. I`m trying to implement two-colors:
    1. Cant force flash to parse correctly with new dont_customize.as
    2. Same bug, as posted above: only one letter “T” appears on a page. I saw Joe`s comment about bug in *.as file, but i didn`t find any ways to correct wrong parsing of any font.
    Can anybody help with *.as file and flash parsing?

  20. Marko, i just wrote you a letter with a question about “customize_me.as” file missing for good font parsing. And after two minutes of thinking, i checked your site for this file… and i found it:))

    All:
    Use this
    customize_me.as

    and those dont_customize_me.as above in a post for a good font parsing:) (You`ll never see just “T” letter after using this files both when parsing sifr.fla)

    Thanx a lot for such a great feature.

  21. Bug in New dont_customize_me.as:

    String 294 must be

    } else if(oSearch.nodeName.toLowerCase() == “br"){
    sContent += “<br/>";
    };

    So, there is no shy-character for BR in other cases BR will not break a line

  22. sorry… mispoint in above comment.
    Bug is in NEW sIFR.JS

  23. I love sIFR. I use it almost for all my flash now, not even just for text, also for flash elements throughout my websites such as logos, headers, navigation etc…

    I’m curious, other than the risk that someone might not have flash or javascript (enabled) is there any drawback to using sIFR (or ifr) like that?

    Also, does anyone know if there is any effect to search engine spiders? Since sIFR replaces something like SEO Rich Title with flash, does it still read the original source html?

  24. Can we get revised as / js files with all of the bugs listed here taken care of?

  25. Mike, note that I spoke about sIFR 2.0_rc3 !
    I can’t force colouring in new sIFR relize:(

    Bthw, I’m using scalable font sizes (em) and for example 5 definitions of headline types according to their behaviour (they all about different paddings and 2 of them in different font size). Just for now 2.0rc3 working good (sometimes quirks when i need multiline headline)

  26. Hello,

    I have encountered 1 problem using your coloring technique. When i first discovered this site, right away i went for the latest version of this solution> (2.0.1). Once i had everything setup i tried to use it with a few fonts that i have on my machine but i would alwys get box like character surrounding the first letter of my word. Color would change tho. i spent like an hour fideling with all possible combination. I also tried your swf file from teh example, now that one wouldnt have the box right characters surrounding it. so im thinking maybe its the font, i dunno. at this point i was pissed and just decided to read back on the older version. Now i can understand why you changed from span to em, messy code etc. but if it doesnt work with all the fonts i think its better to stay with the old version. i will show you my site with the font and your example with my font and your font. you can get a better idea, if you already dont know.

    Your example (new version):
    http://nrgetik.com/!upload/sifr_ex/

    My site (older version):
    http://nrgetik.com/!upload/!n3w/

  27. At the moment I cannot reproduce that issue. I’ll let you know if I figure it out, what might cause it.

    Also, please move the discussion to Two colors in sIFR 2.0.1.

Sorry, the comment form is closed at this time, but if you have anything to say, please send me a message.

* Please keep in mind that this is a personal web site and it does not reflect the position or opinion of my respective employers, organizations or partners.

Typetester – compare screen type Supported by Veer.

What is this?

A web log of Marko Dugonjić, web professional from Croatia. Topics covered:

Translate this site

German, Spanish, Italian, French or Japanese (via).

See you there!

Feel like buying a book?

Try with maratz.com aStore

Personal Network

.HR Community

Public profiles

mi3, QBN, Flickr, Last.fm, LinkedIn, Coolinarika, Croportal

Worth visiting

top of the page | skip to main content | skip to main navigation | skip to secondary content