This is actually an old version of For the latest and greatest, check out the new site.

Introducing swfIR

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

Picasso once said:

I begin with an idea and then it becomes something else.

In January of 2006, I began experimenting with the idea of elastic layouts. I soon figured out that one of the largest—if not the largest—drawbacks to this technique is the proportion of images. You can forget about designing to a strict grid system with an elastic layout. Of course, there is a bit of a solution in sizing images with expandable units, such as ems or pixels. However, there are two downsides to this:

  1. Resizing images with HTML looks terrible.
  2. For image dimensions to be specified in resizable units, each image’s dimensions needs to be explicitly stated, either in the CSS or in HTML. In most practical scenarios, that isn’t feasible.

Finally, I decided to resort to JavaScript to dynamically convert pixel dimensions to ems. I was also working on a full-screen Flash site (now archived) for my band at the time, and realized that Flash has a decent algorithm for resizing images. Because of the overlap in the side projects, it struck me to combine the two methods. Using JavaScript to convert the dimensions and pass the image to Flash, then letting Flash resize the image, it seemed that I was heading towards a very useful solution for elastic images.

I showed the technique to Mark Huot, a good friend, colleague, and programmer extraordinaire. The next day, he returned with a tricked-out version with additional features, and the swfIR (SWF Image Replacement) project was born.

Without Mark, swfIR would not be what it is today. I have yet to encounter another human being that is as skilled and fast, yet exudes humility. There seems to be no limit to his abilities, and I have still to come up with a way to stump him. Maybe someone out there can. Someday.

Other invaluable contributors to swfIR include Jon Aldinger who helped with just about everything you can imagine, Kevin Cornell on the logo and site design, as well as overall art direction, Jason Santa Maria for great feedback along the way and use of his Daily Photo, and finally all of the Happy Cog folks who were always there for moral support and additional ideas and feedback.

Well, the suspense is even killing me, so, without further ado, check out swfIR! Feel free to sound off on whatever tickles your fancy about swfIR, or if there’s something that just gets under your skin about it. The comments area and the contact forms on either this site or the swfIR site are ripe for the writing.

On a related note, I begged the A List Apart staffers to let me write about my explorations, and many emails and fruit baskets later, I’ve got my first ALA submission. Feel free to check out “Semantic Flash: Slippery When Wet.”

There are plenty of opportunities for you to let me know what you think… have at it!


Tor Løvskogen said:

It crashes my Opera 9.10, build
8679 - when I resize 3 times.

Posted on February 27, 2007 01:38 AM

Jermayn Parker said:

This looks cool. Best Flash tool I have seen yet (and I hate flash).

Posted on February 27, 2007 02:13 AM

Tor Løvskogen said:

One more thing, what about the fact that it breaks the right-click on a image?

Posted on February 27, 2007 02:48 AM

Blake Haswell said:

Wow, the way you used it in the ALA article was really impressed.

Great job developing this! I’m also not a fan of flash, but these techniques where it is used responsibly are really cool.

Posted on February 27, 2007 06:43 AM

Olly said:

This is really rather cool. I've done a very similar thing manually a few times in the past and thought about attempting to adapt sIFR to do it for me. Thankfully you've beaten me to it :)

Posted on February 27, 2007 08:28 AM

Pål Degerstrøm said:


Posted on February 27, 2007 09:00 AM

Michael said:

Another great addition to anyone's toolbox. I'm always interested in finding new ways of using Flash that don't scream "Flash!" Thanks to the entire team for all the hard work.

Posted on February 27, 2007 10:19 AM

Dan Mall said:

@Tor: We’ll look into the Opera crashing. Concerning the right click, that’s a great idea that will be implemented in the next release.

@Jermayne, Blake, Olly, Pål, and Michael: Thanks! I'm glad it’s changing lives! :)

Posted on February 27, 2007 01:59 PM

Odin / Velmont said:

I don't like flash, so I won't use it. However, it is really clever. Very nice, I would use it if not flash was unfree software and very slow and bugging (and the fact that many people use FlashBlock and AdBlock which makes this annoying).

However, I really think you should support background-color to make it look nicer on your site as well as others. Right now it makes an ugly white extra box when you rotate the image or put shadow on it.

Posted on February 27, 2007 05:07 PM

Jermayn Parker said:

I have followed up what I claimed by being the best flash tool and blogged about it.

THANKS and keep up the great work

Posted on February 27, 2007 07:42 PM

Eric Puidokas said:

I love this. It's a great implementation of such an awesome idea.

I've been playing around with the javascript a bit. I was able to add a constructor, allowing you to do all of the initialization in 1 line of code.
Example: var sir = new swfir( 'img', {borderRadius: "10", borderColor: "fff"} );
(hasn't been thoroughly tested)

Maybe something worth implementing in the next version?

Posted on February 28, 2007 11:59 AM

Mark said:

@Odin / Velmont: Background color is in fact supported. All you need to do is specify it:

x.specify('background-color' '#000');

Would make the background black. By default swfir uses the wmode="transparent" option which should be enough unless you're supporting Linux versions of Flash.

You can see the full list of specify parameters on the site.

Posted on February 28, 2007 12:35 PM

Josiah Platt said:

Congrats Dan! Love it man.


Posted on March 1, 2007 04:41 PM

Ben said:

Wow, Dan - this swfIR looks amazing! Can't wait to try it out.

Posted on March 3, 2007 02:14 PM

Henry Francis said:

This elegant technique should be quite useful. I have been experimenting with it, and have encountered a problem.

I coded a test page to give elasticity to images. When I bump up the text size, the image expands, as it is supposed to, but the height of the img box remains constant, thereby obscuring the top and bottom of the expanded image. The width of the img box does expand with the image.

I am running MacOS10.3. This problem occurs in FF2 and Safari1.3, but Opera9 seems to work perfectly. I don't know what happens in IE6 and IE7.

Posted on April 2, 2007 10:09 PM

Sorry: comments are closed.