Introducing swfIR

I’m a rule breaker… and when other people break rules in the name of good design, I stand up and applaud.

That is why, I’m happy to point Mike Industries readers to a new creation by Messrs Dan Mall, Jon Aldinger, and Mark Huot: swfIR.

“But I already have a swfIR!”, you say. “I use it to shine my beautiful linoleum floors.”

This swfIR isn’t a disposable mop, though. It’s a new Flash replacement technique in the tradition of sIFR. While sIFR uses Flash to replace boring browser text with interesting custom-rendered Flash text, swfIR uses Flash to replace boring browser images with more interesting custom-rendered Flash images. So instead of settling for plain, rectangular jpegs and gifs, you can now apply borders, rounded corners, shadows, opacity, and more to your images… dynamically, without having to edit your images or muddy up your beautiful code.

Flash for images?

I can hear screams coming from the ivory towers where the validatorians and standardistas live. I like those screams. I live for those screams. I will sleep well tonight with thoughts of prettier imagery on the web.

Like this entry? You can follow me on Twitter here, subscribe via email here, or get the RSS feed if that's how you roll.

99 Responses:

  1. Can anyone say hell on earth?

  2. Alan H says:

    @Kyle: I can say hell on earth. I can even type it, but why? Does this concept bother you, or are you referring to Lynn’s comment?

    With the ‘longer load’ issue, is this indeed an issue? I think Lynn is used to the stigma that Flash carries with it — the typical “when i land on a site with flash, I get the loading bar…”

    It’s not the fault of Flash, but rather Flash is loading all of the images, sounds & data necessary to proceed. You likely know this already, but really WOULD it take any longer to load a single image into swfIR than to load the ‘raw image’? Measurable — maybe, but noticable?

    I’m more questioning than throwin’-up gang signs.

  3. Tony says:

    Just mentioning this incase you haven’t heard of it (perhaps you have and it isn’t feasible), but Google Wild Blue satellite broadband.

  4. Don says:

    So will it do a slideshow? I’m not seeing that it does.

  5. Alan H. says:

    No slideshow.
    Search for ‘slideshow pro’ or if you’re a DW user look for ‘XML slideshow v.3’ . Not sure if it’s the BEST idea but I did a show in an iframe & successfully plopped it into WP. It’s on the root of my portfolio.

  6. Delight in the screams all you like, just remind people to put in alternative content! :) No matter how tricky people get with Flash, it’s still crap for accessibility and SEO (here’s hoping it gets better one day). Use Flash by all means but have fallback content. It’s not rocket surgery.

  7. Mike D. says:

    Ben: That’s the beauty of methods like sIFR and swfIR though: the *Flash* content is essentially the alternative content. Your code isn’t touched.

  8. Lance says:

    I like this is theory but it really doesn’t provide enough benefit to add another 21k to the page. All four actions can be done in a PS batch or server side and cached. It’s really just four flavored candy floss. More features (IE auto Web2.0 mirrors — in the aListApart article ) would just add to the JS bloat.

    What I would really like is a hybrid of swFIR and sFIR. That is – flash image replacement for plain text.

    As nice as the headings look with sFIR (I use it all over the place!) I can’t replace text with a logo for instance. I can with page specific CSS of course but, a sFIR esk method would be cleaner for production, better looking and much more powerful.

    Off the top of my head…

    My Company

    Test = alt text and Id = image source. Flash does the rest.

    This would also allow better modile version etc.

  9. lance says:

    hmm – the preview showed it ok …

    <h1 id=”MyCompany.png” class=”replaceImage”> My Company</h1>

  10. Alan H says:

    Sorry to take-up more vertical space :-) There’s no comments on the swfIR page, so this will just have to do!

    @Lance: There’s more than four functions.

    * border-radius
    * border-width
    * border-color
    * shadow-offset
    * shadow-angle
    * shadow-alpha
    * shadow-blur
    * shadow-blur-x
    * shadow-blur-y
    * shadow-strength
    * shadow-color
    * shadow-quality
    * shadow-inner
    * shadow-knockout
    * shadow-hide
    * rotate
    * overflow
    * link
    * elasticity

  11. Lance says:

    ok 6:

    1) Borders(+ attributes)
    2) Drop Shadow (+ attributes)
    3) Rotate
    4) Elasticity
    5) Rounded Corners
    6) Link (barely a function considering in you should just use an a tag for accessibility)

    Still, much less then the 100s in PS.

    At the very least I would recommend a plug-and-play architecture so only used functions are downloaded. Then you could create Firefox extensions like community and really open it up. Soon you would have quite a toolbox of options and still a slim download (with production discipline).

  12. Mike – it’s not exactly untouched. Consider the example off the swfir page… (brackets replaced, obviously)

    Original code: [img src=”photos/img.jpg” id=”photo” alt=”Photo example” /]
    This has the alt text “Photo example”.

    Rendered code (according to Firefox): [span class=”swfir” id=”photo”][embed type="application/x-shockwave-flash" src="/swfir.swf" style="border: medium none ; padding: 0pt; width: 343px; height: 515.15px;" id="swfir0" name="swfir0" quality="high" flashvars="url=" menu="false" wmode="transparent" height="515" width="343"][/span][div id=”effects”][embed type="application/x-shockwave-flash" src="/swf/effects.swf" style="" id="effectsflash" name="effectsflash" bgcolor="#9dcee0" quality="high" height="266" width="114"][/div]

    …there’s no alternate content in there, even though that’s what is given to the user. The alt text was lost, basically. A screen reader wouldn’t have anything to work with. The thing to remember is that screen reader users don’t necessarily disable flash or scripting. Actually it’s probably safer to assume they don’t!

    That’s one advantage to using a server-side image processing solution – the resulting images can keep their alt text.

    I’m not saying people shouldn’t use the technique, I’m just saying they need to be aware of what it means for accessibility :) If swfIR is just used for decorative images, then it really doesn’t matter if that “content” is lost – it’s not core content.

  13. Dan Mall says:

    Ben Buchanan: Flash does have the capability to communicate alternative text to assistive devices. The next release of swfIR will have the ability to preserve the alt text. I think it’s a misconception to believe that server-side generation is more accessible than certain client-side methods.

  14. Lance says:

    Dan, let me say I don’t want my comments to be at all discouraging – feel a bit bad about my choice of words.

    “Over a year in the works, I’m proud to announce the unveiling of a project that has been very close to me.”

    I think its great work. Its just not as useful to me as a website producer as sFIR. Extend it a bit and add some design flexibility (image borders, picture frames, masking files, templates?) I would love to see people contributing 100s of plug-ins to make all sorts of fun stuff.

  15. If your response to this is “why not just use Photoshop,” then you’re not understanding the point. Let me give you a real-life scenario where I would consider using swfIR:

    At World Online, we run sites for about 20 newspapers, a couple of TV stations, several magazines, and a few alt-weeklies. Many of them share the same database. That is to say: sometimes, the same content is published on multiple sites. For example, a story about the latest University of Kansas basketball game may be published on both (KU sports fan site) and (newspaper). An article about a local band may be features in both (alt-weekly) and (newspaper). However, all of these sites have very different designs. All of these sites also get redesigns on a semi-regular basis.

    So, let’s say I want to display images on my newspaper site with thin back borders, but I want to display the same images on my alt-weekly rotated a hair, with a drop shadow, and rounded corners. Without swfIR or something similar, I would be screwed. We publish upwards of 300 photos per day. It’s simply unpractical to ask our producers to make 30 different versions of each photo in Photoshop (one for each site). They don’t have time for that. And even if they did, I’ve just upped the amount of disk space I need 30 times. We can’t afford that. And even if we could, I’ve just added weeks of work converting all of these images in Photoshop when I redesign the site, as the versions that were done originally would no longer match the new style.

    With swfIR, I as the designer can use these same images on 30 different sites, and give each site’s images their own style without affecting our producer’s workflow or our disk space needs. And, I can change that style on the fly in seconds, if I redesign or want something a little different.

    Of course, this is all true of CSS, as well. But, there are several things that swfIR can do that CSS can’t (such as rotation), and there are some things that swfIR does better than CSS can (such as resizing images, since Flash’s resize is better quality than most browsers’, and drop-shadows, which are almost always a very ugly hack when done with CSS).

    If you’re a guy running a personal site with 15 images on it, then by all means, use Photoshop. If you’re a publishing company adding hundreds of images per day, that’s simply not practical.

    (Unsurprisingly, I said almost this exact same thing to the people who said, “don’t use sIFR, set your text in Photoshop and use image replacement!)

  16. @Dan: capability is one thing, but getting people to actually set it up properly is another. Plus some screen readers have no way to jump in and out of Flash content, so regardless of what it can communicate the user can’t get in there in the first place. You are right of course that it is getting much better, but we’re not quite there :)

    As I said, it’s the lack of understanding/awareness that I’m most concerned about.

  17. datenkind says:

    First of all, this is a really cool new tool mates. Well done!


    As far as we can tell, that’s a Mac Flash player bug combined with Camino’s rendering engine. Strange that Firefox wouldn’t do that as well though.

    that’s not the whole truth. FF 2.0.02 on Mac OS X has the same issue with hovering the links on the right side—there are “lines” added to the dropshadow. Check it here (it’s a PNG, excuse the 165 kb).

    Anyways, you guys made a great job—looking forward to see it’s capabilities. I’ll try it myself now :)

  18. datenkind says:

    Oh, I just screwed my link … Here’s the UR:

  19. Paul says:

    “prettier imagery on the web”
    Gaudy gradients and rounded corners are pretty? Christ learn something about design please, for the good of the internet.

  20. This is the most awesome advancement to designer-friendly web technology I’ve seen in a long time. The fact that 1) it’s easy to integrate and use 2) it’s packed full of features that everybody wants and reflect current trends 3) is well-written largely standards compliant code and 4) is free – blows my mind.

    I love that the web industry has this amazing open culture of giving. If only that could attitude could permeate into greed-ridden industries like pharmaceuticals or… politics.

  21. Carl says:

    swfR + Flash Block → Bad idea

  22. Alan H. says:

    @Jeff Croft: Great example. A high-5 to you!

  23. Does swfIR work with remote images?

    Only question I ask is that my site has flickr galleries and the images are fetched from the flickr server and swfIR doesn’t seem to work correctly.

    It could be my own sites code conflicting of course, but I’d like to rule this out first.

  24. Nic says:

    @carl sane use of flash = less users of flash block

  25. Does swfIR work with remote images?


  26. swfR + Flash Block → Bad idea

    Why do you think it’s a bad idea?

    If someone blocks your Flash, you’ll still get the non-swfIR’d image, which is great. This is progressive enhancement at it’s best, just like sIFR is. If people have Flash, they get an enhanced experience. If people don’t have Flash (or block Flash), they still get a good experience.

  27. Regarding remote, or “hot-linked” images: As a security measure, Flash prohibits access of non-local data. This limitation can be circumvented by utilizing a Cross Domain Policy File. While swfIR supports this functionality inherently, we have run into problems applying masks to images loaded across domains. As masks are required for the majority of available effects, this creates a conflict. Most users are reporting a green box appearing in place of the expected rendered image. We would certainly love to support remote images, and a solution is on our list of priorities. Any suggestions are certainly welcome!

  28. Dan Mall says:

    Lance: No worries. I realize that everyone has different opinions and don’t take offense to people that do. The fact that you’ve made some recommendations makes me more apt to view your comment as constructive criticism as opposed to a rant.

    Jeff Croft: Well said!

    Ben Buchanan:

    Capability is one thing, but getting people to actually set it up properly is another… As I said, it’s the lack of understanding/awareness that I’m most concerned about.

    Agreed. I inferred from your previous comment that you thought Flash was to blame for inaccessible Flash movies. I know differently know from your latest comment, but there are still people that think that Flash can’t be accessible, which is clearly a fallacy. Like you said, awareness is the name of the game.

    datenkind: You’re right. It seems to be a Flash player bug in Mac broswers. It’s a bit more subtle in Firefox and Safari, so something about Camino most be compounding it, but, regardless, it’s still a problem with the way Mac browsers handle Flash. In fact, the Surfin’ Safari blog recently posted about updates to Safari that modifies how Flash content is being treated. I’ve gotten some feedback that the latest nightly Safari build fixes the issue, but I have yet to try it for myself.

    Paul: Learn something about critique. Good design is appropriate design, and rounded corners and drop shadows can certainly be appropriate. Design is also subjective, so to imply your opinion as fact probably means that you’re no guru yourself.

  29. Gaudy gradients and rounded corners are pretty?

    Funny, I didn’t see a gaudy-gradient parameter available when I looked at swfIR.

  30. Dan Mall says:

    Don’t worry, Jeff. Version 2 is right around the corner. :)

  31. Lance says:

    so… is it possible to create a plugin system?
    Again, reasons are 1) to keep file size down to just the features being used and 2) to create community involvement ensuring ever more creative effects.

    On file size… doe swFIR use swfObject like code to load the flash? This could also be a size reducer if you can externalize the library. Something I wish sIFR did too. The results of this would be good to set as a core part of the code

    Fighting for the dial-up user here.

  32. Joel says:

    Lance, I was wondeing the same thing. When I was reading Mike’s article, before I followed the link, I was thinking “how is this different from swfObject?” (formerly FlashObject). After taking a look at the site, I understood it better. It’s basically swfObject with a pre-built swf that adds the corners and rotates the image and such, and the javascript code to interact with the swf to make it work.

    So then I wondered about file size. The swfObject 1.5 JS file is 7K. Add to that the size of the swf file that you create. The swfir JS is 22K and the swfir SWF is 3K. An extra 25K isn’t nothing, especially over dial-up, but it’s pretty good for what it does. It becomes more efficient the more you use it on your site (don’t over do it) because the browser will cache the JS and SWF files. I like the idea about being able to have community involvement. If the swfir people released some specifications they could design the swfir SWF to load a second SWF to extend the features of swfir without bloating the swfir.swf file, and perhaps even the JS file. Swfir could become the engine to a library of available features (torn edges, sliding tile game, motion effects, etc., etc.).

    Interesting to note that the entirety of swfObject is included within swfir (at the bottom of swfir.js). So for a custom flash movie (swf), I’d still use swfObject or UFO, but swfir looks to be a nice solution for image effects without having to learn or buy Flash.

  33. Patrick Taylor says:

    Dan Mall writes:
    Don’t worry, Jeff. Version 2 is right around the corner. :)

    I dunno, I like my gradients PRETTY DARN gaudy. I’ll probably wait until version 3 which should have a proper blink – quality parameter

    Seriously though, it is very cool. I’d love to see some overlay features (perhaps do some client-side Wicked Worn effects)

  34. Im a dial up user myself and I tested how long it takes to load (the test pages on the swfIR page) and the lag was not too long or unbearable….

    I think if it only has the one image, dail up users should be ok.

  35. datenkind says:

    Hey mates, it’s me again.

    I tried swfIR out a bit. It’s great, really. But there are same things I figured out:

    1. An added border is placed over the image. That results in cutting elements off—you saw it in your example with the house and its dome.
    It should be possible to tell swfIR, that it scales the image in the right ratio to keep its elements. It’s the same way like adding a shadow

    2.Setting shadow-inner = true results in shrinking the image by shadow-offset—but that’s not reasonable in my eyes.

    Hope it helps somehow :)

  36. M. van Leeuwen says:

    I really like this project.

    2.Setting shadow-inner = true results in shrinking the image by shadow-offset—but that’s not reasonable in my eyes.

    example shown here:
    example shadow image size and transparency

  37. swfIR breaks with the prototype library loaded. Example shown here:
    example prototype

    Fix is also supplied.

  38. miss dz says:

    well i guess blind people still WON’T see the images.
    well i’m not into miracles anyway. nice plug, thumbs up.

  39. darren wilson says:

    Very cool! This looks like a very useful and elegant solution. Some ideas for enhanced features:

    – random rotations within a specified range (e.g. -10 to +10 degrees), which would give a looser, “scattered” feel to rotated images

    – watermarking with text or an image; yes, i know there are PHP libraries that can do this, but why not just do it all in one tool?

  40. darren wilson says:

    Oh, just thought of another one:

    – alpha masking; use a second image as a mask… could be very cool for other edge or transparency effects.

  41. Montoya says:

    Darren, the random rotations would be much easier to do server side, since I doubt one swfIR object can see another. As for the watermarking, putting watermarks in Flash won’t protect the images at all, because if the user turns off Flash & Javascript, they get the original image files which lack Javascript!

  42. Montoya says:

    Correct that: “which lack *watermarks!”

  43. Hi Mike,
    Great job on swfIR. Very useful. I’m having a bit of an odd issue with green boxes. The swfIRed images are not hyperlinked, nor are they remote, yet intermittently, the images display as green boxes.

    This can be seen on the following pages: (toward the bottom)

    This happens intermittently in IE6/7, Firefox for Windows and Mac, Safari – pretty much every browser I’ve tried it in. Again, these images are not hyperlinked and not remote.

    Anybody else having this issue?

  44. CP says:

    OK very good: it works with my websites BUT not with my blog (wordpress): I tried to put the .swf and .js files in all wp directories and it doesn’t work…
    thanks if you can help

  45. swfIR: swf Image Replacement

    I just discovered swfIR image replacement , which uses Flash and some fancy javascript to replace your

  46. swfIR -- Style your images through swf

    Code that lets you show off your graphics in style, both easily and efficiently. Uses JavaScript and Flash, but requires knowledge in none of the two.

  47. piko says:

    the blog comment area is cool!!!!!!

  48. If I have mutiple instances of the same tag to be replaced i.e. h1 header is used 2 or 3 times then anly the first instance gets replaced and the following headers are just hidden. Have I missed something in the set up or do you need to create a specific tag for each instance?

    If this is the case how is it best to handle dynamic list type content where you want all the headers from a list of news stories for instance, to be replaced?

    Many thanks


  49. Xsss4hell says:

    THX Mike!

    This is great!
    But transparency doesn’t work.

    But SWFOBJECT2 is already released and it doesn’t work with it.
    I have Opera 9.52 and Firefox 3 I have a white border around the images, because transparency doesn’t work.
    Can you please fix that?

