Basic internal percentage preloader

With this tutorial, you will learn how to make a basic preloader which shows how much of the Flash movie in which it resides has loaded. This kind of preloader is best used with small movies, intros and the like.

Setting up the scenes

First, we will make two scenes, to separate the preloader from the actual content of our flash movie. By doing so, it will be easier to make any changes to the content or the preloader later, if need be.

1. Open a new Flash document. Press SHIFT+F2 or choose Window > Other panels > Scene. This will open the Scene panel. You will see Scene 1 inside it, which is the scene we are currently in. Double-click on its name and call it preloader. You will see its new name appear above the Layers, on top of the Timeline panel.

2. Still in the Scene panel, click on the Add scene button, which is situated at the lower right corner of the panel, marked with a small plus symbol. You will create a new scene. Double-click on its name and call it content.

The scenes in a Flash movie are parts of the same timeline. They exist to make editing a movie easier. Imagine having a big flash movie with an intro, credits, opening scene, second scene, etc. Now imagine having all that on one single scene! If anything needed to be adjusted, especially animation, your work would be made impossible by having to adjust the keyframes back and forth by pushing them a couple of hundred frames at a time.

The scenes play in a movie sequentially, the top scene in the Scene panel being the first to play, followed by others beneath it. If you want, you can close the Scene panel now, we won't be needing it anymore.

3. We need to put some material in our content scene to make our filesize a little bit bigger, otherwise we won't be able to see the preloader at work, if everything loads instantly. To that end, an image will be sufficient. Press CTRL+R or choose File > Import > Import to Stage, find an image with the filesize about 80 Kb - 100 Kb (also, if you choose a JPEG, be sure it's a standard, NOT a progressive JPEG) and click OK.

Call the layer we just placed an image in site content or image or whatever you like. Lock this layer.

4. Test your movie by pressing CTRL+ENTER. If you did everything up to this point correctly, you will see the image flash on screen. Now why is that happening? The first scene, preloader, shows briefly on the screen with nothing in it, followed immediately by the content scene with the image, and then the whole movie loops, until we close it. So, this would remain the same even after we finish the preloader. In order to avoid this, we need to stop the movie at the content scene.

5. Still in the content scene, make a new layer and call it actions or actionscript and lock it (you can put ActionScript in a layer even if it's locked). Now, click on its first frame and press F9 (ALT+F9 on a Mac) to open the Actions panel. Type in the following cline of code:

stop();

and test your movie again. It should show the image, with no flashing.

Creating the preloader

6. Now go back to the preloader scene. To do so without the Scene panel, go to the little scene icon situated on the top right above the timeline (see image below). Click on it, and select the preloader scene from the small pop-up menu.

7. Next, we will create a dynamic text field which will display the percentage of the movie loaded. To do so, select the Text tool (T) from the Tools panel. Click and drag on the stage to create a text field. By default, Flash will create a Static text field. To change it to a dynamic text field, go to the Properties panel below the scene and you will find a small drop-down menu on its left side. Choose Dynamic Text. Next, select a font size in the same panel, and the color. Be sure to select any color but white, as our movie has a white background.

Below the menu where we defined our text field as a dynamic one, you will see a small input field called Instance Name. This is where we'll put the name of our text field. This is necessary if we want to control the text displayed in our text field via ActionScript, dynamically. Let's call it infodisplay. Type this in and be sure to press ENTER before clicking anywhere else.

Now, we will make our movie loop inside the preloader scene, until all the content is loaded. Once that is accomplished, we will tell Flash to go to the content scene.

8. Call the layer with our dynamic text field textfield and lock it. Create a new layer and call it actions. Lock this layer too. In this layer, place your mouse over the frame no.2, right-click and choose Insert Keyframe from the pop-up menu.

In the layer textfield go to the second frame also, right-click and choose the Insert Frame option from the pop-up menu. You should have the situation in your Flash movie match the image below.

8. Choose the second keyframe in the actions layer (left-click on it) and open the Actions panel (Window > Actions). Type in the following code:

gotoAndPlay(1);

As a proof of having placed the ActionScript code in the right keyframe (keyframe 2 in the actions layer in our case), you should see a small letter "a" displayed in it. This small piece of ActionScript code will keep the movie looping in the preloader scene. It basically tells Flash to return to frame 1 and continue playing. Try it - test the movie and you won't see the image in the content scene, but just a blank screen. This is ok, because we don't have anything in the preloader scene yet, except a blank text field which isn't visible because there isn't any text in it yet.

9. Now, click in the first keyframe of the actions layer and enter the following code, just to make sure that we can properly control our infodisplay text field dynamically with ActionScript.

infodisplay.text = "testing 123";

Test your movie and you should see the text "testing 123" displayed on the screen, in our text field. The line of code above, translated into human language, literally tells Flash "The text in the textfield named infodisplay should be what you see between the quotation marks: testing 123."

10. If everything works fine, you can delete this line of code we just wrote. If you have problems displaying the text in the text field, check that:

a) your text field is dynamic, not static - do this by unlocking the layer textfield, selecting the textfield with one click and looking at the left side of the Properties panel,

b) your text field is properly named - the name which appears in the Instance Name field in the Properties panel should be the same as in the line of ActionScript code we wrote to test it. Beware that Flash is case-sensitive! A text field named infodisplay is not the same as Infodisplay or infoDisplay. Also, you can't have any spaces or special characters in the name.

c) you didn't choose white as the colour of your text field.

