Design & Technology Illuminated

To enhance the user experience of a Flash site, you definitely need a preloader (or a series of preloaders) to show the user that content is actively downloading.

To get started with this preloader, you are going to need two items on the Stage in Frame 1: a movie clip with instance name “progressBar_mc” that contains a rectangle shape to represent a progress bar; and a dynamic text box with instance name “progressText_txt” to show the percentage of the download that is complete.

The actual content of your Flash file should start in Frame 2.

Place the following actionscript in Frame 1:


stop();

/*Add a listener for the root timeline loaderInfo property and call function progressHandler as it progresses*/

root.loaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler);

/*Create function progressHandler to create a var “myprogress” with class Number to determine download progress*/

function progressHandler(myevent:ProgressEvent):void
{
var myprogress:Number = myevent.target.bytesLoaded/myevent.target.bytesTotal;
trace(myprogress)

/*scale the width of the progress bar to match the number in myprogress*/

progressBar_mc.scaleX = myprogress

/*set the dynamic text progressText_txt to display the myprogress and add percent sign to the end*/

progressText_txt.text = Math.round(myprogress*100) + "%"
}

/*listen for the root loaderInfo property to complete the download, and play the root timeline*/

root.loaderInfo.addEventListener(Event.COMPLETE, finishedDownLoad);
function finishedDownLoad(myevent:Event):void
{
play();
}

Additionally, the movie should be set to download “top down” in the .swf Publish settings. When testing to see if it works, you’ll need to make sure you use the Bandwidth Profiler and Simulate Download settings when testing your Movie.