Stop Your Users From Watching the Clock
One of the biggest complaints people have about Flash sites is that they’re slow to download, and take too long to appear. The annoying thing is that the critics of Flash are almost right! What’s sad is that it really doesn’t have to be that way.
Flash can be used to create some truly amazing stuff, and its built-in compression algorithms can really squeeze file sizes down to very manageable levels. Yet many inexperienced developers overload their movies with a full-length soundtrack and several dozen screen-sized bitmaps, just because they can.
One reason why great developers stand out from the crowd of amateurs is that they understand the idea – and benefits – of preloaded content. Building a preloader will help improve the perceived speed of your Flash project, and help keep visitors at your site a little longer.
This article is not a technical how-to for building pre-loaders in Flash; there are plenty of online and print resources that’ll help you learn how to develop an effective preloader. Instead, this article’s purpose is to explain why you might use a preloader, and the different ‘types’ that you might consider developing.
Preloading – Your Options
At my company, we’ve used several different strategies in the development of Websites for our clients. We’d actually prefer never to have to create a preloader at all (someday, our bandwidth will come…), but until then, we learn to make the best of the technology under the current circumstances.
When we plot out the storyboard and ideas for a Flash animation, we try to consider the entire story and message, from start to finish (seems reasonable, no?). Like a choreographer or director, we consider all the actors (or elements), and how they can appear on stage (or screen) and begin to tell their story.
Start with Something Light
The best method we’ve found to introduce a Flash site is to begin with something ‘light’ — text, simple color objects, and very small symbols. These download very quickly, and begin to play immediately, thanks to Flash’s streaming capabilities.
But sometimes, we find ourselves really wanting to tell our story with photographic images, heavy graphics, or sound. At these moments, we’re forced to work a little harder to keep our users engaged while we get enough actors on stage to tell our story effectively.
The Loading Bar
One method we use is the classic ‘loading’ or progress bar. This method displays an indicator of some sort (usually a bar that extends from 0 to 100 percent as your content loads) on the screen as other objects load in the background. Once you’ve sent enough of your content down to the local PC, you can pull back the curtain and begin the show in earnest.
1. Branding
But don’t just use a plain bar and percentage indicator — see if you can do a little story-telling, or at least some branding. We managed to do a double-whammy of branding with our preloader at www.alta247.com: both their logo and ours featured in the preloader.
2. Create Atmosphere
The next level up is to use some text or other light objects to do a bit of an ‘overture’ before the main show begins. Set the mood using colors and simple objects, and tell a bit of your story with some simple text effects, before the big guns arrive.
We used this effect with success on www.premierdj.com, where the client wanted a photo montage in their Flash movie. As the photo slices downloaded behind the curtain, we told the visitor in just a few words what this site was all about, using the client’s own tag line.
3. Be Thought-Provoking
Our next stop in this journey is www.idiusa.com. Here, again, the client insisted on really huge graphics, in a side scrolling navigation. Since we needed to have all the images loaded before the visitor could start navigating (otherwise, they’d see a lot of blank spaces — ewww!), we knew we’d also need a preloader.
We decided to combine a preloading percentage indicator along with some introductory text, to set the tone for the rest of the site, and give visitors something to read and think about as the rest of the site loads.
4. Educate
Another fantastic preloader sequence can be found at www.barneys.com. There, Joshua Davis loads the images needed for the side scrolling navigation in the background, and displays a simple (but effective) animation in the foreground, which shows how one of the neat ‘windowing’ features works on the site. If you can’t tell a story, at least teach them something while they wait.
5. Entertain
Some sites actually give you a movie inside a movie, or some other fun diversion, such as a simple game to play, while waiting for the rest of the content to load. I remember at the now-defunct icebox.com, there were some great serialized cartoons that had fun preloading sequences. One, Mr. Wong, would offer a fictional and humorous recipe sequence, while another involving two ambulance drivers, would offer a small ‘whack a mole’ type game.
The Fine Art of the Preloader
The goal here is to always give your visitor something of interest to look at, something to read, or something to learn. This keeps them entertained and engaged while all your actors have a chance to assemble on stage. Then you can raise the curtain on something truly fantastic!