11. Now, let's make our preloader work. Type in the following code (in the first keyframe of the actions layer):

movieLoaded = this.getBytesLoaded();
movieTotal = this.getBytesTotal();
percentage = movieLoaded/movieTotal*100;
infodisplay.text = percentage;

Test your movie - press CTRL+ENTER (PC) or COMMAND+ENTER (MAC). You will see the number 100 displayed. While still having your movie running, press CTRL+ENTER (PC) or COMMAND+ENTER (MAC) again. This will test your movie again, but it will simulate a 56K modem downloading your movie from the Internet. If you are a mouse clicker, you can do this by choosing View > Simulate Download while your movie is running, and choose which speed to simulate by going to View > Download Settings.

OK, once you did that, you certainly noticed that the text field displayed the percentage of the movie being downloaded so far. But, the percentage wasn't a round number, but rather a floating-point one. Before we proceed to round our percentage, let's first explain the above ActionScript code, line by line.

movieLoaded = this.getBytesLoaded();

The above line creates a variable called movieLoaded, which stores the information on how much bytes of our Flash movie have been loaded so far. The getBytesLoaded command fetches the number of bytes which have been loaded so far. The keyword this tells Flash that the command getBytesLoaded is to be applied to the timeline on which the keyword itself resides. OK, you say, but, please, repeat this in human language :) Here is the explanation:

When the keyword this is written in a keyframe on a layer, it indicates that what will follow it will be applied to this same timeline. In our case, the keyword this is written on the main timeline of our Flash document, which means the keyword indicates the Flash document itself. That is why the movieLoaded variable will hold the value of our Flash document bytes loaded so far.

movieTotal = this.getBytesTotal();

This line of ActionScript code is similar to the one preceding it. It creates a variable called movieTotal, and stores the total weight of our Flash movie inside it, again, in bytes.

percentage = movieLoaded/movieTotal*100;

We need the information on how much bytes of our Flash movie have been loaded so far and how much bytes our movie weighs in total, so we that we can calculate a percentage of the movie loaded so far, to display in our text field. Why a percentage? Well, the visitors to your site aren't interested in bytes, we can freely assume. A percentage is a clear and simple indicator of how much more they must wait in order to see the Flash movie or site they want to see.

So, a variable called percentage is created (you can call it loadedSoFar, ratio, displaypercentage or whatever you like, the important thing is to stick with that name throughout your document) . This variable holds the numerical value of how much percent of our movie has been loaded so far. How? By doing a simple mathematical operation. We divide the part (movieLoaded) with the whole (movieTotal) and multiply the result by 100 and we get the percentage. We will explain how to round the resulting value in a moment.

infodisplay.text = percentage;

This ActionScript line tells Flash to display the value stored in the percentage variable in the infodisplay text field. Cool! Let's move on!

12. Modify the line containing the percentage calculation as follows (the modifications to the code are displayed in bold):

percentage = Math.round(movieLoaded/movieTotal*100);

Don't forget the parenthesis at the end! OK, so what this does is: the Math object is given a method (a method is a thing an object can do in a programming language), in this case, round. This is followed by the percentage calculation within parenthesis. The Math.round piece of code will round whichever number it finds in parenthesis following it. Test the movie (by repeating the keyboard shortcut twice, as explained at the beginning of part 11 of this tutorial) and you'll see the rounded percentage, i.e. a whole number displayed.

We got the percentage of our Flash movie being loaded displayed correctly, but a number in itself may be insufficient. Let us give our visitors some more information, like: Loaded: 100%. To do this, modify the last line of our code, which tells Flash what to display in the infodisplay text field. Again, the modifications to the ActionScript code are shown in bold:

infodisplay.text = "Loaded: " + percentage + " %";

Notice the space after the word loaded:. Ommiting the space won't cause our code to malfunction, but it will look ugly in our text field when displayed. Try it and see for yourself. Test the movie and see the result.

If you don't see the whole text displayed, and you typed in all of the code correctly, it means that your text field is too small. If this is the case, unlock the layer containing the text field, make the field more wide or change the font size if it's too big.

Now, let's tell Flash if our movie has been loaded, to proceed to the content scene with the image in it.

13. After the last line of our current ActionScript code, add the following:

if (percentage >= 100) {
gotoAndPlay(3);
}

This piece of code tells Flash that if the percentage variable has a value greater or equal to 100 (i.e. 100% of our movie has been loaded), it must proceed to frame 3. Remember, our preloader scene has only two frames, so the 3rd frame is considered to be the 1st frame of the content scene. So, after 100% of our Flash movie has been loaded, the playhead will jump to the content scene. Test the movie once (CTRL+ENTER) and you'll see the content, our image, appear immediately. Press the same keyboard shortcut again and there is only white screen. In order to correct this, modify the line

percentage = Math.round(movieLoaded/movieTotal*100);

so that it reads (the change is marked in bold)

percentage = Math.floor(movieLoaded/movieTotal*100);

The method floor tells flash to round the number between parenthesis to the lower value. That means, if the operation between parenthesis yields, let's say, for example, 28.9, or 28.1 or 28.5 or 28.7 it will always be rounded to 28, NOT 29. Now why this functions and the method round does not, I don't know. It just is so. Just so that you know, there is also a method ceil (Math.ceil), which rounds the number to the higher value.

That's it for the basic preloader. Check out the other preloader tutorials to find out how to create a graphic preloader and other kinds of preloader tricks and variations. Below you can download the source file for this preloader.

Download the zipped source FLA file.