I am at this point strongly annoyed by Flash. No, I'm not referencing Flash Gordon, hero of the eponymous 1930's sci-fi serials. I'm referring to Adobe Flash, the multimedia software. However, the two are closely related in one point: overkill.
In the case of Flash Gordon, episode names like "Captured by Shark Men" and "The Tunnel of Terror" probably bring home the point as to what I mean. Alliteration and aquatic predator men kidnapping ladies is the sort of over-the-top adventure that makes bad sci-fi into good bad sci-fi. Not only do I heartily approve of its existence, I'm overjoyed that it is playing on a continual loop at the nearby sci-fi themed bakery Rocket Donuts. Of course, they've got it muted without subtitles, so it the action can get a bit misleading when Flash and an overweight winged man are wrestling around barechested and smiling a tad too much.
However, with Adobe Flash, I've got a problem with the overkill occuring. Mainly, it's being used too often in websites for all the wrong reasons, and later presenting problems down the road when someone like yours truly has to change a website embedded to hell with goofy flash objects with no source code to work with. In my opinion, using Flash as a solution for a dropdown menu is the equivalent to using a nuclear weapon to stop a sixteen year-old from stealing a car. It's not only a massive case of overkill, it is also going to create way more problems than solutions.
Now, I might be a bit over the top when I compare rich media to weapons of mass destruction, but hyperbole has never stopped me from being right. (Usually, not thinking before I speak prevents me from being right, but in this case I'm pretty sure I've ran this topic through my head enough times prior to starting this discussion.)
What's wrong with using Flash to solve small design challenges? Well, first off, it's almost a given that the editable source file for the Flash movie won't be available when a website's owner gets around to hiring a new designer/developer to tune up their website, meaning you'll get to start from scratch.
For those not familiar with the laws of capitalism, time equals money, so this is a bad thing.
Secondly, embedding Flash objects is the web standards equivalent to comitting seppuku. There's just not a good, clean way to do it. One way or another there's going to be entrails all over the place. This is an acceptable evil for a website that's actually including a movie, game, or highly interactive media-rich project. But for a simple slideshow, it's just creating a mess that will only get worse over time.
Lastly, Flash is notoriously evil when it comes to disrespecting Z-index.
When I say 'disrespect', what I mean is that Flash is dragging Z-index into an alley, robbing it, beating it senseless with a cricket bat, then hiding it in a dumpster.
I for one do not wish to support any violence against CSS styles.
So for every person that makes websites out there, I suggest considering the following when a lightbulb goes off in your head with a specific design and you say "Ooh, I could use Flash."
1. What feature are you using Flash for? If it's something appropriate to the plugin, like a movie or such, then great. If not, then...
2. Is there something else that can do the same job just as well, with less of the headaches Flash introduces?
There's a few dozen occaisons where someone failing to walk through those two questions before making a project that later fell into my lap when Mindfly was tasked with tuning up various sites. I know this, because I've been plagued with malfunctioning (or non-editable) Flash image fade-in slideshows for the past eight months.
In the past, I've had to dig around in dusty servers with a flashlight, looking for the editable movie files, trying to decipher the contents within in the couple cases where I got lucky enough to find them, or recreating the slideshows altogether with new flash movies.
Then I stopped and thought about it for a moment.
In each of these projects, nothing complicated or interactive was going on. There was an image (a banner usually) that would slowly fade from one image to another in a continual loop. It was nothing more than a bit of pleasant presentation, like lights on a christmas tree or red heels on a cute blonde.
So why was I fixing the problem with more flash files, just to have someone in a few years curse my name when they got to work on the project next?
There is something else out there that all the major browsers can use that is perfect for changing images. Javascript. Maybe you've heard of it before.
In particular, Javascript is great with CSS manipulation. And thanks to the advances in CSS over the past decade (despite the glacial crawl of CSS3), there's a style or two that can be used to imitate the fading of one image to another. As Javascript is seperate from the markup, and doesn't require some sort of bizzare, ritualistic embedding, it presents a lot cleaner of a page. And as it isn't compiled, the source can be edited or easily swapped out by future developers.
So down to the meat of the solution.
First and foremost, let's look at what we're trying to accomplish: A fade-in slideshow where a series of images fade between one another in a continual loop. Obviously we'll want an image element to hold the current image in. But how do we transition it to the next image in a fade?
Well, for the standard javascript world (as opposed to the world of propietary MS filters), there's no immediate easy 'fadeToNextImage' function. However, thanks to many different JavaScript libraries out there, there's various animation functions that allow us to transition CSS properties. The world of Javascript libraries can be confusing and scary to non-programmers who start dipping their toe into the pool, but one that I enjoy (and is very clearly documented) is jQuery, which I've recently been converted to.
Why? Well, for one it's compact, and for two it keeps things as simple as possible.
Simple is good.
So what we want is to fade out the image into the next image. The first image can easily be faded by animating a transition of it's CSS opacity property from 1 (fully opaque) to 0 (fully transparent). The trick then is having the next image there to be faded into. In an ideal future we'll be able to affect the foreground and background opacity of an element seperately, at which point we could apply a background-image to the image of the next image in the sequence (CSS is fun, isn't it?). However, in this fallen, modern, CSS 2.1 wold we'll have to use an extra element. The idea solution then is a div, which ideally has been given the same dimensions as the image it's holding. Give the div the new background image, then fade the opacity of the original image. It will look then like you're fading one image directly into another. Then flip the new image to the front and repeat the process.
Easy, right?
Well, before you get all panicked, I've created a nifty example (complete with javascript and ninja!) for you right here.
Go ahead and test in all the major browsers. Thanks to jQuery's nifty animation functions the opacity works the same for all of them (despite Internet Explorer's alternate, proprietary method for setting opacity).
The image urls for the slideshow are stored at the top of the fadein.js file as an array. You can easily replace these with other urls (or add more images to the list) to extend or change the library. For those of you with more confidence with Javascript, there's a number of ways you could supply the array for the URLs, such as an AJAX call. Using CSS selectors, you can change the target of the slideshow function as well, and if you feel up to it, even call for multiple slideshows on the same page. Just remember, you need to target the wrapper, not the image, with the function.
This is just one example of using Javascript for slideshows, of dozens out there. But more importantly, it's an example of not relying on Flash for a solution when a less intensive, less invasive option exists.
Save Flash for the movies, games, and rich web apps. A site with just fancy presentation can be done just as gorgeously without it.
