How to build a percentage based preloader in Flash

06 August, 2009

Almost a year ago we wrote a popular article about how to create a very simple preloader in Flash. We covered both ActionScript 2 and ActionScript 3. In that article we didn't cover how to create a percentage based counter - but we will today. Today we look at how to create a percentage based preloader in Flash. We will cover how to create both a bar that fills up, and a text field that displays the percentage loaded. And as per usual, we'll cover this in both ActionScript 2 and ActionScript 3.

• ActionScript 2
• ActionScript 3

ActionScript 2

We'll pick up where out last article left off and assume that the preloader required is already working. To get our percentage based preloader working, all we need to do is add two lines of ActionScript, add a text field and create a MovieClip.

First, let's add our text field to the stage.

Create a new layer below the existing ActionScript in Scene 1 of our file. Place a dynamic text field on the stage and give it an instance name of progressText. Make sure it stretches across both frames of the scene. Easy.

Now let's move on to the slightly more difficult MovieClip. This MovieClip will be the bar that fills up as the content loads.

Create a new MovieClip in the library. You can call it whatever you want. What we want to do here is create a tween that is 100 frames long. Then, for each percentage point of the content loaded, we'll simply move the playhead to the appropriate frame.

So go ahead and create a rectangle on the stage. Once that's done, insert a keyframe at frame 100. Go back to frame one and reduce the width of the rectangle to one pixel. Now, right click on frame one and select Create Shape Tween. You should now have a 100 frame animation with the rectangle getting longer as the timeline progresses.

Drag the MovieClip onto the stage onto the same layer as the dynamic text box we created earlier. Give it an instance name of progressBarMC.

Now it's time for the ActionScript. We have only got two lines to add, so it's nothing complicated at all. The two lines we need to add are:

We put these two lines under the line where we tell the movie to redirect back to frame one. All put together, the ActionScript look like this:

So what we're doing here is working out the percentage loaded - by dividing the bytes loaded by the total number of bytes - and then multiplying that by 100 and rounding it to remove any decimal. With this percentage we then navigate out MovieClip to the frame number - so 50% will send the MovieClip to frame 50, 65% to frame 65, etc. - and then we add this number with a percentage symbol to the text field. As the percentage loaded increases the frame the MovieClip is on will increase and this will give the impression of the bar filling up.

The files for this example can be downloaded from the following link. To best test this though you should add a large image to the stage in Scene 2 and then simulate the download with a low bandwidth setting so you can see it in action. We've provided a large image for you to download as well if you want to.

preloader_as2.zip

earth.jpg (4579*4579 - 3.5MB)

With a little imagination the rectangle can be substituted for something else, or perhaps masked to give a greater "filling" effect. You have the knowledge now, it's up to you...

ActionScript 3

We'll pick up where out last article left off and assume that the preloader required is already working. To get our percentage based preloader working, all we need to do is add two lines of ActionScript, add a text field and create a MovieClip.

First, let's add our text field to the stage.

Create a new layer below the existing ActionScript in Scene 1 of our file. Place a dynamic text field on the stage and give it an instance name of progressText. Make sure it stretches across both frames of the scene. Easy.

Now let's move on to the slightly more difficult MovieClip. This MovieClip will be the bar that fills up as the content loads.

Create a new MovieClip in the library. You can call it whatever you want. What we want to do here is create a tween that is 100 frames long. Then, for each percentage point of the content loaded, we'll simply move the playhead to the appropriate frame.

So go ahead and create a rectangle on the stage. Once that's done, insert a keyframe at frame 100. Go back to frame one and reduce the width of the rectangle to one pixel. Now, right click on frame one and select Create Shape Tween. You should now have a 100 frame animation with the rectangle getting longer as the timeline progresses.

Drag the MovieClip onto the stage onto the same layer as the dynamic text box we created earlier. Give it an instance name of progressBarMC.

Now it's time for the ActionScript. We have only got two lines to add, so it's nothing complicated at all. The two lines we need to add are:

We put these two lines under the line where we tell the movie to redirect back to frame one. All put together, the ActionScript look like this:

So what we're doing here is working out the percentage loaded - by dividing the bytes loaded by the total number of bytes - and then multiplying that by 100 and rounding it to remove any decimal. With this percentage we then navigate out MovieClip to the frame number - so 50% will send the MovieClip to frame 50, 65% to frame 65, etc. - and then we add this number with a percentage symbol to the text field. As the percentage loaded increases the frame the MovieClip is on will increase and this will give the impression of the bar filling up.

The files for this example can be downloaded from the following link. To best test this though you should add a large image to the stage in Scene 2 and then simulate the download with a low bandwidth setting so you can see it in action. We've provided a large image for you to download as well if you want to.

preloader_as3.zip

earth.jpg (4579*4579 - 3.5MB)

With a little imagination the rectangle can be substituted for something else, or perhaps masked to give a greater "filling" effect. You have the knowledge now, it's up to you...

ferrari_chris