Here’s a quick overview of what’s changed between revision 209 and 229:
Automatic ratio approximation.
The font size does not correspond directly to the height of the Flash movie. The relation between the font size, the number of lines and the height of the Flash movie is called the ratio. By defining ratios you’ll stop the Flash movies from abruptly resizing, or at least you’ll be able to lessen the impact. You can now use
sIFR.debug.ratios()instead ofsIFR.replace()to find an approximation of the ratios. For more information see Ratios.Fixed leading for single-line text.
If you had specified leading, and the text would occupy only one line, the Flash movie would still have the leading applied. This is now fixed. (Thanks, Marty Stake!)
Fixed stuck hover effect (except for Opera).
The hover effect for links inside the Flash movie would get stuck if you moved the mouse away too quickly. I’ve implemented a workaround, which works in Firefox, Safari and Internet Explorer. No luck in Opera so far.
Fixes the movie in Internet Explorer after it’s HTML has been reset.
If you change the
innerHTMLof an element which contains sIFR movies, the text inside the movies would get lost. This is due to a bug in Internet Explorer. With the Flash-to-JavaScript callbacks I’ve been able to implement a workaround. As this problem exists in sIFR 2.0.2, this is yet another reason to switch to sIFR 3!Improved callbacks, callback access.
Flash-to-JavaScript callbacks have been improved. You can now get a reference to a callback object, which for example will let you change the text inside the movie.
Domain control is now the same in Flash as in JS.
You can now use the same value for
sIFR.domainsin the document and inOptions.as.Hide movies until rendered
There’s now a
sIFR.delayCssoption which will hide the Flash movies until they have finished rendering. It is only supported in Firefox and Safari, and it’s a bit of a risky setting. In Internet Explorer and Opera the callbacks don’t work if the Flash movie is hidden, in the future this might be the case for Firefox and Safari as well. Use with care.As a bonus: as of revision 230 the Flash movies will show their revision
If you open the Flash movie directly it’ll show it’s revision number. This is an easy way to verify the version of your Flash movies.
And to conclude with some cool news: Ethan Marcotte, designer and CSS wizard, will be making a really flashy sIFR demo. Thank you Ethan!
You can download r230 and subsequent versions from the nightlies.
Mark –
I’m getting the following error when I try to export the flash movie:
Error C:\downloads\sifr\sifr3-r229\flash\sIFR.as: Line 96: There is no method with the name ‘flashBug’. private static var console = new flashBug(false);
Total ActionScript Errors: 1 Reported Errors: 1
I’m using Flash 8 Professional, exporting Flash Player 8, Bottom up, ActionScript 2.0. Anything I’m missing?
Thanks,
Isaac
My bad, there was a problem with the script which builds the nightly. r230 should be fine.
Hmm… Now 2 new errors:
Error C:\downloads\sifr\sifr3-r230\flash\SifrStyleSheet.as: Line 20: The name of this class, ‘SifrStyleSheet’, conflicts with the name of another class that was loaded, ‘SifrStyleSheet’. class SifrStyleSheet extends TextField.StyleSheet {
Error C:\downloads\sifr\sifr3-r230\flash\sIFR.as: Line 20: The name of this class, ‘sIFR’, conflicts with the name of another class that was loaded, ‘sIFR’. class sIFR {
Any thoughts?
Not seeing that problem here (I’m on a Mac). Try rebooting your machine.
Ok. When I get a chance to reboot, I’ll do so and let you know.
Thanks for your help, and for a great tool.
Hi Mark, I’m still getting a sticky hover effect (PC XP, all browsers)… is there something specific I have to do to fix it? Or should the workaround you mentioned fix it automatically?
Also just wanted to say, thanks for this great tool / app / piece of work!
Mark -
The reboot seemed to do it—weird. Anyway, thanks!
Isaac
Hi, I found something that I wanted to share. When selecting sIFR text inside the flash movie it seems to be slow and jerky. Solution: Open up the .fla file and increase the frame rate to about 31 fps.
James, thanks. I just installed Firefox on the Windows test box and I’m seeing issues as well. IE is fine though, which is odd.
Ryan, good idea. I’m a bit worried about CPU usage, but I’ll see what I can do.
hi, i’m still trying to get past this wmode ‘transparent’ tripping up the pop-up blocker in IE7. i’m not sure if this is the place to ask. but could you put this in as a feature request?
btw, this stuff is awesome!
Byron, what’s that issue you are talking about?
Hello, I would like to put some texts between tags. Does this version of sifr support this formatting ? Should I put something special in the flash movie ?
What exactly do you mean?
sorry html tags dont pass… I was saying : Hello, I would like to put some texts between SUP tags.
No, Flash doesn’t support that so sIFR doesn’t either.
So it’s impossible to show superscript number with flash ??
Yes, it’s impossible. Although you could make the font size smaller, but that doesn’t really help.
If you embed the superscript numbers in the sIFR flash file before exporting it will work… I have it working using ² on a couple sites. Although, I have only used a superscript 2. It should work for 1, 2, and 3 using &sup(x), and the character codes for the rest.
Marty’s right, actual superscript characters should work.
I don’t understand. Should I add in the .fla an embedded character ? I’ve tried adding &sup(e) because I want -e- as superscript and then putting e between , but it don’t work. I’m a beginner in flash. Could you explain me more in detail what I should do ? thank you for your help.
I am having problems with GradientGlowFilter. It doesn’t seem to work on the latest revision. Any particular reason? In fact I can’t seem to get any response from GradientGlow or GradientBevel but I am not having problems with Glow or DropShadow. Any ideas?
sIFR.replace(times, { selector: ‘h2’, wmode: ‘transparent’, css: {‘.sIFR-root’: {‘color’:’#FFFFFF’,’letter-spacing’:1,’text-transform’:’uppercase’,’font-style’:’italic’,’background-color’:’#000000’}}, filters: { GradientGlow: { type: ‘full’, distance: 0, strength: 255, angle: 90, quality: 1, alphas: [1,1], colors: [‘#FF00FF’,’#00FF00’], ratios: [0,255], knockout: false } } });
Paul, are you saying it worked with a previous version? I’ve never tried it myself…
I will investigate it with a bit of testing on Monday. Will let you know if it worked previously.
I was using v2 until about two weeks ago when i decided it was time to play with v3
So, Rev. 229 has some issues and some people are saying to get the Rev. 230 Where do I find that release ? http://novemberborn.net/sifr3/r230 seems invalid.
Then I use sifr 2.0 how painfull will be the transition to 3.0? Do I need to force my clients to have Flash 8 plugin. Any comments are very much welcome.
Much appreciated!
I think I found the midnight releases http://dev.novemberborn.net/sifr3/nightlies/
Still look for some comment on second paragraph! Thanks!
You’ll have to re-implement sIFR on your site, starting from scratch with sIFR 3. If the client does not have Flash 8 or above sIFR will degrade gracefully to normal text, just as sIFR 2 does in case Flash 6 or above is not present.
Thanks Mark! How about trabsparent background ? In 2.0 I’ve used sWmode. Is there a transition document/wiki ?
The
wmodeproperty can be found under JavaScript Methods. There isn’t an upgrade tutorial yet, but of course you’re free to start one on the wikiI found how, here for other lost souls…
sIFR.replace(bastardus_sans, { wmode: ‘transparent’, selector: ‘h1’ ,css: [ ‘.sIFR-root { text-align: left; background-color:red; font-weight: bold; font-size: 18px;}’ ,’a { text-decoration: none; }’ ,’a:link { color: #000000; }’ ,’a:hover { color: #CCCCCC; }’ ] });
Lovin’ v.3!
Haven’t figgered this one out though: I have a horizontal list used for top-level navigation. sIFR 3 is working great down the left side child lists, but because it’s behaving like a block item I can’t make it display inline. Any ideas how do this or is sIFR good for block display only?
Yes, I’ve tried adding “display:inline” into the .sIRF-root class in the config.js.
Thanks mucho grande!
Mark: Great job with v3—it rocks!
Paul E: What about using float: left; for the li-elements instead of display: inline;?
The
.sIFR-rootclass is internal to sIFR. You’ll have to target the.sIFR-flashclass in regular CSS in the document itself. Also setsIFR.fitExactly = true;to make it fit a bit better.first: i’m sorry for my bad english
at first: i love sIFR. really. but it doesn’t work at Netscape 7.2 on PC. Every Page with sIFR crashed. I am the only one with this Problem?
Soophie, best to discuss this in the forum. I’ve got a ton of questions to nail down such a problem but this weblog isn’t quite the best place to do that
Thanks!
@Mark Wubben: Perfect! That’s exactly what I was looking for. Thanks a heap!
@Leon: Great idea, but it needed to be aligned in the center and that would’ve made it align to the left. Thanks!
font-variant:small-caps; ???
Flash doesn’t support small-caps.
Hi,
Could you tell me if it possible to use SIFR on the same page as Mootools? I’m trying to use it and getting Javascript errors – so I assume perhaps they are conflicting. Can you tell me if this is something that has been fixed in recent releases (I’m still using v2)?
Thanks
Should be. What kind of errors are you getting?
how strange – after implementing Mootools again on a site with SIFR to test, it seems to be working OK. Oh well, one less problem to fix!
hey ethan, where’s that new demo!?!
Judging from the comments on this post, I’d say it might be about time to get a real bug tracker for sIFR. I’ve been tickled pink by Lighthouse. And no, I’m not an affiiliate, just a happy customer
http://lighthouseapp.com
Regarding the sIFR 3 (rev 250) print stylesheet: It seems that the class ‘sIFR-flash’ is no longer applied to the swf, and instead ‘sIFR-replaced’ is applied. Therefore, to ensure your documents print correctly I suggest you use these classes in sIFR-print.css:
.sIFR-replaced object, .sIFR-replaced embed { display: none !important; height: 0; width: 0; position: absolute; overflow: hidden; }
.sIFR-alternate { visibility: visible !important; display: block !important; position: static !important; left: auto !important; top: auto !important; }
My apologies if this has already been spotted.
Hmm, that shouldn’t be the case. Can you reproduce this with the latest revision? What browser etc are you seeing this in?
Hi Mark
I have a question regarding sIFR and font-sizes in “em”: Is there a chance that sIFR will support scaling of the font-size if they’re set in “em” and I change the font-scaling in my browser?
Thanks and best regards
jr
That should work just fine.
Hi,
I can’t figure out how to get the demo to work for sIFR 3 rev274…none of the text is sIFRing. Shouldn’t the demo just work when I open demo/index.html?
Hey Mark,
I’ve been using sIFR for quite some time now and love it immensely. Thank you for all the hard work!
I’d like to second the request by JR about font scaling. I’ve recently come across swfIR which is based on the same principles as sIFR but for images. I’m really impressed by their elasticity feature, see http://www.swfir.com/examples/elastic/. If you do Ctrl “+” or Ctrl “-” the header image resizes without the need of a page refresh. I’m not sure how they do this and whether it could be something that sIFR could adopt? This is the single feature I crave for in sIFR at the moment.
Thanks again for this great tool!
Chris, not when you open it directly from the hard drive. Due to Flash security restrictions you need to open it from a web server.
Caphun, swFIR’s resizing is actually rather easy to do, as the ratios of the image remain the same. For sIFR this is not the case, the text has to reflow. Doing this is pretty difficult and very reliant on browser behaviour. As such, it’s not going to be included in the 3.0. I’ll try to make sure someone can write an extension for it though.
Hi Mark,
I cannot figure out how to use multiple colors within one element. Can you tell me what I’m doing wrong…
Here is the page I am working on: http://www.sas.com/technologies/bi/biindextestcraigsifr3.html
This is what I want it to look like: http://www.sas.com/technologies/bi/query_reporting/index.html
I can tweak the layout, but can’t get “Technologies” to be show up in grey…
Thanks for providing such a great tool! This will be a big timesaver for our graphic designers. We are really excited about rolling this out across our site.
We already use an earlier version on some of our pages, but the header breaks onto two lines when you print:
http://www.sas.com/news/preleases/061407/news1CRMExcAward.html
Hi Craig, could you run the question through the forum? It’s more suited for support questions than this blog post. Thanks!
There is absolutely NO sifr-config.js file in the zip file. So how are you supposed to complete the full setup?
I just checked, and it’s there. And if it’s not, you can create it. It’s an empty file anyway.
Hi Mark!
I also second requests on sIFR font scaling on Ctrl+
When it’s not scaled, it breaks layout on resizing. That’s the real reason why it should scale.
A lot of people would be happy if you, or Caphun could adopt swfIR for sIFR3.
sIFR 3 by default sets a 100% width on the Flash movies, so it shouldn’t break the layout. Does this work for you?