IFR: Revisited and Revised
Consider the first implementation of IFR a proof of concept. A number of people took issue with the flickering or blinking of content as it was being replaced. This revision resolves that issue and greatly simplifies implementation of the technique. I also want to address some misconceptions regarding the benefits of IFR. But first things first.
A Flash of Partially Styled Content
I worked with Mike Davidson (who planted the seed for this technique with his original work on ESPN.com) via email to eliminate the blink/flicker/FOPSC that occurs as the HTML element is removed and the Flash movie is inserted.
The solution was to check for the required version of the Flash plug-in before the content loads then, if found, apply a class of hasFlash to the <html> tag.
:
if (hasFlash && document.getElementsByTagName && document.getElementsByTagName('html')[0]) {
document.getElementsByTagName('html')[0].className += (document.getElementsByTagName('html')[0].className=='')?'hasFlash':' hasFlash';
}
That class is used with descendent selectors to hide the content that is going to be replaced—before that content even loads. All that is needed is an additional rule in the style sheet:
html.hasFlash #primary-content h1 { visibility: hidden; }
Why use the <html> tag and not the <body>? Because at the time the script runs the <body> tag hasn’t loaded yet and as a result, is unscriptable.
Eliminating this problem, revealed another—the Flash movie had its own FOPSC going on! The text was appearing mixed-case and then snapping to uppercase. CSS is used to change the case of the text in the HTML but the text-transform attribute doesn’t affect the actual source that Flash receives. So the toUpperCase() function is used in Flash to format the text at the same time the variable is applied to the text field:
_root.txt = txt.toUpperCase();
The problem is that the text field has the same name as the incoming variable so it renders immediately—before txt.toUpperCase() can do anything.
The solution involves changing the name of the text field to txtF and updating the ActionScript to match:
_root.txtF = txt.toUpperCase();
Problem solved! Download the revised Flash source file.
What the hell is a nodeName!?
Another hurdle that could potentially slow the adoption of IFR is having to become intimate with a document’s DOM tree. Remember all those for loops and the references to nodeName and parentNode in the original code? If you do, forget all that nonsense. You don’t need it anymore. The SI_replaceElement() function uses CSS-like syntax to describe which element(s) to replace:
SI_replaceElement('div#primary-content>h1','swf/txt.swf',236,18,'');
This function call will replace all <h1>s inside <div id="primary-content"> with the 236px wide by 18px tallswf/txt.swf. (The last argument—empty in this example—is used to pass additional variables to the Flash movie.) The syntax of the first argument is based on CSS child selectors. Both the elements to be replaced and their parent element (parent element not required) must include a reference to their tag type. So at the very least you could replace all <h2>s with the following function call:
SI_replaceElement('h2','swf/txt.swf',236,18,'');
Or only those that are direct children of a <form>:
SI_replaceElement('form>h2','swf/txt.swf',236,18,'');
The replaced elements can also be limited by specifying either the id or class of either the replaced elements or their parents—or both:
SI_replaceElement('div.post>h1','swf/txt.swf',236,18,'');
SI_replaceElement('div#primary-content>h3.comment','swf/txt.swf',236,18,'');
The first call above will replace all <h1>s inside any <div class="post"> leaving all other <h1>s alone. The second will replace any <h3 class="comment"> inside <div id="primary-content"> leaving any <h3> without a class of comment or any <h3> outside of <div id="primary-content"> alone (even if it has a class of comment).
Here is an example of the Revised IFR in action. Please see the source for additional information and implementation considerations.
Eliminate Repetitive Tasks
IFR? Huah! What is it good for? While IFR makes replaced content selectable (in isolation from the rest of the content unfortunately) its primary benefit is the elimination of repetitive tasks. And for the record, I never claimed it was a more accessible alternative to FIR.
Consider the time it takes to create the hundreds of gifs required to use FIR on larger sites. Then consider the time it takes to write the CSS and class each tag that needs to be replaced. Consider the updates and changes that inevitably trickle in.
Now consider the time it would take to set up a single Flash file and attach an external JavaScript to your already valid mark-up. Frequently updated corporate sites can now maintain branded headlines with no more effort than typing the headline text into your HTML editor or CMS. That practical usefulness trumps the coolness factor.
In a Long Overdue Closing
Please note that all the shortcomings listed at the end of the original article still apply to the revised technique unless addressed here.
I should also note that I haven’t updated this site with the new method so if you notice any jiggling or shifting in the articles or comments that’s why. I’m currently using first generation IFR that grabs the variables from nested and adjacent elements to reduce the number of Flash movies required.
103 Comments
To quote the movie Swingers: “You’re so money you don’t even know it.”
I feel like this is the most significant development in web typography since CSS itself.
When we started using Flash headlines on ESPN, we loved the results but were never entirely happy with the implementation from a coding standpoint. This method completely eliminates all concerns. Kudos to Shaun, and for the record, he gets 99.9% of the credit for this… I’m but a muse.
I agree it’s an amazing improvement. Hope we can apply some community brute-force testing here as to avoid another FIR fiasco… IR techniques, scripting IE… we’re finally moving beyond trying to imitate tables and into new concepts… all with the same crap browser we’ve had all these years… thanks for sharing!
Manuel, brings up a very good point. I have no idea if screen readers are capable of running JavaScript. If not the there should be no problem. But if they do I can make a simple revision, to
SI_replaceElement()to address that. The same revision would actually give us more control when going to print as well. I’ll get started on that!Very nice work Shaun. I’ve got a project starting next week that might be perfect to apply this technique to and I plan on doing so. I’ll let you know how it works out.
You’ve done it again old chap. I am planning on using this soon… though I may elaborate on it a bit :D
Ooh, planning on expanding the list of supported browsers to include NS 4? :P
The onl y thing you forgot is that this is possible with normal images as well. Like:
<h1><img src=\"server-side-header-img?text=blah\" alt=\"blah\" /></h1>I didn’t forget about server-side dynamically generated images Anne. In the past I’ve had problems with servers not having the required modules to create them (and the admin refusing or being unable to install them). Some typefaces aren’t available in the format required by server-side scripting but generally any typeface available in Photoshop or Illustrator can be embedded in Flash. I’ve been disappointed with the quality of the anti-aliasing algorithm used and generally I think the level of scripting involved can be a hurdle for some.
I’ve also heard that search engines rank plain text higher than
alttext values. Another big thing for me is that IFR more closely follows the ideal of separating content from presentation.Great stuff shaun, one question though: Are you saying that if a user has flash turned off and javascript turned on, the h1 tags will not be visible? Thats a major drawback, even if 99% or so has flash installed, many universities and larger institutions do not because of bandwidth savings. Isnt there a workaround for this?
Nope. I think you misunderstood. If the required version of Flash is not installed then nothing happens. The text is still visible. The problem that I described is when the required version of Flash is installed but the user has used a browser preference to disable the Flash plug-in. I personally have never heard of the average user having this configuration. Most people don’t even know you can disable plug-ins.
If this is still what you mean I believe I mentioned a workaround in the original article.
Wowza… that’s impressive stuff. Thanks for the Open Source, I like many of the others who’ve commented will surely be using it soon! (pardon the lame post, I just want to see my name done up in the kewl Flash header ;) )
-ALEX
Thanx for the explanation shaun, I did a test myself using different browsers with flash & javascript installed/not installed and it works fine as you describe. This is brilliant! The next thing would be, as you mentioned, the ability to use longer headings on several lines. Im not a JS wizard but Ill post if something comes up.
Very cool technique! I can see this becoming very popular. What browsers have you tested this in? It seems to work just fine for me in IE6 and Netscape 7.1 but it’s consistently crashing Mozilla FireFox 0.8.
I’ve tested in IE 5.x PC, 6.0 PC and 5.0 Mac, Firefox (both) and Safari. Jason Kottke reports processor usage spikes on post pages on this site (where there are upwards of 30 tags being replaced—everything in moderation, right?) and you have reported the same crashing Firefox PC.
As I mentioned at the end of this article, I haven’t updated this site with the latest revision of IFR so it could be a bug in older code that has since been removed.
Thank you for this technique and a good reason to jump back into Flash! The further down the rabbit hole of standards and usability I’ve fallen, the less Flash-based worked I’ve ended up doing. Working with Flash again in a way that appears to bridge that gap is something that I’m definitely looking forward to. Thanks again! I cant wait to play with this.
It’s working great…. except for one thing. Accented characters do not appear. I suspect it has something to do with the encoding when sending the variables… is there any solution?
Thank you so much for sharing this technique!
nice site, I’ve just noticed the preview..thats clever
Great stuff Shaun,
I can report though that it does freak Firefox completely out if you happen to be using the ‘FlashBlocker’ extension (hey I hate those inline flash ads). Hung the browser.
Not sure either how common that extension is, or what you could do to prevent it happening
Shaun, you are quite simple DA MAN.
I’m using this on a site I’m currently developing, and with this new refinement, its easy peasy to target headings in different DIVs, as well as different headings. Just fantastic.
Alex, Instead of using ‘Flash Blocker’ why not just use ‘AdBlock’ with this code:
This will block almost all ads including flash banners.
Kemie: The accented characters thing is probably because Shaun’s default .swf is set to only include the standard character set. You can also include every single character in the font outline (at the cost of filesize) or you can individually specify other characters that you may find yourself using… like a british pound sign, for instance.
Danny: Yes, you can make a SWF background transparent by setting the WMODE to “transparent” in the code which spits out the object/embed tags. This works on PC/IE as well as Safari as well as some other browsers… but not all of them.
No, Mike, even including all characters in the swf, i cannot get accented characters or � to display. No difference whether i type in � or & ntilde ;….
oh, it seems to work on Safari/Mac, but not on IE or Firefox on a PC… weird
Shaun-
This is all very brilliant. I tried it, and found it relativley easy to implement and it worked beautifully. Kudos — I really think this could be the start of something big!
The biggest drawback for me, personally, is that fact that it’s (basically” limited to one-line headers. Since there’s no way to accomodate line wrapping, I simply have to hope that I never make a blog title (or whatever) longer than the space in the container DIV. I’m not sure if there is any way to solve this problem, but I think a soultion to this issue would go long way towards this be a more useful technique.
Great work, man!
Experiment: Those who are reporting Firefox crashing, are you all using Flash Blocker? Anyone using Flash Blocker and not experiencing the problem? Also is it just this site or the revised technique that crashes the browser. Please see my previous comments for the difference.
Danny: In my experience using the wmode attribute with this many Flash movies forces them into low quality mode whenever another element infringes on its space.
All: Thanks for the kind words. Let’s not get too excited yet though, there’s still the potential Firefox crashing issue and the lack of support for multiple lines (without additional coding—which I will get to eventually).
Not sure where my last comment went, but if you’re using the stock AdBlock code with firefox (UserContent.css) it also kills Shaun’s banner image. With the image gone, the Options menu overlaps the initial title on the page, except the title has the Z-index issue that’s apparently also been mentioned. Probably a rare combination of client-side code and element positioning, but something to keep in mind.
Eric, your last comment was deleted because I’ve already covered the Flash/z-index issue in the Shortcomings section of the original IFR article linked at the beginning of this one—as well as in the comments of my last four posts. Please search for z-index to find the related comments.
And check any possible display issues in multiple browsers to confirm that there is an error and not a misperception on your part. The “missing” banner you mention is only supposed to be on the home page so it’s not actually missing.
In that case I apologize profusely. I thought I’d read through this post in detail and hadn’t seen it mentioned.
Regardless, viewing the site in Safari (1.2), cpu used spikes in huge amounts. It actually seems to be using around 90% of a G3 iBook 700, making scrolling extremely jerky. I think part of the problem is the use of IFR for comment headers - the sheer amount of text replaced is really taxing. Normal use for post headers and the like probably wouldn’t be as much of a problem on most sites.
Shaun, it’s the current code running on this site is hanging FireFox with Flash Blocker (I didn’t realize till after my post that the site isn’t running the new code).
Interestingly it didn’t used to do that. Six weeks ago or so when I first visited the site the headers were getting blocked but it didn’t crash. At some point during that time ‘Flash -Click To View’ was renamed ‘FlashBlocker’ (I assume it’s the same extension) and that’s when the issues started.
Disabling FlashBlocker fixes it.
Tried this on WinXP Pro (SP1) with Mozilla Firefox 0.8 plus Adblock 0.51 installed, and everything’s showing up fine for me.
I’m currently 60% through a major redesign of a company web site, with a heavy biased on aesthetically-pleasing design with strong underlying accessibility; Inman Flash Replacement ‘enhanced’ — or IFRe; makes for a rather nifty anagram of ‘fire’ I think — seems to be the ticket to having both halves of the cake and eating it too. Tremendous stuff.
My next step is to experiement with inline colour switching via some extra variables passed to the main JavaScript function; I’m hoping to setup defaults of ‘background = transparent’ and ‘text = black,’ with any passed values over-riding these as required. Should allow for the placement of Flash-based headings over any (solid) colour background, and still make the text legible.
“Hear goes nothing…”
Apologies for the double(?) post, but I missed one important detail in the final sentence of the last paragraph. It should read:
“Should allow for the placement of Flash-based headings over any (solid) colour background — using just one source Flash movie for all required instances — and still make the text legible.”
Kemie: The special character issue is probably related to what sort of encoding your system is using then. In Flash 6, there is a new parameter called System.useCodePage which basically forces Flash to treat any incoming characters as Unicode, instead of whatever your system treats them as (which can be different from Mac to PC). This might solve your problem. It will not, however, solve the fact that you still need to tell Flash to embed whatever accented characters you will be using.
Jeff C: There are two things that should be done here regarding your multiple lines suggestion. One is to do exactly as you say and create a .swf and accompanying code which can use as many lines as necessary. Shaun has indicated he may work on this in the future, and I may as well… even though my use for it right now is limited. The second thing to do would be to build the .swf so that it resizes the text dynamically so that it will always fit on one liine. This is how we do it on ESPN. Generally, you do want your headlines to fit on one line, so this is a nice way to accomplish that. Right now, our code is Flash 4/5 based… I will post the way to do it as soon as I update it to use the cleaner Flash 6 method.
Regarding CPU spikes: Two things here. Number one, Flash is generally pretty good about taking up all the CPU juice which is currently not being used (when it needs it) and not infringing on other processes which may be going on. It’s not perfect, but it’s pretty polite. So when a Flash process appears to be taking up 90% CPU juice, it generally means that 90% was available at the time… although after the fact, some other processes might want to use that juice and now it’s not available, which sucks. Number two is that yes, Shaun is right about the sheer number of replacements being the issue here. Flash, like most plug-ins, tends to use a lot of juice when the plug-in is first instantiated, and then goes down to manageable levels. Since Shaun has like 35 instantiations on some pages, that’s 35 spikes, all happening simultaneously. So yeah, a more judicious use of this technique will lessen that impact tremendously. A typical blog page will have maybe 1-5 replaceable headlines on it. That’s not bad.
Kemie: After messing with the system.useCode paramater in Flash, I still couldn’t quite get it to act consistently across browsers when using special characters.
What did work, however, was changing this line in the JS:
fv = ‘txt=’+escape(txt)+afv;
to this:
fv = ‘txt=’+txt+afv;
So basically, if you don’t escape the H1 text in javascript, all of your accented characters seem to show up fine in PC/IE and every other browser. So I guess the only question now is, is escaping through javascript necessary at all? (Shaun, wanna chime in on this?) I think the only character which really needs to be escaped is the ampersand. So if that is the case, maybe we can do a single replace statement on the ampersand instead.
That worked perfectly Mike, thank you so much! For now i can just avoid using ampersands in my headings and enjoy accented characters! :D
You could be right about the ampersand, Mike. I may have just been playing it safe with escape(). If you’re use Daring Fireball’s SmartyPants you may need to create a stupefy() function to replace smart quotes, em dashes and ellipses too with their “dumb” equivalents.
Okay… I got it. The only two characters which needed to be encoded are the ampersand and the double quote. The ampersand for Flash’s sake and the double quote for javascript’s sake.
So if we just replace this line:
With these three lines:
… we are all good. This correctly handles dumb punctuation (and ampersands) and smart punctuation (as is created with Smarty Pants). No stupifying necessary.
Are you sure Mike? Those two lines don’t account for unencoded ampersands that might be part of other html entities like a single right smart quote
’If the function findsdon’t escapewon’t thetxtvariabe now be set to justdon?That’s why I suggested “stupefying” any html encoded characters.
Yes, that issue was confounding me as well, but apparently Flash is smart enough to not use the ampersand as a delimiter if it is followed by a known HTML entity (like smart punctuation, accented letters, etc). I certainly did not know this would be the case until I tested it, but it tests out correctly!
my firefox dies everytime I come in to the site, and I don’t have a flash/ad blocker running. It’s v 0.7
Looks fantastic here on Firefox for XP.
I’m definitely going to have to play with this when I get a chance to.
Nice work Shaun. What a fantastic innovation and time saver. I would absolutely love to use this technique on upcoming projects and have been playing around with it all night. I have a few questions though.
Is there any way of altering the kerning of the text in the dynamic textfield (actionscript or otherwise)? I can’t find a way.
I’m also having a problem with Opera 7.21 on Windows 2000. Basically it displays the fallback text instead of the Flash text. I find that if I take off the detection it works fine. Are there problems with detecting the plugin for Opera?
Just to chime in on the FireFox issue…
Using FireFox 0.8 on WinXP, without any ad blocking extensions, I see the browser stop responding whenever I try to view this page or the previous post on this technique. It hangs before displaying any content, with a corresponding CPU spike to about 50%. I can view other pages on the site in FireFox with no problem, so I’m assuming it’s just the sheer volume of titles being replaced on these pages that is causing FireFox to choke.
Not a complaint, just a response to your request… all in all, I think this is a fantastic addition to the developer’s arsenal!
I have been using this method for years… Never even occured ot me that soo many were interested in it, and havnet already been doing it.
One person had a question about wrapping lines and doing paragraphs, and this can also be done. The easy way it to create a fixed sixes layout for the text.. and in the string passed use a “n” to get the next line. You can even pass HTML to the flash if you want to.. to get effects like bold and italics etc… If you want to do a variable sized paragraph that is possible, but you will have to carry a var throughout the process flash / js / (x)html to make every part of the process know what to do. As with the noscale in the fla it will know.
I am just starting to do the flash replacements. Although the VAST majority of my users won’t require it, it is always nice to know - you’ve got it covered.
some more examples… drrubach.com prayonit.com Best wishes.
This page crashed my Firefox browser, I don’t have any additional adblocker extensions installed. I opened Opera7.23 Win32 and the layout of your site is broken, I have a screenshot if you want, you probably already know about it. Now I’m on IE6 and stuff is appearing and disappearing as I mouse over…weirdness, hope it’s not my system.
This is great Inovation man for real, but is it possible for you to put together an easier step by step tutorial/article so that we to can acomplish this, or was that already covered and I missed it some where along the line? Anyway man good stuff, you are the man!!
Thanks Khalil. I think it’s a little overwhelming right now because we’re all still working out the kinks. Once I have a spare moment (after resolving the Firefox crashing issue) I’ll try to do a concise write-up on the technique.
I’m running Firebird 0.7 on my XP (SP2) machine and haven’t encountered a single problem with page loading, processor spikes or content flashing. I don’t have any Flash blocker extensions installed, either. Dunno why others are having trouble, except to point out that they might be using nightly builds.
In general, I found the 0.8 Firefox release to be significantly less stable than the 0.7 for other, unrelated issues, and have therefore switched back. The issue could simply be with the current build. We’ll have to wait and see.
Kudos to Shaun and Mike for their inspiration and hard work and thanks for sharing your discoveries.
Nathan where’d you get SP2? Is it available to the puplic or did you get a beta version or something? If not where can I get it?
Shaun it’s no problem or rush really I understand,
I noticed some people commenting on the z-index issue. Here’s something I came across a while ago and shows how to place a DHTML layer over a flash movie… I’ve used this and it’s worked for me. Not sure about browser/OS issues, but it involves setting the WMODE in the swf to “opaque” and then placing the DHTML on a z-index higher than 1…. but here’s a working example: webgriffe.com/demo/layeroverflash
Enjoy
This is fantastic work - I have one question. I want to set the flash font size for the different page elements [<H1> etc] in the javascript by sending a flashvar to the .swf. In theory I can then have a single flash file generating the different font sizes that i need. Is this possible? I can’t seem to get it right.
This is what I currently have in the frame action, sending it a variable called ‘textSize’
myTextFormat = new TextFormat(); myTextFormat.size = txtSize; _root.txtF = setTextFormat(myTextFormat); _root.txtF = txt.toUpperCase();For example, I’m sending a textSize=22 for an <H1> tag. Or have I embarassingly missed something obvious? :)I’m running my own server for my blog, and recently noticed some weird messages coming up:
[Fri May 07 00:59:04 2004] [warn] (720064)The specified network name is no longer available. : winnt_accept: Asynchronous AcceptEx failed.The above message appears in my error.log for apache for each time an image loads trough txt.swf. I haven’t been able to attribute it to anything in the flash code… any other ideas?
How come, when I change the text to bold in FLash, then export the movie - the text simply doesn’t display anymore???!!
If I change it back to regular, then it works without problem… I’m a little confused about what the problem is.
I love this technique, but there’s one major disadvantage: Flash doesn’t allow dynamic text kerning so we have no control over letter spacing. Or… ?
Paul B: I really couldn’t tell you for sure. I haven’t played around with the TextFormat object in Flash. Have you consulted ActionScript for Flash MX: The Definitive Guide?
Michael W: Sounds like you forgot to embed the bold version of the typeface. If dynamic text isn’t showing up that’s usually the cause—or at least the first thing to double check.
Jacques M: That is a definite shortcoming of Flash. I haven’t found a work around for it yet. Maybe there’s something in the TextFormat object that Paul mentioned above. I just got lucky with the typeface I chose for this site and the examples.
I’m having trouble with the text case. Are we limited to all upper or all lower case? I commented out the line in the _root.txtF = txt.toUpperCase(); line, but when I do no text is displayed at all. I’ve read most of the replies above, but I didn’t see any reference to the text case (maybe I missed it?). If there is a way to keep the text to retain it’s normal case?
Nope, you’re not limited Brian. Instead of commenting out the entire line, just remove the method call that changes the text to uppercase like so:
Sweet. And thanks for sharing this whole thing… it freakin rocks. And it’s stupid easy to implement to boot :)
It seems that you can only specify an element and its closest parent to be modifed. It would be super handy to be able to specify as many parents as you needed per replaced element. Let me clarify. Currently, this works great:
However, this doesn’t do too well:
The top most parent,
div.halfcolumndisappears. I’m assuming it’s getting the -replaced tag put on the end of it or something. Any suggestions?Justin, for now the function isn’t built to recognize that depth of reference. That’s why it’s not working. Sorry!
Hmmm, I see. Excuse my ignorance of javascript, but couldn’t the SI_replaceElement function just ignore all the elements superceding the parent of the replaced-element? It seems like when you split the element based on the “>” character, you could simply tell your wonderful function to ignore everything to left of the first element past the right most “>”. Sorry to put that in spatial terms, but the higher degree of specificity afforded by that capability would be exceedingly useful. Geez, gettin’ all long winded… Thanks for the great work!
Has Anyone figured out how to:
either in the FLA or within the HTML?
nc
If you know some JavaScript you could tweak the script to look for the href value and pass that as a second variable to the Flash movie. The mouseover could be achieved by setting up your Flash movie with a movie on the main stage under a button. Mousing over the button could change frames in the child movie (which is where you would probably load the text). I would advise against these ideas though since links in Flash movies aren’t visible in the status bar and I’ve already covered how I feel about URL obfuscation. :D
needless to say this is an awesome technique, but I can’t figure out how to make it work in encoding other than Latin
Micheal W : You need to have a dynamic text field, somewhere off your stage, that contains at aleast one character in the font and style you want (for example an A in Helveitca Bold) and then embed the character outlines for your character range.
No, you don’t Bradley. Please see the first article on IFR to learn how to embed and export your typefaces in Flash. No need to clutter up the stage.
that works fine for the normal version of the font. I couldn’t for the life of me get helvetica bold to display until I did what is described on this page : macromedia.com/support/flash/ts/documen … tlines.htm
I forgot that I actually had to add
**tags to the txtF variable like this :_root.txtF = \"**\" + txt.toUpperCase() + \"**\";I was sure I tried the methods you explained but maybe I was doing it wrong.
thanks for everybody’s concern in my problem. I think I need to explain what exactly seems to be wrong. I type the heading in Russian, but I get 4-digit codes instead of each character. I’ve embedded complete font outlines (including all the Cyrillic characters). I also tried to add this line of code:
System.useCodepage=true;
which is known to fix the othe-than-Latin encoding problem in dynamic text fields. But it does not help.
Thanks for sharing this great technique! I do have a couple questions though …
How do I stop the .swf from showing the “Flash Button Hand” when the tag that has the technique applied to it is passed over?
Why does IE6 decide to show my IFR
<h3>tags but not my IFR<h2>tag? They both work in Firefox … ?!Again, thanks for sharing this with us all. It really is a great “leap” forward for all us CSS junkies…
I think you could implement multiple lines more easily by using the
textField.textHeightproperty.. rather than countingI use that property all the time to space things vertically in Flash when you’re not sure how many lines some dynamic text will run to.
IFR caused Internet Explorer 5.0 (2022) to crash on me today running Mac OS 9. Also, Firefox 0.9 continues to crash for me (I’m running a custom userContent.css file though).
Some nice ideas here. Especially hiding the content with the html tag, which I’m going to use in my own flash accesibility experiment where I’m currently having a ‘flash of styled content’. I’m setting up a XHTML/CSS site, of which the first page includes javascript/flash detection, which shows the flash movie, which in turn parses the content of the XHTML site (using xpath) to display the same content within the flash movie. Keeps it easy to update, and fully accessible. My experiment at halans.be/lab/bolv2 (which needs lots of finishing touches, I know) Try with JS enabled/disabled. Any thoughts?
well I was not able to get the font embedding to work for Trajan Pro. By making it bold it would not export ( as mentioned above ), but when removing the bold it would. I ended up having to create the text field dynamically in flash, and exported the font through the library for it to work… Any clues?
Great job, Shaun! I’ve implemented the IFR technique on our studio site…but also had trouble with the special characters. I also looked into using the Dynamic Text Replacement technique on ALA and although it handles special characters and word wrap nicely, it does not LOOK as good. It’s as if the Flash file does a better job of maintaining the font metrics and kerning. The DTR option makes all the text look a little chunky.
Hi Shaun, just wanted to say thanks for this amazing technique - I’ve just recently used it on my site with great results. I’ve had a need for this so many times in the past, but it takes a very clever thinker to not only come up with the idea, but implement it well too. Cheers
Am I corrects in asuming that if we are to use a non standard font in this method then regardless of the dimensions of the swf it will be at least 40K because of embedded fonts. The file size is the one thing I am worried about.
Yes Yury, the Flash file might be sizable depending on the complexity of the typeface and number of weights you chose to embed.
On the other hand, the Flash movie is cache-able so it’s only transmitted once whereas the alternative requires each headline load a separate graphic which when combined results in larger than 40k transfers (depending on the size of the site).
I’ve recently discovered one problem - in Internet Explorer, if you put an
<a>tag within the<h1>(or whatever tag you’re Flash-izing), like so:…this works fine in Firefox. It shows the Flash anti-aliased version, and the link even works. However, in IE, the link does not work, the Flash does not work, and there’s not even any text. Anybody else notice this? It’s not so important to me, but I use a few
<h2>’s as anchors in a few pages and it would be nice to still have that usability as well as this new Flash method. Ideas?I modified the script to remove a few limitations concerning replacement of DIV elements. Read more here.
I’ve been using this recently, and wondered if anybody knew how to align text to the right instead of the left? I’ve tried setting the text alignment in Flash, but when I use the technique, the text stubbornly sits aligned to the left…am I missing something obvious?
First off, this is the best thing ever. There ya go.
My question is, does anyone know how to embed a PLUS SIGN (+) into the Flash file? I have typed it into the “And these characters…” box, but it doesn’t seem to work. All of the other standard special characters work so far as I can see. It’s not really overly important, but I guess I’m just anal.
And as a side note, you can decrease file size dramatically if you can get away without embedding “All Characters.” I went from 19k to 5k just by not embedding the lowercase characters, since I wasn’t using them anyways.
Thanks again Shaun for being awesome.
I just put this in place on a test page with a box 310x115 for the text area. I typed in my headline 15 photos of premier soccer leagues, with ice-cold / red hot 1/2 capabilities.
Ok not exactly what the headline is…but the form is correct. so anyway, the headline shows up except after the 1/2 the word “capabilities” does not show up at all.
Any ideas? I’m using 24pt Knockout, and yes, there is enough room in the text block.
Thanks — Todd
This really is incredible, thanks Shuan!
This works great in FireFox .09 for me, and I was able to add a second SI_replyElement to replace two different elements on the page with two separate swf files. Pretty cool.
However, I tested the same page in IE6, and I’m getting this error: Line: 149 Char: 4 Error: ‘e.id’ is null or not an object Code: 0
…and none of the flash is displayed. If I remove the secont SI_replyElement line, then the page loads without the error, but still no flash shows at all, and my elements are stil hidden.
I’m not very familiar with JavaScript, unfortunately. Does this sound familiar to anyone?
Thanks!
I have also added a second (third, and fourth) SI_replaceElement and have a question about font embedding. I am going to try stripping down a suitcase to just the weight I need to embed to reduce file size. Alternately, is there a way to have all (these) flash movies reference the same external file with the font embedded?
CLIFF: Did you really add SI_replyElement or SI_replaceElement? Could that be your problem?
What about printing issues? I have found that IE has no problem printing the flash headlines, but Firefox does not. Not sure how its affected on the Mac, as the site I am working on is behind a firewall at the moment and my G5 at home does not have access to the site.
Odd that with some fonts you need to use the bold tag to make them show up. tag _root.txtF = “< b>” + txt + “< /b>”;
This seems to happen to me in Windows a lot with typefaces such as Universal Condensed (overused font I know, but some corps have been using it for years). On the mac you are given Universal Condensed Bold as an potion in the font pallete, meaning that you do not need to use the bold tag.. On windows for some reason, Universal Condensed Bold does not exist in flash mx unless you hit the b button on the normal Univ Condensed.
I only bring it up so people who go from platform to platform are aware of this.
Alex, yeah sorry, I meant SI_replaceElement. I’ve got two of them set up.
Even if there’s just the one listed, the font doesn’t show up in IE. I can tell that the flash is there, but it’s blank. It does however work in FireFox and Netscape. I can’t figure it out.
Alexis, have you tried using a print stylesheet?
Well the problem with the print style sheet is that the IFR javascript has already replaced the h1 and h3s with the flash. Even if I were to change the html hasflash visibility attributes I don’t think it would affect the print issue. Firefox/Mozilla/Safari does not seem to print the flash itself. Is there a onPrint javascript command available to go through and swap out the flash for html?
Is anyone using this with dynamic text? I am trying to write some javascript that counts how many characters there are and then resize the flash movie accordingly. Now I have working but I can’t figure out how to adjust for different letter width sizes.
I just discovered that 3 weeks ago the popular Flashblock Firefox extension was updated:
Unfortunately Flashblock does adversely effect sites that are using the Inman Flash Replacement technique (IFR) by displaying the usual placeholder F symbol instead of the css styled text version of the flash content instead as I expected.
The only thing that i find slightly annoying with this techneek, is this: i normaly hate flash, think its un-nessasory. thereforre, to stop me from seeing lodes of advatisments ive installed “Click to play” which replaces all the flash, and shockwave with nice little buttons, which are fine to veave if you think its going to be an advert, or even for games (one bug button, but with headings your talking about clicking each one befor yoy can see anything… my fult i sorpose
Shaun this is great stuff and easy to implement, thanks to your hard work.
Just wondering if you had any problems implementing a font with a “bold” setting in flash? The file works fine with the font set at normal weight but once bold is applied it refuses to render?
Cheers,
vav
How are you able to insert images in the flash file?
Where would I go abut placing the images?
What if I would want to image to be placed after the text?
Thanks for your support.
(My aplogies if this has already been asked.)
The script doesn’t seem to work with TDs.
Like so: < td class=”menuitem”>Text to be replaced< / td>< / tr>
The text is not replaced. Any solutions?
Another problem: the script seems to stop replacing after a number of replacements using the same tag.
Eg: If I were to use H3 ten times in one document, it would stop replacing at 6.
Really annoying.
So useful… thanks ^^
Just had a chance to get this working. So far so good however I want to be able to align text to the right as well as left. Anyone help me align text right?
Those who know don’t talk, those who talk don’t know.
And i don’ know anything about alot, but you do :) i love this kinky thing of changing the font workflow around, before i used DOM scripting* to get around this kinda stuff “Dynamic Text Replacement” have always been a designers way to get things the way it should be.. and have been playing around now for a bit … i say thx alot for your time and sharing alot of your minds…. free your minds maybe the only thing to get things growing so don’t stop tick tick… as i was learning to fly -the same moment i begin to be a stone falling to the ground, it never hurts its only learn to fight and fly higher .
Shaun, I am going through and trying to refactor all the IFR stuff out of my page. I have created a js file and imported it and created a stylesheet and attached it based on this example page shauninman.com/supplemental/ifr/step_2.html
I am trying to strip down the css stylesheet to only what I need but I can’t tell what I need and what I don’t. What styles do I have to have in my stylesheet?
Apologies. The page I am looking at is http://shauninman.com/supplemental/ifr_revised On this page what css can I strip out and still have my page work?
Hi Shaun, Is there some method to create a print stylesheet so that it reverts back to regular text when printing?
Thanks!
To make it so all the body text is selectable, couldn’t you append rather than replace the tag and then use CSS to hide the replaced content by placing the directly over the replace (or whatever)?
If you did that, wouldn’t you be able to select and copy all the body text and still have it only appear like the IFRed content is visible?
Another comment regaurding CPU issues:
1) As most of us know, Flash is not that hot at rendering anti-aliased text. At small font-sizes, aliasing the text would most likely help eliminate problems with scrolling. This of course moves your plugin penetration rate down since it requires Flash Player 7.
2) We can all look forward to seeing the Saffron type engine at work in Flash Player 8 / 8ball. This should reduce CPU overhead, especially with the bitmap caching features available to 8ball. Text should be far clearer as well.
Future considerations, mostly — but there’s a bright future for this technique, surely!
Thanks for sharing your innovation. The Opera issue: With Opera 7.54 on Windows XP the Flash doesn’t happen. While http://shauninman.com does Flashify, the sample page at http://shauninman.com/supplemental/ifr_revised does not. I’m looking around your site to see why, but haven’t figured it out yet. If someone already has, could they explain?
Adam