Making a Preloader in Flash

If your Flash file is particularly large, you don’t want your viewers sitting there, staring at a white screen wondering when it’s going to load. You need a preloader, a progress bar that shows up until the entire file is loaded and ready to play.

First, make three layers: actions, loader, and content, from top to bottom.

In your loader layer, create a rectangle. This will be your load bar. Make sure to convert it to a movie clip symbol and give it an instance name. When you convert it to a symbol, set the registration point to the left, instead of the top left. This indicates where the bar will start to load from.

Next, we want to make a dynamic text field for the percent loaded. After you make it, make sure to go to the Properties panel to name it and use the drop-down below that to make it dynamic, otherwise actionscript can’t affect it.

Then go to the actions layer and put in the following code (your customized input marked in bold and with brackets):

//keeps the animation from running past your load bar until you say so
this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
this.loaderInfo.addEventListener(Event.COMPLETE, onComplete);
//introducing listeners for the start and end of the load, respectively
function onProgress(e:ProgressEvent):void {
var loaded:Number =;
var total:Number =;
var percent:Number = loaded/total;
//introducing the variables we’re going to use in the progress function
[name of your loading bar here].scaleX = percent;
//this is what makes it look like the loading bar is animated, even though it only exists in one frame
//as the percent goes up, so does the scale of the x variable (width) of the bar
[name of your dynamic text field here].text = Math.round(percent*100) + “%”;
//introduces the input for our dynamic text field
function onComplete(e:Event):void {
//when the load finishes, this directs the animation to begin playing at frame 2, where our content will start
Then set the first keyframe of your content on frame 2 of the content layer. To test the loading bar, you might want to toss a massive picture here, so you have something significant to load.
-Jon Kimmel

~ by blackburnkimmel on April 14, 2010.

%d bloggers like this: