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.
Oooo, at first glance, me like. The thought of being able to easily add rounded corners or drop shadows to many of the images on my site without having to re-work all the images is music to my ears. I just may have to play with this…
And I agree – I’m all for the plain vanilla standards when reasonably practical, but there are only so many ways a single person can manage a couple thousand pages efficiently without help from beautiful tools like this. Thanks for the heads up.
This looks like it’s going to be a great tool for web designers everywhere. I only wish I could download the stinkin’ thing and give it a test run! (currently requires authentication to download)
Can’t wait to see what people end up doing with this.
I’ve been playing with a beta version for a week or so, and I can say with a great deal of certainty that it works really well. Most of the effects it allows for either impossible (rotation) or require ugly hacks (rounded corners, drop shadows) with CSS. This method is clean and elegant.
Well done, Dan, Jon, and Mark.
Almost perfect except… right-clicky?
Rexy: What the hell do you want to right-click on an image for? Oh, to download it for your own use perhaps. Exxxxxxxcellent. <Drums fingers together />
The nice thing about something like swfIR is that technically, you could allow the right-click menu to download *full resolution* images if you want to. The right-click function in Flash is fully programmable.
This looks really cool, as usual it would’ve been really handy a couple of weeks ago…
Time to go back and strip out the empty spans on that last project perhaps?
Thanks for the heads up Mike.
I tried the elastic image example and that didnt work under IE6.
This is awesome. It will let us do things that used to take up too much time before… plus it will cut my hours spent in Photoshop for redundant tasks… Thanks for sharing this!
What I often don’t like (but I haven’t seen swfIR yet) about these developments, is that they work with some of the ways a browser work, but not all. For example: I often click on links with my middle mouse button, to open them in new links. But in Flash, this doesn’t work. The same for the back button, etc.
They do work for the regular surfer, who “follows the rules”, but not for the more advanced one, with 100 tab’s in his firefox…
I’ll look into swfIR tho.
Pretty. Now, if only I could upload said files to server. Hmmm….
Doesn’t phpthumb do this already? But hey – more toys, cool :D
Actually, can swfir dynamically style swf movies too?
If so, it would go a long way towards separating flash content from the specifics of a design… potentially saving the need to re-author the flash every time rounded corners or shadows are added or dropped from a site.
Am I the only Linux Flash user who’s having alignment problems with this? On the main page [http://www.swfir.com/] the image/flash looks as if it’s positioned relative and moved about 100 pixels to the right, which makes it overlap the menu partially. The “elastic” header isn’t [elastic]. It just sits there like a normal img tagged image. Which makes me wonder… Heh. Yep! I should have remembered that since I just reinstalled Ubuntu I might need to reinstall Flash. At any rate, there are some markup problems on that first page vis a vis the img positioning. Gonna install Flash and see how much better it fares. Or worse, this is Linux Flash after all. ;)
I want a simple slideshow in a wordpress blog page. Will this do that, or is it just adding the element to a “static” image?
Wow. Not only did I miss the fact that Adobe finally got around to releasing Flash 9 [instead of Flash 7] to use Linux users but the install was a breeze. At any rate, it does look a heck of a lot better with Flash enabled. The only problem I can see off hand is the lack of transparency on the rotated image on the main page. With the white background on the other pages it doesn’t even seem noticeable but I’m sure it’s there too. Pretty cool, even if I won’t ever be designing with this methodology. At least, not on my own instigation. [I’m one of those kittens who’s averse to Flash. Linux/Flash problems of the recent past haven’t helped.]
That’s easily fixed by just specifying the background color of the Flash file in JavaScript. I wasn’t aware the Linux Flash Player doesn’t support wmode=transparent, in all my previous tests it did.
Mark, perhaps I misunderstand what’s supposed to happen on the main page when you rotate the image. I presumed that the white border would rotate as well. When it didn’t, I wrote it off as another case of the transparency bugginess in Flash. If the border isn’t supposed to rotate then it does work correctly but just seems a little confusing.
I’ve not had chance to look at this closely yet (still at work) but it raises a number of thoughts for me right off the bat:
1) What are the accessibility implications. Does it read in the alt text? How is that alt text conveyed to the user when the image has been replaced with a swf?
2) Will it be as irritating as I think not being able to right-click save as?
3) image scaling resize can be done by setting images as widths in relative measures anyway (em, %), why use swf?
The idea looks interesting, but I’m not sold on its accessibility, impact on expected UI, or what it actually does – I’m not sure a nice border is worth the effort, but an animation on load might be…
resized swf’s apear much smoother.
Neat idea. Thanks for taking the time to do this and provide it freely to the community – very cool.
And the site is beautiful. Nicely done.
I’m on Camino and am having a few problems when I hover over the right-side navigation; the drop shadow becomes really dark and there are lines across the swfIR image which follow the lines of the navigation.. a bit odd to describe.
Otherwise! I can just imagine how useful this would be for gallery scripts! Just think of looking at multiple images on a page, you could have advanced controls for each one, control when the images load, etc.
Very nifty. Of course I use the FlashBlock addon for Firefox, so wide-spread use of this would be a bummer. I don’t think I could give up FlashBlock, it’s so nice blocking all of the rich media advertising…
Quite cool, but I’m going to stick with good old CSS and, if I must, imagemagick. Personally, I’ve never been struck by deficiencies in image handling there and, well, ‘If it ain’t broke, don’t fix it.’
You talk like you have some noble battle against standardistas…
Anyway, these effects have existed in the past in various forms, but it’s nice to see them packaged up into a whole solution for images. I especially like the image rotations. It still takes too long to render, often the image appears and then it is updated by the flash… shouldn’t the setup prevent loading the images before the flash has loaded?
Wow… It’s time for me to try it… I think is good… Thanks…
Cool! It’s another tool that maybe I’ll use on some projectos.
Paul and others: Yep, I’m sure there are still a few browser-related bugs that the crew is working out. Please report anything you notice to the team.
PanMan: These are images though, so theoretically the only thing you’d ever right-click for is to download them to your desktop (which arguably isn’t even your right in some cases). Regardless, the cool thing is that in Flash, you can program the right-click to do that and a whole lot more. So, for instance, with swfIR, you could program the right-click to download 10 sizes of the image.
Matt: Like sIFR, pretty much zero accessibility implications. That’s the point of the technique… it doesn’t touch your HTML code.
Montoya: Yeah, I kind of do have a bit of a holy war with the hardline standardistas, as has been well documented in the past. I love standards… I just don’t like people that don’t know when it’s ok to break them.
Rex: We’re currently building in a right-click enabled version for the next release, which should be out shortly.
Matt:
Peter: 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. Fortunately, our Camino users are at about 8% of our total traffic. We’ll be sure to look into it.
Montoya: There are a number of ways to improve upon the initial flicker. As this is the most common complaint we’ve received, this is at the top of what we’re building into the next release.
I remember that entry, Mike. The entry itself and the majority of the comments were some of the dumbest things that I have ever read on the subject of web standards. I respect your creativity and the work you have done with sIFR in the past, but standards and validation are about a lot more than pretty fonts and unencoded ampersands. Leave the zealots to themselves and ignore the trolls… I really think it makes you look worse as a person when you try to provoke them.
Montoya: Care to expand on the statement that “the entry itself” was one of the dumbest things you’ve ever read? Cut-and-run commenting is pretty lame, don’t you think?
Cut-and-run? I’m still here! But I don’t think this is a place for that discussion… I’m not going to hijack this thread, it should be kept to discussing swfIR. I’ll try and write something on my own blog really soon, and I’ll let you know when it is up.
You’re still here but that was a pretty open-ended statement to just casually throw out there. I don’t mind if you hijack the thread… go ahead. I’m just curious as to where you’re going with it because your statement that “standards and validation are about a lot more than pretty fonts and unencoded ampersands” is pretty much right on track with what the article is about in the first place.
but standards and validation are about a lot more than pretty fonts and unencoded ampersands.
anyone see the irony is this statement?
Great stuff. :)
WMODE work for transparent overlays is pretty good these days in Mozilla, Microsoft, and Apple browsers, on Mac and Win. No Linux browsers yet offer it, although it’s in the changelist for upcoming Firefox. Safari still has some issues with WMODE, although these examples all seemed to work fine for me. I’ve heard of more issues with Camino, but I haven’t checked their docs for WMODE support. Opera should be pretty good, on whichever OS, if memory serves.
jd/adobe
This is cool, but not as practical as sIFR in my humble opinion. I already have the ability to add those effects to my images through photoshop, without the addition of the flash load time. The only real advantage for this I see is when users are submitting images to be displayed live. But when I control the entire page, it seems pretty pointless to add processing and load time to my images before they render for effects I could just roll into the image itself.
Nevertheless, a cool invention, and a very sexy promo site.
but what if you have 10, 20, 100 images? do you want to go into photoshop everytime?. What if you want to change the border and you have already done 100 images, again do you want to go through and change them all. .
If you’re doing that much automatic editing, I would strongly recommend using Imagemagick to process them all. Just keep a folder with your original images and run a script to transform them the way you’d like them to be. Photoshop is definitely a powerful tool, but it shouldn’t be the only tool in your image manipulation toolset (especially if you bulk edit images often).
(As an extra note, swifr does look pretty cool and I shall be playing with it over the next couple of days to see how it fares)
Phil: I don’t like the idea of processing raw images server-side in order to produce effects which are page-specific. So, if I wanted to — let’s say — color correct a bunch of images on a permanent basis, then yes, that would be a great thing to do as a batch. But for page-specific effects like a rotated photo with a shadow behind it, I’d rather leave the image intact for the most part and let the client engine do the work. I suppose you could use ImageMagick to perform those transformations on the fly, but the last time I invoked ImageMagick on every single page on my site, I started pegging my server’s CPU.
Gareth:
Photoshop has the ability for batch processing, which I often use to do things like colorize entire icon sets. You can create batch actions to do all of the effects of swfIR and more.
Also, if sIFR is any indication, if you have a lot of replaced images on one page, I bet it slows down rendering quite a bit. I’m not outright attacking swfIR, I just don’t think having a ton of images to apply a style to is suitable justification.
The only reason I use sIFR is to make use of typefaces I otherwise would be unable to use. But with swfIR, I can already add those effects myself, and I have much more control over the effects, so the need just isn’t there.
Mike, my response is here. So much for cut-and-run.
I agree that sIFR is a great tool (one which I would use) but can see why Rob would say what he did about not using the swfIR tool (which I think is cool). I personally would only use it for a liquid display website. I think this tool is perfect for a situation like this were you can change the size of the image etc.
However I do think it will be a cool tool to use for a photo gallery type website service, were you can add ‘effects’ to make the images more effective.
why replace <span>s? surely it should replace <img>s do that non-JS users see the original…
Hi, I really like this idea, but there are minor things about the (current) implementation that I don’t like:
</nitpick>
That being said, I realize that the current version is a raw Beta with loads of improvements ahead, and as such it is a really neat piece of script!
Great work!
Paul van Steenove: IE has a weird bug where it can mistake HTML ids for global JavaScript variables. By adding the keyword var to the swfIR constructor, it solves the problem. Voilà!
Jazzle: swfIR actually does replace the <img />, but it adds a <span> around the newly inserted SWF file. Firefox doesn’t allow styling of the embed tag, so we needed to provide a hook for people to style.
The only drawback I see is the printability of the page. In their code, they don’t reference a print style. Do you think it’s possible to ‘fall-back’ for print?
While the swfIR technique is good for resizable images, it’s also reasonably easy to frame/mask non-resizing images using a little extra HTML, a dash of CSS and a couple of gif/png images – I often do this using small gif images for curved borders.
The benefit of this approach is that,
It can be a bit of a pig to integrate this method with WYSIWYG (CMS) managed content, but this issue could be overcome by doing what swfIR does and looping through the DOM to find all the images to frame.
Someone also casually mentioned using WMODE to add transparency effects. Beware browser inconsitencies here, even in the major players like Firefox..
Alan H: You make a great point! Printing is an important issue that we have recently corrected. The update should be released near the end of this week. Now, instead of images not appearing on the printed page, the unstyled image appears. Unfortunately, due to browser limitations, it’s not possible at this time to print Flash-styled images in browsers other than IE/Win. Hooray!
Wheres the BLINK function!!!!
[long, deep, heavy sigh] One more thing to slow down webpages. Don’t get me wrong; I love progress and shiny new toys but I’m still on dial-up, can’t get broadband and will not be able to get broadband anytime in the foreseeable future. It simply isn’t available here. Therefore, I HATE Flash and anything else that slows down webpages.
Sorry for the whining. I can’t help it. It’s one of my biggest frustrations in life and I have to let the world know every chance I get. :-)
Can anyone say hell on earth?
@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.
Lynn,
Just mentioning this incase you haven’t heard of it (perhaps you have and it isn’t feasible), but Google Wild Blue satellite broadband.
So will it do a slideshow? I’m not seeing that it does.
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.
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.
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.
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 http://www.alistapart.com/articles/semanticflash ) 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.
hmm – the preview showed it ok …
<h1 id=”MyCompany.png” class=”replaceImage”> My Company</h1>
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
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).
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=http://www.swfir.com/photos/img.jpg&borderWidth=20&borderColor=0xffffff&srcWidth=343&srcHeight=515&swfirId=0" 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.
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.
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.
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 KUSports.com (KU sports fan site) and LJWorld.com (newspaper). An article about a local band may be features in both Lawrence.com (alt-weekly) and LJWorld.com (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!)
@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.
First of all, this is a really cool new tool mates. Well done!
Dan,
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 :)
Oh, I just screwed my link … Here’s the UR: http://www.datenkind.de/drpshdw.png
“prettier imagery on the web”
Gaudy gradients and rounded corners are pretty? Christ learn something about design please, for the good of the internet.
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.
swfR + Flash Block → Bad idea
@Jeff Croft: Great example. A high-5 to you!
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.
@carl sane use of flash = less users of flash block
Yes.
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.
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!
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:
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.
Funny, I didn’t see a gaudy-gradient parameter available when I looked at swfIR.
Don’t worry, Jeff. Version 2 is right around the corner. :)
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 http://www.alistapart.com/articles/flashembedcagematch
Fighting for the dial-up user here.
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.
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)
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.
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 :)
I really like this project.
example shown here:
example shadow image size and transparency
swfIR breaks with the prototype library loaded. Example shown here:
example prototype
Fix is also supplied.
well i guess blind people still WON’T see the images.
well i’m not into miracles anyway. nice plug, thumbs up.
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?
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.
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!
Correct that: “which lack *watermarks!”
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:
http://www.toplinesporthorse.com/index.php (toward the bottom)
http://www.toplinesporthorse.com/sold
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?
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
swfIR: swf Image Replacement
I just discovered swfIR image replacement , which uses Flash and some fancy javascript to replace your
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.
the blog comment area is cool!!!!!!
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
Pat
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?