How to Build an Engaging Preloader in Flash | Taterboy.com: Graphics, Multimedia and Such

How to Build an Engaging Preloader in Flash – taterboy
June 30th, 2010 | Filed under: ActionScript 3, Design, Flash, Flex, Tutorials

The Importance of a Good Preloader:
Everyone hates to wait, especially for websites to load. The only thing keeping a potential user sitting in their chair and staring at the screen, while your application loads, is the hope that eventually something great will happen. If that user is impatient, like most of us, the preloader may be the only opportunity you have to interact with a potential user/customer. The fact that something is moving on screen reassures users that your website has not locked up their computer. We may not think that a few seconds is a long time, but to the waiting user, it may seem like minutes. We should take advantage of this brief moment to make a good impression, give them a taste of what’s to come and develop trust.

Enough Preaching, On To The Code:

^?View Code ACTIONSCRIPT

var perc:int	 // percentage of how much is loaded
var isLoaded:Boolean;	 // is application downloaded or not
 
/**
** calculate percentage and sending to preloader animation
**/
function progressHandler(ev:ProgressEvent):void{
//calculate the percentage of loading: 0 - 100.
perc = (ev.bytesLoaded/ev.bytesTotal)*100;
 
//update loader animation
loaderAni.updateLoader(perc);
}
 
/**
** loading is complete
**/
function completeHandler(ev:Event):void{
// clean up event listeners
if(ev.target.hasEventListener(ProgressEvent.PROGRESS)){
ev.target.removeEventListener(ProgressEvent.PROGRESS, progressHandler);
}
if(ev.target.hasEventListener(Event.COMPLETE)){
ev.target.removeEventListener(Event.COMPLETE, completeHandler);
}
//hide loader
loaderAni.visible = false;
loaderAni.resetLoader();
isLoaded = true;
}
 
//add loading progress and complete event listeners
this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler);
this.loaderInfo.addEventListener(Event.COMPLETE, completeHandler);

Pre-Loading In Flex:
See my previous post on Building Custom Loaders in Flex

Flash Preloading Tips:
When exporting MovieClips to actionScript, by default these items are loaded in the first frame which will cause your preloader to take longer to appear. All of the first frame and it’s contents must load before the preloader even shows up. If all your contents are set to load on the first frame, it will defeat the purpose of setting up a preloader in the first place.

Some Workarounds:
A. Deselect “Export in frame 1″ in the MovieClip’s properties, then drag all the MovieClips that need to be loaded on the second frame of the timeline, but out of view off stage. This way all the items will load on the second frame before all your code needs to access them and your preloader on frame one will show up quicker.

B. Create a second swf that has the sole purpose of loading the main swf. This way the loader will run, no matter how many items are set to load on the first frame.

Preloading Using The Loader Class:
For many applications there may be external files that need to be loaded, to continue to offer the best experience for our users we should show a loader animation to communicate the loading process, in most cases a simple animation will suffice.

^?View Code ACTIONSCRIPT

var imgLoader:Loader;
function loadObject():void{
// create a new loader
imgLoader = new Loader();
imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadCompleteHandler);
// you can also add a progressEvent if you need to track the loading progress, see code sample above.
//imgLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgressHandler);
imgLoader.load(new URLRequest("url to image or swf"));
//show the loader and start any animations
loaderAnimation.visible = true;
loaderAnimation.play();
}
 
function loadCompleteHandler(ev:Event):void{
// clean up event listeners
if(ev.target.hasEventListener(Event.COMPLETE)){
ev.target.removeEventListener(Event.COMPLETE, loadCompleteHandler);
}
// hide loader and stop any animations and events
loaderAnimation.stop();
loaderAnimation.visible = true;
}

Don’t Forget To Clean Up:
Event listeners can eat up computing power, causing our applications to run sluggish. In the interest of keeping things snappy and maintaining trust with our users, we should look for opportunities to clean up items that are no longer being used.

Coming Up With A Truly Engaging Loader:
Take a minute to get inspired, even if your site is boring, there has to be at least one creative element or theme you can use as the foundation for a good loader. Think mechanics, think fun, think brand, think message. Now, simplify! Remember, the most important thing about a preloader is it shows up fast and communicates with our waiting users. If the loader is too complex we may need to preloader for our preloader, so keep it simple.

Next, we need to prepare our animation, even if it’s as simple as a count down. What graphics and animation do we need to take our idea and entertain our users while they wait for stuff? These animations can be built on the Flash timeline or animated using actionScript.

Finally we have to hook up our animations and TextFields to our loading code.

Basic Loading Function:
I place this code inside the MovieClip that contains the loading animation and elements that communicate the loading progress.

^?View Code ACTIONSCRIPT

/**
** all the things that need to happen while loading progresses.
**/
function updateLoader(val:int):void{
//basic animation
gotoAndStop(val);
// to display more information
// preloaderBar.scaleX = val/100;
// preloaderTxt.text = "LOADING: " + val + "%";
}
 
/**
** reset the loader back to its original state.
**/
function resetLoader():void{
gotoAndStop(2);
}
stop();

Where To Go From Here:
Now you have all the foundation you need to build some of the most create and entertaining preloaders on the web. Big Spaceship has a museum of all the best preloaders ( http://www.prettyloaded.com), get inspired and think about how everyday items could be turned into a preloader.

Download the source for the sample loader.

Technorati Tags: Flash, Flex, Loader, Loading, preloader

3 Comments »

[...] How to Build an Engaging Preloader in Flash | Taterboy.com: Graphics, Multimedia and Such [...]

Pingback by marketing.mov | Uncategorized | Information about Web Hosting, Web hosting service! — July 4, 2010 @ 3:14 pm
Hey, I didn’t understand what you mean here:

A. Deselect “load on first frame”, then drag all the MovieClips that need to be loaded on the second frame of the timeline off stage. This way all the items will load on the second frame before all your code needs to access them.

I checked the source files and didn’t see anything on the 2nd frame..

Comment by Rihards — August 5, 2010 @ 7:02 am
Oops, I had incorrect verbiage for the check box in the MovieClip properties, should be “Export in frame 1″. - updated

If you want to have a preloader in your swf, but have a bunch of MovieClips that are set to Export for ActionScript, by default they export on the first frame. This makes the first frame take longer to load so you loader graphic or animation doesn’t show up for a while. If you uncheck “Export in frame 1″ in the MovieClip’s properties (this is only checked if it is set to Export for ActionScript) and take all the MovieClips that are exported for actionScript and drag them into frame 2, but out of view off the stage , the weight will now be on the second frame, which allows your loader on the first frame to show up right away.

Basically “Export in frame 1″ makes all the class and MovieClips available to ActionScript on frame 1, if you uncheck it, then you need to manually export those MovieClips by dragging them to the stage on the frame you want them to load in.

Here is a sample Try deleting the black box from frame 2 and you notice that the loader does not show up. But with the MovieClip in the timeline, the loader shows up.

Comment by taterboy — August 5, 2010 @ 9:40 am