JavaScript Flash text using MooTools 1.2 and SiFR.fla
Wednesday, August 27th, 2008 in Mootools
I suck at flash. Well, maybe not quite suck ( I started learning FLEX ) but I’m not that proficient yet. Luckily this guy knows what he’s doing . I absolutely love what he’s done with SiFR. And, as I stated in previous posts on this blog, I also love MooTools. So I thought to give it a try and mix the two. Keep reading to see what I’ve achieved.
Please note that the script below works only with sIFR 2.0.7.
For those of you that may not know, SiFR is a very clever way to substitute HTML titles (h1, h2…) with pretty looking flash titles right after the page loads. Brilliant idea giving the fact that pure HTML titles look like crap no matter how much styling you put on them. What you do is basically take the SiFR.fla source file, embed in it your own font, generate the .swf file and start using it.
Giving the fact that I almost exclusively use MooTools in my projects, I thought it would be a good idea to use the swf file generated with the .fla source from SiFR and do all the JavaScript replacing work with MooTools. So, here goes the whole script:
var Site = { start: function(){ Site.titles(); }, titles: function(){ var titles = $(document.body).getElements('h1,h2,h3,h4,h5'); var valid_titles = titles.filter(function(elem){ return elem.get('rel')!=='skip'; }); valid_titles.each(function(title){ var text = title.get('html'); var dimension = title.getSize(); var styles = title.getStyles('text-align', 'padding-top', 'padding-bottom', 'padding-left', 'padding-right', 'font-size','color', 'padding-left', 'line-height'); var swf_width = dimension['x'].toInt() - ( styles['padding-left'].toInt() + styles['padding-right'].toInt() ); var swf_height = dimension['y'].toInt() - ( styles['padding-top'].toInt() + styles['padding-bottom'].toInt() ); var obj = new Swiff('vandenkeere.swf', { width: swf_width , height: swf_height , container:title, params: { wmode: 'transparent' }, vars: { txt: text, w: swf_width , h: swf_height , textalign: styles['text-align'], textcolor: styles['color'], offsetTop: styles['padding-top'] } }); }) } } window.addEvent('load', Site.start);
This code gets added into the head section of the HTML file or if you prefer, into a separate .js file. It basically scans the page looking for heading tags and replaces them with the flash version. In case you need a tag not to be replaced, you add to it a rel=”skip” parameter like so:
<h1 rel="skip">This title will not be replaced</h1>
As you can see, you’ll be using the Swiff class added in MooTools 1.2 so we don’t need to use SWFObject. The parameters that are send to flash are txt (the HTML text that will be displayed), w ( the width ), h ( obviously, the height ), textalign, textcolor and offsetTop.
That’s all you need to do. No more external CSS file to format the SiFR titles or any of that. You simply style your HTML the way you want and those styles are send automatically to flash.
If you need to replace other elements, you need to change this:
var titles = $(document.body).getElements('h1,h2,h3,h4,h5');
into this:
var titles = $(document.body).getElements('some_other_tag, some_other_tag.only_this_class');
For more info on selectors, please see the MooTools 1.2 documentation available here.
Related posts
Was this useful? Show your support.
23 comments
This is really nice thanks, would you happen to know what are the differences between sifr 2 and 3? It’s really weird but I can’t open the sifr 2.0.7 fla in Flash CS4
Here is a discussion about your problem. Look in the post comments.
Hi
This code is very very nice. Great work. I do seem to have one problem though. I can’t use another font…
When I use another font I always get the problem: “Rendered with Sifr XXX”
I have tried exporting new swf font files but still stuck.
I remember I could override this problem with the normal sIFR by adding this to my inline js:
sIFR.VERSION = ‘382′; (or any other version number)
Any ideas on how to fix this?
Thanks in advance!
Try changing this line:
var obj = new Swiff(‘vandenkeere.swf’, {
with
var obj = new Swiff(‘MY_OWN_SWF_FONT_FILE.swf’, {
Please provide a link to an example file if this doesn’t work.
Thanks for the very quick reply
I have changed that line. The .swf file is found but the text is not being injected. I had the very same problem with the normal sifr because the sifr-javascript was another version than the .swf file. I think it has to do with the version/exporting of the swf file.
Here’s the problem: http://themethe.net/swiff/test.html
With the normal sifr I could use this line to solve the problem: sIFR.VERSION = ‘382′; (or any other version number)
Thanks in advance,
I assume that you used sIFR 3, not 2.0.7. In case this is true, the variables in Flash are changed, this is the reason you can’t see the injected text and instead you see the default text.
The variables are passed to flash by this code:
vars: {
txt: text,
w: swf_width ,
h: swf_height ,
textalign: styles['text-align'],
textcolor: styles['color'],
offsetTop: styles['padding-top']
}
This means that the variable in flash that holds the text injected is txt. In sIFR 3, the variable is called content. I didn’t figured out the rest of the variables. I’ll take a closer look to this and try to add an update by the end of the week.
You can safely use the sIFR 2.0.7 .fla file without changing the JavaScript is this example.
Ah ok that explains the problem, thanks again for the fast reply.
Hi,
I want to change font face but I can’t. Please help me.
Hi,
and please tell me from where I can download fla
Hi,
To download the source .fla, click here.
To visit the sIFR homepage, visit this address: http://www.mikeindustries.com/blog/sifr/. You can find all the instructions needed to change the .fla source file with your own font.
Hi there,
I come with a question: Is there any way to make your script support the CSS line-height instructions?
Thanks for all!
Hi,
The script allows you to use line-height in an indirect way. When the Swiff call is made, the script sends the width and height of the element replaced and displays the swf replacement file according to those dimensions.
Hello,
I have recently tried this script and it works just perfect only in Firefox….
IE has problems with the css. It won’t change my Flash text in, for example, color white or font-size. Is this a known problem?
Regards
Not really. Please provide a link with an example.
Here’s the link:
http://ijslandse-hond.ldehaan.com/nieuw/nl/homepage.htm
I think this might be the problem:
h1 {
color: white;
}
try
h1 {
color: #FFFFFF;
}
Hello
I was wondering whether there are any news on sIFR 3 – did you guys get any further in using it with Swiff?
Thanks
No, never tried the new sifr3 with moo. Do you have knowledge of someone else trying moo with sifr3?
hi there
this is awesome script!
thanks for it.
How can I enable this to support Asian characters ? With Korean language, it is all empty.
Cheers :)
Not really sure. I know I’m not very helpful but try asking on sIFR website. I only managed to combine the two ( moo and sifr ), I’m not that skilled when it comes to flash. Anyway, if you find the solution I would appreciate if you could drop a comment here and let us know.
Thanks for this, looks like it too a bit of work too!
[...] sIFR & MooTools 1.2 – Wrapper/Plugin for MooTools to use sIFR [...]
Leave a comment