One of the biggest complaints people have about Flash sites is that they are slow to download and take too long to show anything. The annoying thing is, the critics of Flash are almost right! What’s truly sad, is that it really doesn’t have to be that way.
Flash can be used to create some really amazing stuff, and its built-in compression algorithms can really squeeze file sizes down to very manageable levels. And yet, many inexperienced developers overload their movies with a full-length soundtrack and several dozen screen-sized bitmaps, just because they can.
One way great developers can stand out from the crowd of amateurs is to understand the idea of preloading content. Building a pre-loader will help improve the perceived speed of your Flash project and help keep folks at your site a little longer.
This article is not a technical how-to for building pre-loaders in Flash; there are plenty of on-line and in-print resources to learn the technical aspects of developing an effective preloader. Instead, this article’s purpose is to explain why you might use a preloader, and the different ‘types’ that can be developed.
At Within Reach Concepts, we’ve used several different strategies when developing web sites 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 it.
When plotting 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 of the actors and how they can appear on stage and begin to tell their story.
Different Methods The best method we’ve found for doing so is to try and begin with something ‘light’ – text, simple color objects, very small symbols. These download very quickly, and will begin to play immediately, thanks to Flash’s streaming capabilities.
But sometimes, we find ourselves really wanting to tell our story with photographic images, or heavy graphics, or sound, and then 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.
One method we use is the classic ‘loading’ or progress bar. This method puts 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 got enough of your content down to the local PC, you can pull back the curtain and begin the show in earnest.
But don’t just put 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 feature into the preloader.
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 by 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, since 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.
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.
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.
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 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 goal here is to always give your visitor something of interest to look at, something to read, something to learn. This keeps them entertained and engaged while all of your actors have a chance to assemble on stage. Then you can raise the curtain on something truly fantastic!
Need a great web site or Flash animation? We bring technology and your customers within reach. Within Reach Concepts, Inc. 1.888.948.4467 (1.888.WITHIN REACH) http://www.wreach.com
