{"id":82,"date":"2005-03-11T12:03:35","date_gmt":"2005-03-11T10:03:35","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/archives\/2005\/03\/11\/two-color-sifr\/"},"modified":"2006-01-13T10:50:21","modified_gmt":"2006-01-13T08:50:21","slug":"two-color-sifr","status":"publish","type":"post","link":"http:\/\/www.maratz.com\/blog\/archives\/2005\/03\/11\/two-color-sifr\/","title":{"rendered":"Two-color sIFR"},"content":{"rendered":"<p><em><strong>Ed\u2019s note<\/strong>: This is an outdated material. Please visit the <a href=\"http:\/\/www.maratz.com\/blog\/archives\/2006\/01\/12\/two-colors-in-sifr-201\/\">article with a new version<\/a>.<\/em><\/p>\n<p>I&#8217;m honored to present my fellow colleague <a href=\"http:\/\/www.mi3dot.org\/gallery\/showcase\/njava\/\">Vanja Bertalan<\/a> to be a guest speaker at my blog. Today\u2019s topic is how to implement <a href=\"http:\/\/webdesign.maratz.com\/lab\/two_color_sifr\/\">two color<\/a> <a href=\"http:\/\/www.mikeindustries.com\/blog\/archive\/2005\/02\/sifr-2.0-release-candidate-4\">sIFR<\/a>, in a way that we did on our recent project, <a href=\"http:\/\/www.24sata.hr\/\">www.24sata.hr<\/a>. Here\u2019s Vanja\u2019s brief article:<\/p>\n<p><a style=\"border: 0 !important;\" href=\"http:\/\/webdesign.maratz.com\/lab\/two_color_sifr\/\"><img loading=\"lazy\" src=\"\/img\/sshots\/2_color_sifr.gif\" width=\"325\" height=\"82\" alt=\"screenshot of two-color-sifr\" \/><\/a><\/p>\n<p>The whole process basically involves 2 things:<\/p>\n<ul>\n<li>modification of the javascript source file to make it understand that <code>&#60;span class=\"sifr-alt-color\"&#62;<\/code> has a special meaning<\/li>\n<li>modification of actionscript source files to handle coloring<\/li>\n<\/ul>\n<p>sIFR javascript currently understands only <code>&#60;a&#62;<\/code> and <code>&#60;br&#62;<\/code> elements within headings, and strips everything else out. I needed additional notation, a marker, that will tell flash to color the text within markers differently. Decision was made to use <code>&#60;span class=\"sifr-alt-color\"&#62;<\/code> for that purpose. That notation will be transformed to <code>&#38;shy;<\/code> character, before it\u2019s passed to flash. <code>&#38;shy;<\/code> is a character very similar to dash (note the difference between <code>&#38;shy;<\/code> and <code>&#38;#8211;<\/code>\u2013<a href=\"http:\/\/www.alistapart.com\/articles\/emen\/\">more about en dash<\/a>).<!--more--><\/p>\n<p><em>(Editor\u2019s note: <code>&#38;shy;<\/code>, which we placed directly in HTML at the <a href=\"http:\/\/www.24sata.hr\/\">24sata<\/a> web site is not visible in most Windows browsers\u2013tested in Firefox, IE 5\/5.5\/6 and Opera 7.54\/8.0b. Unfortunately, <code>&#38;shy;<\/code> is visible in some Mac browsers, but there is small percentage of Mac browsers with JavaScript disabled, so we can live with that.)<\/em><\/p>\n<p>Couple of reasons behind this decision:<\/p>\n<ul>\n<li> it was more convenient to transform a single character in flash<\/li>\n<li> i wanted to get rid of html markup for that purpose (not needed anymore, because we&#8217;re not in the browser environment any longer from this point on)<\/li>\n<li>didn&#8217;t wan&#8217;t flash to think it should try to transform html markup on its own<\/li>\n<\/ul>\n<h3>JavaScript<\/h3>\n<p>Let&#8217;s start with the uncompressed javascript file (<a href=\"http:\/\/www.mikeindustries.com\/blog\/archive\/2004\/12\/sifr-2.0-release-candidate-3\">from sIFR 2.0 RC3<\/a>), around line 280, where elements within the heading are handled. Here\u2019s original code:<\/p>\n<pre>    if(oSearch.nodeName.toLowerCase() == \"a\" &#38;&#38; !oSearch.getAttribute(\"href\") == false){\r\n        if(oSearch.getAttribute(\"target\")){\r\n            sLinkVars += \"&#38;sifr_url_\" + nLinkCount + \"_target=\" + oSearch.getAttribute(\"target\");\r\n        };\r\n        sLinkVars += \"&#38;sifr_url_\" + nLinkCount + \"=\" + oSearch.getAttribute(\"href\").replace(\/&#38;\/g, \"%26\");\r\n        sContent += '&#60;a href=\"asfunction:_root.launchURL,' + nLinkCount + '\"&#62;';\r\n        nLinkCount++;\r\n    } else if(oSearch.nodeName.toLowerCase() == \"br\"){\r\n        sContent += \"&#60;br \/&#62;\";\r\n    };\r\n    if(oSearch.hasChildNodes){\r\n        \/*  The childNodes are already copied with this node, so oNewNode = null *\/\r\n        oResult = fetchContent(oSearch, null, sCase, nLinkCount, sLinkVars);\r\n        sContent += oResult.sContent;\r\n        nLinkCount = oResult.nLinkCount;\r\n        sLinkVars = oResult.sLinkVars;\r\n    };\r\n    if(oSearch.nodeName.toLowerCase() == \"a\"){\r\n        sContent += \"&#60;\/a&#62;\";\r\n    };<\/pre>\n<p>Modified code:<\/p>\n<pre>    if(oSearch.nodeName.toLowerCase() == \"a\" &#38;&#38; !oSearch.getAttribute(\"href\") == false){\r\n        if(oSearch.getAttribute(\"target\")){\r\n            sLinkVars += \"&#38;sifr_url_\" + nLinkCount + \"_target=\" + oSearch.getAttribute(\"target\");\r\n        };\r\n        sLinkVars += \"&#38;sifr_url_\" + nLinkCount + \"=\" + oSearch.getAttribute(\"href\").replace(\/&#38;\/g, \"%26\");\r\n        sContent += '&#60;a href=\"asfunction:_root.launchURL,' + nLinkCount + '\"&#62;';\r\n        nLinkCount++;\r\n    } else if(oSearch.nodeName.toLowerCase() == \"span\" &#38;&#38; oSearch.getAttribute(\"class\") == \"sifr-alt-color\"){\r\n        sContent += \"&shy;\u00ad\";  \/\/IMPORTANT! between double quotes, there is &#38;shy; character, which is not visible in browser\r\n    } else if(oSearch.nodeName.toLowerCase() == \"br\"){\r\n        sContent += \"&#60;br \/&#62;\";\r\n    };\r\n    if(oSearch.hasChildNodes){\r\n        \/*  The childNodes are already copied with this node, so oNewNode = null *\/\r\n        oResult = fetchContent(oSearch, null, sCase, nLinkCount, sLinkVars);\r\n        sContent += oResult.sContent;\r\n        nLinkCount = oResult.nLinkCount;\r\n        sLinkVars = oResult.sLinkVars;\r\n    };\r\n    if(oSearch.nodeName.toLowerCase() == \"a\"){\r\n        sContent += \"&#60;\/a&#62;\";\r\n    } else if(oSearch.nodeName.toLowerCase() == \"span\" &#38;&#38; oSearch.getAttribute(\"class\") == \"sifr-alt-color\"){\r\n        sContent += \"&shy;\u00ad\"; \/\/IMPORTANT! between double quotes, there is &#38;shy; character, which is not visible in browser\r\n    };<\/pre>\n<p>It basically says, if <code>&#60;span&#62;<\/code> node with class attribute <code>\"sifr-alt-color\"<\/code> is found, remove it and prepend\/append the shy character to node content. That&#8217;s all that has to be done at the javascript level.<\/p>\n<h3>On to flash<\/h3>\n<p>First we change <code>customize_me.as<\/code>. Couple of new variables are introduced here, which i&#8217;ll use in <code>dont_customize_me.as<\/code> later on:<\/p>\n<pre>    colorDelimiter = \"&shy;\u00ad\";                       \/\/ shy character, begin\/end marker for block of different color IMPORTANT! between double quotes, there is &#38;shy; character, which is not visible in browser\r\n    colorDelimiterLen = colorDelimiter.length;  \/\/ not mandatory, but used on couple of places in main file, so this was convenient\r\n    alternateColor = \"#CE0005\";                 \/\/ self explanatory<\/pre>\n<p>All done here, let\u2019s move to <code>dont_customize_me.as<\/code>. In plain English, find the \u00ad<code>&shy;text&shy;<\/code> \u00ad(<strong>note:<\/strong> text is shy-enclosed, but <code>&#38;shy<\/code> itself isn\u2019t visible in browser) and replace it with <code>&#60;font color=\"alternateColor\"&#62;text&#60;\/font&#62;<\/code>.<\/p>\n<p>Here is how to do it. At the end of the file, before <code>\"holder._alpha = 100;\"<\/code> add:<\/p>\n<pre>    placeholder = holder.txtF.htmlText;\r\n    if (placeholder.indexOf(colorDelimiter) &#62; -1) {\r\n        \/\/ replace shy-enclosed blocks with &#60;font&#62; enclosed blocks\r\n        tempBlock = \"\";\r\n        breaker3 = 0;\r\n        while (placeholder.indexOf(colorDelimiter) &#62; -1 &#38;&#38; breaker3 &#60; 300) {\r\n            tempString = placeholder.substring(placeholder.indexOf(colorDelimiter));\r\n            tempString = (tempString.indexOf(colorDelimiter, colorDelimiterLen) &#62; -1) ? tempString.slice(0,tempString.indexOf(colorDelimiter, colorDelimiterLen)+colorDelimiterLen) : tempString.slice(0);\r\n            tempArray = placeholder.split(tempString);\r\n            tempString = (tempString.indexOf(colorDelimiter, colorDelimiterLen) &#62; -1) ? tempString.substring(colorDelimiterLen, tempString.length-colorDelimiterLen) : tempString.substring(colorDelimiterLen);\r\n            tempBlock += tempArray[0]+\"&#60;FONT COLOR=\"\"+alternateColor+\"\"&#62;\"+tempString+\"&#60;\/FONT&#62;\";\r\n            placeholder = tempArray[1];\r\n            breaker3++;\r\n        }\r\n        tempBlock += tempArray[1];\r\n        holder.txtF.htmlText = tempBlock;\r\n    }\r\n    defaultHtmlText = holder.txtF.htmlText; \/\/ remember the \"colored\" state so we can revert to it onRollOut<\/pre>\n<p>Besides that, <code>onRollOver<\/code> and <code>onRollOut<\/code> event handlers had to be changed (for links), because the original implementation caused the whole string to revert to base color <code>onRollOut<\/code>. <\/p>\n<p>In order to achieve this, change:<\/p>\n<pre>    holder.onRollOver = function () {\r\n        if (hovercolor != undefined) {\r\n            \/\/ link_color.setRGB(parseInt(hovercolor)); \/\/ old code\r\n            fmt.color = hovercolor;                     \/\/ new code\r\n            holder.txtF.setTextFormat(fmt);             \/\/ new code\r\n        }\r\n        if (underline != undefined) {\r\n            fmt.underline=true;\r\n            holder.txtF.setTextFormat(fmt);\r\n        }\r\n    }\r\n    holder.onRollOut = function () {\r\n        if (hovercolor != undefined) {\r\n            \/\/ link_color.setRGB(linkcolorhex);         \/\/ old code\r\n            holder.txtF.htmlText = defaultHtmlText;     \/\/ new code, defaultHtmlText is original \"colored\" state from the code above\r\n        } \r\n        if (underline != undefined) {\r\n            fmt.underline=false;\r\n            holder.txtF.setTextFormat(fmt);\r\n        }\r\n    }<\/pre>\n<p>And you&#8217;re done!<\/p>\n<p>Another benefit of this approach is that you can style (colorize) parts of the heading in the regular css so they are presented in the same fashion to non sIFR users.<\/p>\n<p>I hope this helps and I\u2019ll be happy to discuss more about it in the comments.<\/p>\n<p><em>(Editor\u2019s note: After hacking <code>.as<\/code> files, your old <code>.swf<\/code> files have to be reexported.)<\/em><\/p>\n<h3>Update<\/h3>\n<p>We provided <a href=\"http:\/\/webdesign.maratz.com\/lab\/two_color_sifr\/\">demo page<\/a>.<\/p>\n<h3>Update 2<\/h3>\n<p>Two Color sIFR has been rethought at <a href=\"http:\/\/www.maratz.com\/blog\/archives\/2005\/03\/16\/two-color-sifr-take-two\/\">Two Color sIFR Take Two<\/a> article.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ed\u2019s note: This is an outdated material. Please visit the article with a new version. I&#8217;m honored to present my fellow colleague Vanja Bertalan to be a guest speaker at my blog. Today\u2019s topic is how to implement two color sIFR, in a way that we did on our recent project, www.24sata.hr. Here\u2019s Vanja\u2019s brief [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"_links":{"self":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/82"}],"collection":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/comments?post=82"}],"version-history":[{"count":0,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/82\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=82"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=82"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=82"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}