The Ocean in 185 Lines of Javascript:

Mesmerizing. Try tweaking some of the variables in the “sea” section of the code.

“"Design had been a vertical stripe in the chain of events in a product’s delivery; at Apple, it became a long horizontal stripe, where design is part of every conversation.””
Why I Just Asked My Students To Put Their Laptops Away:

A great essay about how toxic everyday distractions can be.

Humanity's deep future:

A group of researchers at the Future of Humanity Institute talk about where our race may be going and how artificial intelligence could save or kill us all.

Steve Jobs speaks about the future at the International Design Conference in 1983:

31 years later, it’s safe to say this is one of the most prescient speeches about technology ever delivered. Jobs covers wireless networking, tablets, Google StreetView, Siri, and the App Store (among other things) many years before their proliferation. A fantastic listen.

How to travel around the world for a year:

Great advice for when you finally find the time.


A fantastic app for prototyping your design work onto real world objects like billboards, book covers, and coffee cups. This seems like just as great of a tool for people learning design as it does for experts.

50 problems in 50 days:

One man’s attempt to solve 50 problems in 50 days using only great design. Some good startup ideas in here…

How to Do Philosophy:

If you’ve ever suspected that most classical philosophy is a colossal waste of time, Paul Graham tells you why you’re probably right.

TIME: Why Medical Bills Are Killing Us:

Stephen Brill follows the money to uncover the pinnacle of corruption that is the U.S. Health Care system. A must-read article if there ever was one.

DIY Dot Org:

A beautifully designed site full of fun and challenging DIY projects. I could spend months on here.

The Steve Jobs Video Archive:

A collection of over 250 Steve Jobs videos in biographical order

Self-portraits from an artist under the influence of 48 different psychoactive drug combos.

Water Wigs are pretty amazing.

David Pogue proposes to his girlfriend by creating a fake movie trailer about them and then getting a theater to play it before a real movie. Beautiful and totally awesome.