sIFR 3: Revision 229

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 of sIFR.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 innerHTML of 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.domains in the document and in Options.as.
Hide movies until rendered

There’s now a sIFR.delayCss option 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.

link | sifr3 | 25 February 2007, 23:17

Comments

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

Isaac | 26 February 2007, 15:49 | link
My bad, there was a problem with the script which builds the nightly. r230 should be fine.

Mark Wubben | 26 February 2007, 17:50 | link
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?

Isaac | 26 February 2007, 18:43 | link
Not seeing that problem here (I’m on a Mac). Try rebooting your machine.

Mark Wubben | 26 February 2007, 21:44 | link
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.

Isaac | 26 February 2007, 23:12 | link
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!

James | 27 February 2007, 12:38 | link
Mark -

The reboot seemed to do it—weird. Anyway, thanks!

Isaac

Isaac | 27 February 2007, 16:05 | link
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.

ryan | 27 February 2007, 19:03 | link
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.

Mark Wubben | 27 February 2007, 20:52 | link
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 | 28 February 2007, 22:10 | link
Byron, what’s that issue you are talking about?

Mark Wubben | 28 February 2007, 22:44 | link
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 ?

maa | 5 March 2007, 12:50 | link
What exactly do you mean?

Mark Wubben | 5 March 2007, 12:52 | link
sorry html tags dont pass… I was saying : Hello, I would like to put some texts between SUP tags.

maa | 5 March 2007, 12:57 | link
No, Flash doesn’t support that so sIFR doesn’t either.

Mark Wubben | 5 March 2007, 13:06 | link
So it’s impossible to show superscript number with flash ??

maa | 5 March 2007, 13:30 | link
Yes, it’s impossible. Although you could make the font size smaller, but that doesn’t really help.

Mark Wubben | 5 March 2007, 13:36 | link
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 Stake | 5 March 2007, 17:12 | link
Marty’s right, actual superscript characters should work.

Mark Wubben | 5 March 2007, 17:21 | link
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.

maa | 8 March 2007, 01:32 | link
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 Connolley | 15 March 2007, 15:04 | link
Paul, are you saying it worked with a previous version? I’ve never tried it myself…

Mark Wubben | 17 March 2007, 17:29 | link
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

Paul Connolley | 18 March 2007, 04:18 | link
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!

MC | 18 March 2007, 17:23 | link
I think I found the midnight releases http://dev.novemberborn.net/sifr3/nightlies/

Still look for some comment on second paragraph! Thanks!

MC | 18 March 2007, 17:26 | link
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.

Mark Wubben | 18 March 2007, 18:40 | link
Thanks Mark! How about trabsparent background ? In 2.0 I’ve used sWmode. Is there a transition document/wiki ?

MC | 18 March 2007, 19:27 | link
The wmode property can be found under JavaScript Methods. There isn’t an upgrade tutorial yet, but of course you’re free to start one on the wiki :)

Mark Wubben | 18 March 2007, 21:36 | link
I 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; }’ ] });

MC | 20 March 2007, 03:44 | link
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!

Paul E | 22 March 2007, 02:14 | link
Mark: Great job with v3—it rocks!

Paul E: What about using float: left; for the li-elements instead of display: inline;?

Leon | 22 March 2007, 09:06 | link
The .sIFR-root class is internal to sIFR. You’ll have to target the .sIFR-flash class in regular CSS in the document itself. Also set sIFR.fitExactly = true; to make it fit a bit better.

Mark Wubben | 22 March 2007, 13:43 | link
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 | 22 March 2007, 16:28 | link
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 | 22 March 2007, 20:42 | link
@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!

Paul E | 23 March 2007, 00:41 | link
font-variant:small-caps; ???

Paul E | 11 April 2007, 21:26 | link
Flash doesn’t support small-caps.

Mark Wubben | 12 April 2007, 06:40 | link
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

Andy Smith | 17 April 2007, 16:02 | link
Should be. What kind of errors are you getting?

Mark Wubben | 17 April 2007, 21:17 | link
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!

Andy Smith | 18 April 2007, 14:59 | link
hey ethan, where’s that new demo!?!

Paul Irish | 24 April 2007, 20:56 | link
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

Jed Hurt | 12 May 2007, 00:28 | link
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.

Mark C | 16 May 2007, 17:34 | link
Hmm, that shouldn’t be the case. Can you reproduce this with the latest revision? What browser etc are you seeing this in?

Mark Wubben | 16 May 2007, 19:54 | link
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

jr | 8 June 2007, 08:15 | link
That should work just fine.

Mark Wubben | 8 June 2007, 16:54 | link
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?

Chris | 13 June 2007, 17:14 | link
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!

Caphun Ung | 13 June 2007, 17:47 | link
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.

Mark Wubben | 13 June 2007, 22:41 | link
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

Craig | 15 June 2007, 21:14 | link
Hi Craig, could you run the question through the forum? It’s more suited for support questions than this blog post. Thanks!

Mark Wubben | 15 June 2007, 21:22 | link
There is absolutely NO sifr-config.js file in the zip file. So how are you supposed to complete the full setup?

Bob | 19 June 2007, 00:30 | link
I just checked, and it’s there. And if it’s not, you can create it. It’s an empty file anyway.

Mark Wubben | 19 June 2007, 07:43 | link
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.

takeshin | 21 June 2007, 13:07 | link
sIFR 3 by default sets a 100% width on the Flash movies, so it shouldn’t break the layout. Does this work for you?

Mark Wubben | 22 June 2007, 20:36 | link

sIFR 3: Revision 229

Comments

Novemberborn: Extra

About the author

Go to

Jobs (NL)

Please donate

sIFR Documentation

Subscribe

Prev/next

Recent articles

Recent comments

Other