Simple Flash Preloader
March 31, 2011 | Category: Tutorials | Tags: Flash | 11 Comments
As the size of your flash file increases, so too does the time it takes to load it. Visitors to your site may get irritated if they have to wait for the animation to load. Using a preloader can help that. It will load all the necessary pieces prior to displaying the animation. It will also show its progress so visitors will be able to see how much is loaded and hopefully wait for it to finish!
STEP ONE
What we’ll need to do is set up the necessary layers. We’ll need one for Actions, which is the scripts being used for the preloader. The Text layer will show the percentage complete for the preloader as text. The Stroke is just the stroke outside the progress bar. We want the progress bar to fill up within the stroke. The Progress bar will visually show the preloader’s progress by using a rectangle. And finally, the last layer is the actual animation you want playing after the preloader has finished.
Here’s how I set it up:
STEP TWO
On Frame 1 of the Progress Bar layer I inserted a keyframe and drew a red rectangle that’s 200 pixels wide and 20 pixels high:
I then selected the progress bar and hit F8 to make it a movie clip. Make sure the registration point is set like the following. Why? Because we want the progress bar to fill from left to right!
On the Properties panel, name your progress bar preloader:
On Frame 1 of the Stroke layer I inserted a keyframe and drew the following:
The above is just a stroke with no fill. The Stroke layer is above the Progress Bar layer. Why did we do it this way? Because we want the progress bar to fill within the stroke area. If we added a stroke to the progress bar itself, it wouldn’t look right!
On Frame 1 of the Text layer I inserted a keyframe and added a text box with the following:
I then selected the text box and on the Properties panel I set it to Dynamic Text and named it loadText:
STEP THREE
Alright after that long step 2 let’s move on! Now let’s get to the script that will actually make this preloader work. On Frame 1 of the Actions layer let’s add the following code:
var amountLoaded:Number = _root.getBytesLoaded()/_root.getBytesTotal();
preloader._width = amountLoaded * 200;
loadText.text = Math.round(amountLoaded * 100) + "%";I highlighted the important pieces in the script. “preloader” was the name we gave the progress bar. “loadText” was the name we gave the text box. “200″ was the width of the progress bar.
STEP FOUR
On Frame 2 of the Actions layer let’s add the following code:
if(_root.getBytesLoaded() == _root.getBytesTotal()) {
gotoAndPlay(3);
}
else {
gotoAndPlay(1);
}What this script is saying is if the bytes that have been loaded equals the total number of bytes in the file then the preloading is done and you can go to frame 3 and begin playing the animation. If the bytes loaded does not equal the total then go back to frame 1 and keep preloading.
NOTE: You may be asking why frame 3 has blank frames for the Text, Stroke, and Progress Bar layers. This is because we don’t want the preloader to display once the actual animation is playing, which begins on frame 3.
Also, you may not even see your preloader display if your file size isn’t that big. What you could do is add a few more objects to your design and then go to Control > Test Movie. The flash player should appear and your movie will play. On the Flash player menu go to View > Download Settings and choose the slowest setting. Then test the movie again and you should see your preloader working now!
Did you like this?
Subscribe to our 
RSS Feed, join us on 
Facebook, follow us on 
Twitter or simply recommend us to friends!
You might also be interested in:
Mercury Cougar Flash FileCars look so shiny and ne...
Seems simple enough, but I’m getting an error as follows:
ReferenceError: Error #1065: Variable _root is not defined.
On May 5, 2011 Harry Lambert said
I haven’t worked with Flash in a long time so I’m not sure. My recommendation is to do a search on the web for that error. I’m sure others will have better feedback on what it could possibly be.
On May 5, 2011 Josh said
_root is no longer a keyword used in ActionScript 3. I believe it was replaced with just root. You might want to get familiarized with AS3 Josh, because A LOT has been changed from AS2.
On May 7, 2011 Cody said
Thank you Cody! Appreciate the help!
On May 8, 2011 Josh said
Thanks for the tutorial…yours is the simplest to follow that I’ve found…
My preloader isn’t working though. My website waits until the whole thing is downloaded then just plays the preloader for two frames before the rest of the site.
On your picture it looks like there has been code assigned to frame 3. What is it? I think I’m missing it in your tutorial.On June 2, 2011 Mary said
Mary, review steps 3 and 4 as that is where I think you’re having the problem.
On June 2, 2011 Josh said
in the diagram in step 1, it shows there is actionscript for frame 3 – which relates to the whole animation – what is this actionscript?
On September 7, 2011 jules said
The action script is only on frames 1 and 2. You can see that code in steps 3 and 4.
On September 7, 2011 Josh said
i have a 1.4mb movie that stretches about 700frames.
I would like to know what kind of action script is this 2 or 3?
Do i place this design in the main animation design?
Is it mandatory that my movie starts at frame 3?Thank you
On October 17, 2011 Marcelo said
This tutorial was written a long time ago and probably used the older action script. You can place your movie anywhere as long as reference where it starts in the action script.
On October 20, 2011 Josh said
