sIFR 2.0 RC 3 is Here… Come Get Some
UPDATE: Version 2.0 is now available. See article here.
Alright, I know I said Release Candidate 2 might be the final release of sIFR 2.0, but hey, Mark and I found some more things to improve on… so we did. Today’s release of sIFR 2.0 RC3 introduces the following new features/fixes/improvements:
- The javascript file has been reduced down to 8.8k.
- Replacement calls now use named arguments so you don’t need to specify parameters in any particular order. The function is backwards-compatible, however, so existing installs will remain functional.
- Newline support (
<br>and<br />) now works perfectly. - Now compatible with Opera 7 and above.
- New support for a “fallback” transparency color for browsers which don’t support transparency. This eliminates the green background displayed in some older browsers when specifying transparency.
- A shiny new sIFR logo!
Since all changes from RC2 to RC3 are contained within the “sifr.js” file, you need only replace your existing “sifr.js” file to complete the upgrade. No .html or .swf work is necessary. You may, however, decide to change your replacement calls to the new named argument syntax if you wish. This is not necessary, but you may find it preferable.
Note: if you are using a version earlier than RC2, please re-export your swfs as well.
Here are links to the new files and updated example page:
Incidentally, it looks like Metafilter has picked up on sIFR today and is sending over a ton of traffic to the original sIFR article. Thanks guys!
Reading the Metafilter comment thread is a bit humorous, however. It never ceases to amaze me how some people will see the word “Flash” and cry about imaginary accessibility issues, imaginary proprietary file format issues, and other imaginary “sky is falling” issues. Look at the code people. Study it. Analyze it. Understand it before you jump to conclusions. And above all else, understand that the entire web as we know it is a hack. I’d respond on the Metafilter thread myself but I don’t feel like paying $5 to join.
I meant to ask Mark this, but how did you manage to cut down on the file size so drastically?
Looking forward to trying it out…
Right… just downloaded it and worked it out.
And there I was thinking you’d pulled off a masterstroke! :)
D’OH! I only just got around to updating to RC2 this very afternoon :)
Hot Damn. It just keeps getting better.
I’ll wait for the final before it creeps to my website. I love keepin’ up with the updates.
I’m getting the dreaded green background on any replacement with “transparent” specified for the bgcolor… worked fine with RC1 (haven’t tried RC2, sorry). Firefox 1.0 and IE6 on Windows XP…
I had to revert back to RC1 for the time being…
(Editor’s Note: Transparency has changed slightly from RC1 to RC3… read the readme.txt file for details… it’s basically another parameter to the function now)
Ah… transparency is done thru the swmode variable… that’s what i get for posting before reading the readme.txt… my bad!
sIFR is the most incredible stuff i’ve seen on the web this whole year. It’s a revolutionary step in the way to the future.
Thank you guys for the beautiful work!!
Greetings from Brazil.
Because I like to have my site designs very flexible and with the ability to change everything by loading a new stylesheet, is there an easy way to define the textcolor, backgroundcolor of sifr, normally defined in the replacement calls in a css file, or to define them differently each time a different stylesheet is loaded? (other than writing some bloated php or js workaround. Keeo up the good work!
Florian - we’ve had to do that on the server side, using some .net code to write the javascript replacement calls at the end of the page (though much the same thing could be sone with PHP, or no doubt ECMAScript).
Perhaps version 2.1 will add the ability to alter the colours in the CSS? Pretty please? :-)
Reading the Metafilter comment thread is a bit humorous, however.
Y’know, I haven’t logged in to MeFi in nearly two years, but the idea sprung up in my head the other night to do it, though I haven’t commented or posted or anything. I’m once again reminded why I dropped out.
But as to the announcement: Yay!
Lovely, if only for the filesize improvement!
I have one beef with it, but I’m not sure whether it’s doable.
I remember that from RC1 to RC2, you magically managed to fix a problem with sIFR links, and scrolling in Firefox — links would require a “double” click to work.
However, it seems that with RC2, and now also this RC3 the same bug appears when the window mode parameter is sat to opaque (wmode=”opaque”). Remove the parameter and everything works again.
It’s a small thing, and I’m not sure if it’s fixable. But in the case that it’s just a few lines of code, here’s my vote.
The (strangely) intermittent problem of sIFR Flash-content not being displayed in IE seems to have been resolved with RC3. I simply dropped in the new .js file and voila! It appeared on refresh. Great filesize reduction too!
Andrew, basically I replaced all internal variable names with one or two letters, and I removed all extra whitespace and comments. Of course this means reading the JavaScript has become virtually impossible to do, but the original source should be included.
Florian, unfortunately this isn’t possible. Browsers such as Safari and also somewhat older Opera browsers have no way of reading the color form a stylesheet. Perhaps we can add that in a few years time ;-)
Olly and Florian, the new named arguments syntax makes it somewhat easier to do this on the client side. I wrote an article about this, but unfortunately Mike forgot to link to it. So… here’s the link to Named Arguments.
Joen, the problem in Firefox is caused by setting a window mode, be it opaque or transparent. Therefore we removed it by default, but sometimes it’s necessary.
Ben, good… though it doesn’t make much sense ;-)
Btw, I also wrote an article about where to put your replacement code.
This is really great. One thing that bothers me, however, is that I have a <h1> tag that holds my header image. The h1 has ID ‘header’ which has a width of 850, height of 116, the background-image is the header, and font-size is to 0. This was all working properly but when I implemented sIFR into the website, that part just disappears and you can see right through it. I did delete all the stuff that referenced to h1 in the sIFR stylesheet but that didn’t help. Not sure why it would touch ALL heading tags. Anyone know?
Other than that, great stuff Mike. =)
Rick, I assume you are replacing the h1 element using JavaScript…?
Well, not on purpose. I deleted all the default .replaceElements except for the h2 one but it still does something with the rest of the heading tags and makes them not visible. I guess I’ll keep looking to see if I can figure it out.
cheekygeek, I hope they will contact me or Mike about that… in any case MetaFilter is not the offical bugreporting place ;-)
It looks like it works pretty well so far, except there is an ugly teal/blue background color (readme.txt says white is default for sBgColor). When I do something like sBgColor = ‘#ffffff’ the background doesn’t change. Does anyone else have this problem? This is only my first time attempting to use sIFR and I haven’t tried messing with the other vaules yet.
The readme is missing a lot of content (i.e. syntax examples that someone forgot to put in later), but other than this sIFR seems neat.
Zach, got a link for us so we can have a look?
That logo is heinous, but it’s nice to see this project continuing to mature.
(Editor’s Note: Hey, cmon! I had five minutes to kill!)
I have found that if you try and use wmode opaque withought setting a bgcolor than it will show that teal color.
You may even try compressing it further with Dean Edward’s Packer:
Packer
I put the code in there and got it down another 2 kb…
Sorry, I don’t have a link available since my firewall is all locked up at this time, but I think I discovered something.
The readme.txt says that as of RC3, you can use “named arguements” in the sIFR.replaceElement() function. While this does in fact work, I found that I had to include all the arguements before sBgColor in order for my sBgColor value to work properly. If I try to put it first, I get the nasty teal/blue background.
What I am using now:
sIFR.replaceElement( sSelector = ‘#content h2′ , sFlashSrc = ‘assets/swf/monotypeCorsiva.swf’ , sColor = ‘#735524′, sLinkColor = ‘#000000′ , sHoverColor = ‘#00CC00′ , sBgColor = ‘#F2E8D8′ );
If I move around the name-value pairs, it doesn’t work. This leads me to believe that the order still does matter in RC3.
Anyway, I am still playing with it and its interesting.
Jeez I just downloaded RC2 and hadn’t had much time to play with it yet and here comes RC3!
The one problem I had intially with RC2 is that it messed up my floated image. I had an to replace with an image floating to the right of the and
text floating around the image. When I applied sIFR everything dropped below the floated image. What am I doing wrong?
To be honest, I really haven’t had the time to do the tuning yet, so is that a problem or is this a bug of some sort? I’d really like to use this concept, but the site will use a lot of images as described above. Any help is greatly appreciated.
Arrg! My words dropped out! What i said was I had an h2 to replace with an image that floated right along with text and sIFR made everything drop below the image. I sthis my problem (haven’t tuned the font yet) or something else?
The only thing I’d like to see is a way to copy and paste the text. That’s the only part about sIFR that really bugs me. I’m not sure how that could possibly be accomplished, but it’s still annoying nonetheless.
(Editor’s Note: Umm, you can.)
Great work guys. I love this stuff!
But…
I’m using a lot of transparency and RC3 has created a problem with Safari 1.0(v85). The new sWmode method has broken transparency in this version of Safari (I don’t have any others to hand to test it on) so I am getting all of my text on a solid white background.
I haven’t used named arguments, so what I currently have is:
sIFR.replaceElement(”h1″, “font.swf”, “#4BC0E3″, null, null, null, 0, 0, 0, 0, null, null, “transparent”);
Any ideas? Is it just due to the earlier version of Safari, or have I missed something obvious? Every other browser seems to be fine with it.
Keep up the sterling work, and thank you.
Zach: The correct syntax for the named argument method is contained in the readme.txt file. That should solve the “order of parameters” problem.
Wayne: Try setting the element you’re replacing to “display: inline”. When you’re replacing a floated element, you should always use inline.
Graeme: Transparency support in Safari 1.0 is unreliable at best. I think it works better under Panther but not at all under Jaguar… so we disabled it. More recent versions of Safari should display transparency just fine though.
Mike, I’m really sorry, but I am going to have disagree with you. I have been using transparency with Jaguar and Safari in both sIFR and standalone .swf with no problems.
Just to be sure, I have done some more testing this morning of wMode=”transparent” with flash movies on background images and overlayed several transparent sIFR headings on top of each other in RC2 - again on background images, all completely successfully.
Can transparency please be re-enabled for Safari in Jaguar. I have been using it quite intensively recently and can without doubt put a big cross in the ‘It works in Jaguar/Safari 1.0′ column.
I feel awful for asking after all the work you have put in. But, please. Pretty please… It’s going to make the difference between using sIFR or not.
Either way, have a good New Year all.
I’ve only discovered sIFR today, and am very impressed. I am experiencing difficulties with Cyrillic text, though. I’ve included the Cyrillic range when embedding the font, so Cyrillic characters do display, but the kering is entirely messed up, characters overlap etc. The same thing does not happen with the Latin range — using the same Adobe OpenType fonts such as MyriadPro or MinionPro.
Does anybody have any experience with sIFR and Cyrillic? Changing the letter-spacing in the CSS does not seem to do the trick with Cyrillic characters. Weird.
Alexis, very interesting. I’ll try that and see what I can do.
Nathan, I’m not really in favor of such packers, especially because the use eval, a JavaScript method which I consider to be evil. (But of course that’s my opinion.)
Wayne, as Mike said, play a bit with the CSS settings for the .sIFR-Flash elements.
graeme, could you send me the version of WebKit your Safari is using? We could enable transparency for that version then. We are currently supporting transparency for WebKit 124 (1.24?).
Is anybody else here having trouble getting links to work with this version of sifr? When I hover over a replaced header that is supposed to be a link, the text changes color, and the cursor turns into the hand/finger pointer as it normally does when hovering over a link… but clicking on the link does nothing. Single click, double click, triple click… nothing.
Reverting to RC2, i can see that it wasn’t working there either… backing up to RC1, and the sifr links work fine. Am I doing something wrong here? I’ve tried removing the wmode variable completely and still no cigar…
Again, this is on both Firefox 1.0 and IE6 on WinXP (SP1, if it makes a difference, which i doubt).
Also, i’m with graeme on the Safari v85 transparency issue… transparency was certainly working for me on v85 (albeit, clicking around the screen introduced some weird font-smoothing effects, but it worked). I’m a little surprised to see it removed, to say the least. I’m for putting it back in, but hey, ultimately its your guys’ call…
The biggest problem with transparencies and Safari is that rather odd pixelation of the flash font when using layer rollovers. I can only assume that this is related to the same documented problem of layers dissapearing when rolled over flash with wmode=transparent. I think Todd Dominey ran into this when designing the PGA championship site. http://www.pga.com/pgachampionship/2005/
Brian I am not having any trouble with links inside header tags in RC3. In fact they seem to be working much more reliably now for me when dealing with longer urls and urls with variables and &s (or & to be correct) in them. Without a link I can only assume that you may be doing an a href=link.html instead of href=”link.html”
Mark, according to Apple System Profiler I’m just using WebKit 1.0 on OS 10.2.6. Safari is 1.0 (v85) - I think that was the very first release. Transparency is fine.
I’ve done some more investigation and I don’t think it is Safari that is the culprit. It’s the version of the Flash plugin installed.
I visited a friend and tried my tests out on her machine with WebKit 1.0.3 on OS 10.2.8, Safari 1.0.3 (v85.8.1). Transparency did not work. When I checked I spotted that she had the Flash 6 player installed and I had Flash 7. Just upgrading the player to 7 rectified the problem.
Apologies for not having all of the facts when I first wrote, but I do now believe that it is a plugin version issue rather than a browser one.
Hope this helps.
Great work as usual!
This comment from Metafilter is hi-larious:
“I don’t think web designers should get to use any font they damn well please.I surf the net for content, i.e., words and pictures. The fonts they come in shouldn’t affect the content - in fact, they should pretty much be dictated on the client-side. But I’m not an artist.”
Brian, due to the necessary Flash implementation for hover colors this works somewhat different from links without hover colors… this is a Flash problem, however. Also be aware that setting a window mode results in problems in Firefox (this is a Gecko bug).
graeme, thanks for the information. I’ll discuss it with Mike.
geoff, thanks :)
And now I have a new year to celebrate, please excuse me :) And all the best for 2005!
An issue that has been on the table since RC1: detailed instructions for the generation of .swf files from sifr.fla - directed at novice users.
Just wondering if we can expect more detailed instructions with the just released RC3. Tutorial with screenshots would be ideal. Any takers? How long could it take?
Thanks in advance. Keep up the good work.
Uli
is it just my download, or is the .js file missing all the line breaks making it insanely impossible to read?
Philip: sifr.js has been compressed and that’s why it’s impossible to read. There is another folder in the .zip file that contains the uncompressed source. Try that one.
Uli: Here’s how to export your .swf:
I’m noticing something weird in opera when I’m using an overflow div and replaceing the text. IE/Firefox correctly handle the overflow fine once the text is replaced.. but Opera decides to ignore the overflow rule and blasts all the text on the page. If I take off the replacement, the flow follows the correct rules.
http://www.xigaware.com/ - with replacement
http://www.xigaware.com/noflow.html - without it..
I don’t care much about opera, but I thought i’d post incase this is a bug.
One other thing .. is it possible to have 2 replacements side by side?
example Here is what we are talking about A & B would be replaced with different font .swf’s but remain along the same vertical path. This may be a limitaion of flash itself, but I thought I’d ask anyway.
Alexis,
Oh how i wish the problem were that simple :) I assure you I know how to write proper html… here’s a test page:
http://www.actsaustin.org/sifr_testcase.shtml
The link header in the content (”This is a test link…”) should anchor to the homepage. Clicking on it doesn’t seem to be working tho… I’ll plug away some more…
I second what Brian says, lol I just tried my contact us link in Firefox and it didn’t do anything either.. IE/Opera works fine.
Ok. Think maybe I’ve figured it out (at least somewhat). Re-exporting the swf file seemed to do the trick. I was previously using the old swf I exported for the rc1 version.
Anyway, it’s time to call it a day (and a year) - Happy New Years to all! To Mike, Mark, Shaun, Tomas, and co… kudos for the great work as always!
Brian, I downloaded your page and tested it with my own sifr.swf and the link seemed to work with no problem.
Glad you were able to fix that with a re-export (I wish I could type faster). I can only assume the same thing happened to Shaun as everything seems to be working fine on my versions of IE PC 5, 5.5, 6.0, IE Mac, Firefox PC/Mac, and Safari.
This version is better than ever, so thanks for that! Just one problem though, again - I can’t get sIFR to display Romanian characters!
Toma Tasovac mentioned that the Cyrillic character set was embedded along with the font. How do you do this? In the actual ‘Character…’ dialog box or in ActionScript.
I tried putting this code in ActionScript to no avail:
txtF = “\u0102\u0103\u015F\u015E\u0162\u0163″;
I also embedded the characters “ăĂţŢŞş” as part of the Font Outlines.
What am I doing wrong here? I’d higly appreciate any help because this is my only issue with sIFR - other than that it’s really great!
Bogdan,
you can chose the range of characters which you want to be embedded by clicking on the Character button in the Properties palette when customizing your sifr.fla file. For Romanian, you would then choose the appropriate Latin Extended range… Then you File>Export the movie and make sure that you’re using the name of your swf file in the replacement calls at the end of your html file. That’s all.
Shaun, I would call this an Opera bug. As for placing the Flash movies next to each other… try CSS.
Regarding the link problems, we changed the way links are passed to the Flash in RC2. This change also happened in the Flash files. Therefore, if you update from RC1 to RC3 without updating the Flash files it won’t work. Appologies for the confusion.
nice update once again, all we´re missing now is a built in tooltip function for links :)
wow… that’s the best resource that I’ve discover since I’m developing for internet… thanks a lot!!
So I know that it is not possible to adjust the leading of dynamic text in Flash, but does anyone know if this is something that will be added in Flash 8?
Also, has anyone found a workaround for increasing the leading with sIFR?
Toma, thanks a lot for your answer. I will try out what you said now and hope it will work. Again, thanks! Spasibo!
ok, I got the position working a little bit with css.. so that’s a good suggestion :)
Since there is no real further documentation I apologize if this is a basic question. But are there rules for control the size of the displayed text? If you click on my name you’ll see a different site.
The Harry potter text remains the same size whether I have the css as: font-size: 16px; or as font-size: 66px; Is this being adjusted in your sIfr files for the - attributes? or am I missing something to scale my font.
As no one else with true knowledge seems to have addressed Shaun G’s question yet:
I would suggest checking your CSS thoroughly to ensure you are not overiding your font sizes anywhere else in the cascade. Or in a user style sheet in the browser?
Checking everything again is nearly always the best solution when it comes to fixing sIFR problems!
Shaun, you could also play a bit with the line-height and height settings.
yeah I edited the font-size’s in the sIFR-screen.css for the h* styles and things changed correctly :) .. thanks for the help guys. Great Job on the sIFR!
Hey Mike et al.
I just upgraded from rc1 to rc3 and things work great on Mac Camino and Safari, as well as PC FireFox.
However, it does not seem to work great on IE 5.2 on Mac and IE 5.5 on PC.
on PC:
it shrinks the spot for flash down to about half the height as the text was and does not display the actual the Flash file.
on MAC:
it displays the flash text at the correct size, HOWEVER it also adds a variety of padding sizes to the bottom of the flash file.
Any ideas anyone?
Thanks
Update with a testing URL for you guys to look at to see the problem I am having.
http://www.mackie.com/products/tt24_newest/
Thanks for any help. I actually upgraded from sIFR 1 not sIFR2 rc1 >
–
Todd
Todd: Ah, that makes me feel a lot better. There have been a ton of changes between 1b and 2rc3, but not between 2rc1 and 2rc3. I suggest just re-exporting everything and re-implementing. While 2.0rc3 has undergone months of refinements and improvements, 1.0b was just a proof-of-concept.
Todd: I’m getting the same in IE5/Mac.
Lots of extra bottom padding on some replaced elements, but not all.
For me, specifying a larger font size fixes the problem, but I have no idea why this is. Probably a question for Mark.
Will continue experimenting and keep you posted.
I re-exported and cleaned up my code…and it appears as though it is all good on IE/PC but NOT IE/MAC.
Still looking into it.
mark/mike, any thoughts?
Thanks Andrew for making me feel like I am not insane >
(Editor’s Note: Yes. My thoughts are that IE/Mac sucks. :) Besides that, the best way to go about debugging size issues is to turn background colors on, just as you would in CSS/HTML. That way, you can see exactly what’s being replaced and what size it is.)
Great product, Mike and crew. Thx for your hard work.
I’m experiencing some discrepancies between IE6 SP2 and Firefox/NN7.2 in the way it’s displaying the generated flash headers. I’m only replacing one class — h3.storytitle — and it’s at a 24px font size. It’ll display fine in IE6, but in FF/NN it shows all of the titles in a range of fonts from what looks like 14px all the way up to 24px. I have the latest versions of all browsers and the Flash plugin. My padding in the style matches the padding set in the javascript call. Any idea why? Check the site at
http://www.paulmoment.com
Gracias.
Paul: Nice looking site you got there. Ok, here’s the problem. Look at this page as an example. In your sIFR headline, “Facelift for the site, Botox for the titles”, take note where the final “s” is compared to the word “drones” in the grey box below.
Now, disable javascript and take note of where the final “s” is. It’s way further to the right. This is where font tuning comes in. You need to get these locations as close to each other as possible using a decoy style. On your site, the decoy style is:
.sIFR-hasFlash h3.storytitle {
visibility:hidden;
}
So all you need to do is apply some negative letter-spacing in there and you’re golden. Something like “letter-spacing: -.7px” or whatever. When you’re trying to match it up, you might want to make your initial reads on the actual “h3.storytitle” class instead since that’s the class you see when you turn js off. Once you have that all tuned, just move the negative letter-spacing over to your decoy style (above).
Also, if you can’t match things perfectly, err on the side of your decoy text being a little narrower than your Flash text.
Thanks, Mike. I took your advice and Mark Wubben’s advice to play with the line-height settings as well, and I came up with the perfect combo. Took me a bit to wrap my head around the concept of why the Flash was sized so strangely, but I’m all pulled together now that I figured out it’s about sizing the h3 “container” to have the Flash scale well.
Great tool and gentlemanly assistance — you really are from Seattle… :)
Todd, Andrew, I agree with Mike here that IE/Mac is one hell of a buggy browser. Play a bit with the CSS… that’s all the advice I can give you.
P.S. Mike, the notification is working now! Reading the discussion here is much easier though ;-)
hi guys, thanks for the advice.
Agreed Mark/Mike IE5/Mac sucks. The weird part is that it works with the old version of sifr… version 1.
http://www.mackie.com/products/tt24/index.html
Where the new version works great on everything except IE5/Mac.
At this point it looks like it may be a CSS issue, but the extra space ONLY shows up after the replacement.
link to the new sifr2 RC3 version.
http://www.mackie.com/products/tt24_newest/
Thanks
Is this legal? I’m just wondering about the font copyrights. Since you’re not legally allowed to redistribute ttf’s are you allowed to distribute equivalents? Even if you purchased the fonts from Adobe (or whomever) wouldn’t you still be violating the font license?
(Editor’s Note: When you deploy sIFR, you should use the domain-locking feature so that the .swf file only works on your site. By doing this, you are not distributing a file that anyone can use for anything. In this scenario, it isn’t much different than saving a headline out as a .gif and displaying it, in my opinion. That said, there hasn’t been any sort of response, positive or negative, from type foundries about sIFR. This is good. One other great thing about sIFR is that it lifts out so easily that were there to be a problem, you could eliminate sIFR on your site in about 10 seconds.)
Hi Mike.
Thanks for the advances with this technology. It is really cool!
I have a couple of questions/comments.
1. Other languages, Unicode (UTF-8) Support. It appears that flash movies produced do not allow other languages (even if the Unicode font is selected and Unicode encoding is used).
2. floats are not very well behaved. Example: “main” content div is not float and is flexi and the side bar is floating to the right/left and with fixed width. Then replaceable text (flash object)’s width is set to the width of the whole div, ignoring float. I know there is little to do as I believe that’s what JavaScript gives you. Just noting it here. It is normally possible to fix it by changing CSS layout.
I am not sure I have read all previous comments and similar comments may have already been published.
Anton, if I recall correctly Flash MX doesn’t export the Flash file with UTF-8 very well. Not sure anymore, though, I’ll let Mike confirm that one :)
About your float problems, without being able to look at the page which is causing these problems I can only say that you should play around with the decoy styles so you can fix the width.
Hi
Thanks for the reply.
I have found the following. May be of interest to you guys:
http://www.macromedia.com/support/flash/languages/unicode_in_flmx/
http://www.macromedia.com/support/flash/languages/unicode_in_flmx/unicode_in_flmx03.html
Regards
Anton Koukine
Hi
Thanks for the reply re Unicode. I have found the following links which may be of interest to you guys:
http://www.macromedia.com/support/flash/languages/unicode_in_flmx/
http://www.macromedia.com/support/flash/languages/unicode_in_flmx/unicode_in_flmx03.html
Regards
Anton Koukine
I’m running Windows XP and having trouble getting transparency to work in Opera 7.54. Is this a known issue?
Adam, Opera 7.54 does not support transparency, therefore sIFR falls back to the background color you specify (which obviously shouldn’t be transparent).
Thanks Mark.
The js can be cut down with another 1 or 2K, improving the performance as well (although that will only be milliseconds); I’ll give it a run-down when you’re interested :)
Does it make any sense that execution would seem a bit slower if named arguments are used? It’s most noticeable on Opera, which has the slowest JavaScript interpreter I’ve ever seen.
Adam, the effect of named arguments is neglectable. However, Opera is very slow rendering the Flash, it already was so in the earlier betas.
Thanks again, Mark. :-)
One of the coolest things I have seen except for one small problem.
The background is green when sWmode is set to transparent in MacIE 5 in classic with the latest Flash plugin installed. I used sIFR RC3 which is the latest version. All other browsers work great though. Unfortunately IE 5.1.7 is the last decent browser for Mac OS 9 and many people still uses it. :-(
//Rob
Rob, thanks. I’ll fix it.
Rob: I may get flamed for saying this, but I’ve chosen to regard people using IE on Mac OS (even on OS 9) the same way I regard people using Navigator 4.x or IE $800 eMac is an inexpensive option for this), I’d suggest Yellow Dog Linux and the Gnome environment. Gnome has become increasingly Mac-like, and Yellow Dog can run Classic Mac OS in a compatibility environment. Yellow Dog is compatible with PowerPC G3 or better systems, and comes with a recent version of Mozilla.
Hope this helps.
Thank you for this wonderful product!
I think I’ve discovered a strange but very annoying bug however.
Take a look at the example page with “/index.html#” added.
Notice the browser window title: “sIFR######”, seems to be 1x# per font instance.
I’ve just tried to upgrade to RC3 but still the same - I am using IE6.0, have not had time to test on Opera or FireFox.
Anyone seen this before?
Has someone successfully exported from Flash MX Pro? If you have, what EXACTLY are the export settings? I cannot get transparency or a correct font size to work in either IE 6 or FF 1.0
Update on #85: FireFox does not seem to have this problem.
FYI,
When I used @import instead of link rel to call my css, sIFR would not work in IE5/WIN.
When I put the replacement calls at the bottom of the sifr.js file instead of in the html, sIFR would not work in Netscape 7/WIN.
In both cases the headings I was replacing became hidden, but the flash file was not inserted.
Has anybody else seen this behavior? Is there a way to put the replacement calls in the .js file and still coax NS into executing them? I prefer that so I don’t have to have the code in every html on my site. I’m really squeezing for bytes.
Muleskinner, believe it or not but this is a bug in IE! I once reported it to the IEBlog team, but I think I’d better resubmit the bug again.
Kris, this is a bug in IE5 I think. As found on Bug Report IE5.x treats imported print stylesheets as screen stylesheets, thus hiding sIFR. As for the other problem, I have no idea. Perhaps you could show us a testcase?
Hey there guys, great work. Again!
One thing; uppercase doesn’t work on accented characters…
Don’t know if it’s a problem with Flash itself…
It’s not a problem with Flash, I’m partially answering my question while posting it! ;-)
The upper or lower function is in the js. The upper works on a windows pc but not on my Mac (Safari).
Wait a minute, it works in FireFox on Mac…
Ok, here’s a partial answer to the problem:
-Safari has a problem with toUpperCase in JavaScript when it has to deal with accented characters (eg: éàî)
-FireFox does it fine on any platform
-IE is ok on Windows and Mac
Can anybody test Opera?
Here’s the URL : http://dap.egzakt.com/fr/marches/. If you see MARCHÉS in the orange header, everything’s fine. If not, you will see MARCHS.
Thanks!
Anybody have suggestions for another way that would work with Safari to uppercase characters?
ElRocco, it’s a problem with the browser… as you’ve seen some browsers don’t uppercase reliably. Nothing we can do about it.
ElRocco: The accented character appears in opera, but you have a bright green background behind your text.
I suggest using the background color capabilities of sIFR and setting a color as close as possible to your background image. I did this by taking the color of a 10×10 sample of by background image. Fortunately my background was subtle enough that you can hardly tell the difference. You may have to change the pattern in your background image to make this work for you.
ElRocco, you’re still using RC2 on that page… please update to RC3 and enjoy the benefits of better transparency support through or fallback mechanism!
This is great work!
One small observation though; if you disable style sheets (I did so using the developers toolbar in Firefox) the flash replacement text is displayed as well as the original html text.
Is there anyway this can be prevented?
Jay, no. And aside from us webdevelopers, who will ever disable CSS?
Well, I think Opera has a disable style sheet option amongst it’s various style sheet preferences. It’s fair to assume that users with a lower level of colour perception may turn off style sheets given the chance; and who’s to say that other browsers won’t follow suit by offering this option in the future?
A very small minority, but surly the essense of web accesibility is providing the same content to those specific minorities.
That said, we’re only talking about a repeated headline here, this is by no means a show stopper nor a crime against accessibility… but a small trade off for a great development in web typography. Commendable work! I’m sure continued discussion and testing will improve it even further in future versions.
Jay, well, even if we wanted to, we can’t detect wether CSS is enabled or not. And in your specific case, detection wouldn’t have helped at all as you (probably) disabled CSS ater loading the page.
Does anyone know if it is possible to set the sIFR text field to align = justify?
About the netscape thing,
Copy the replace calls from the end of index.html, and paste them into the end of sifr.js (sans the containing script element).
It will work in IE5/WIN, IE6/WIN, Firefox WIN, Safari, and even IE5.2 MAC, but not in Netscape 7.1 WIN. I didn’t test opera.
I went ahead and uploaded a test case at http://www.kr15.com/sifr/
Kris, thanks, I’ll have a look.
Jay, I believe the only way to do this is to hack the Flash file to control kerning. Mike told me it was impossible to control this via the JavaScript calls.
I am pulling my hair out trying to get sIFR to work at all. I believe I have followed the instructions to the letter but to no avail.
Quite simply the dynamic text in my SWF file is not changing, I get the “Do not remove this text.” line, in both Firefox and IE under Windows.
I don’t believe it is an error in the HTML, as if I use the tradegothic.swf that comes in the bundle, it works fine. I haven’t change anything in the .as and .fla files, etc. I am testing in a folder with all the supplied files so nothing should be missing.
Basically, this works:
sIFR.replaceElement(”h1″, “tradegothic.swf”, “#000000″, null, null, null, 0, 0, 0, 0);
This doesn’t:
sIFR.replaceElement(”h1″, “test.swf”, “#000000″, null, null, null, 0, 0, 0, 0);
Where test.swf is generated by strictly following the readme.txt file.
Any pointers how to even begin to debug this problem?
Kim: Hmm, sounds like it’s definitely a problem with the exporting of the .swfs. If you double-click a .swf after you’ve exported it, you shouldn’t see the “Do not remove this text” line. You should see “Please pass in your text” in the correct font you have chosen.
Are you using Flash MX or Flash MX 2004 to export? I’ve heard of some problems with Flash MX mangling some of the .as files… particularly, it can mangle the opening commented out text in the .as files. Try this: when you export, do “Test Movie” (from Flash) instead of “Export” and see if an error window pops up.
I am trying to use sIFR on my site for titling as well as the navigation. The titling worked great, but I’m having trouble with the unordered list I’m using for the navigation. It appears when sIFR is applied to an <a> element it becomes unclickable. I tried applying it to the <li> element but my nav has two levels thereby (nested lists). I’ve tried adding .navitem and .subnavitem classes to the <a> tags, but that just caused the text to not show up at all.
Has anyone else tried using sIFR in this way?
Brian, sIFR replaces the text inside the elements you apply it to, therefore it only replaces the link text, not the link itself. Wrap the link in a span and replace that instead.
I’m having an issue where the “lazy scaling” is detecting the height of my h* elements and setting the font size accordingly. The only problem is that my h* elements have a background image that is 32 pixels high whereas the font is supposed to appear as 15px.
Am I missing something here? Is there a way to specify the font size without it reverting to the height of the element?
David, if you wrap the text in a span you can replace that one. Then, if you use sWmode:”transparent” you’ll still see the background through the text. Note, however, that this isn’t supported in Safari with Flash 6, old Mozilla/Netscape browsers and Opera 7.5 and below, nor on Linux.