Creating a preloader for your Flash site using the image of a bottle and a rectangular mask - part 3

Let me show you now how this gizmo works :)!

Explaining the ActionScript code behind the preloader

The first line of code stops your Flash movie from playing:

stop();

The second one makes a change to the visual appearance of the rectangle movie clip (which is a mask, remember):

rectMask_mc._height = 1;

The _height property defines the height of an object in pixels. The above line shrinks the rectMask_mc movie clip to the minimum possible value: one. This is done so that none of the image of the bottle is visible at the start of preloading, which makes perfect sense, since the movie has just appeared and the content of the site has yet to load at all.

Now comes the piece of ActionScript that sets the preloader in motion:

this.onEnterFrame = function():Void {
var loadedData:Number = this.getBytesLoaded();
var allData:Number = this.getBytesTotal();
var percent:Number = Math.round(loadedData/allData*100);
rectMask_mc._yscale = percent;
if (loadedData >= allData) {
gotoAndStop(10);
delete this.onEnterFrame;
}
};

Inside the top line of this chunk of code, you can see a special ActionScript keyword: onEnterFrame. This keyword refers to a special kind of event. Events in Flash are things that happen: a user pressing or moving his mouse, a sound being loaded, etc. While most of the events in Flash happen via some form of user interaction with your movie or during timeline playback, the onEnterFrame event happens only when you make it so by writing it in ActionScript.

The event in question works in the following way: it executes all that is contained within itself as many times per second as the speed of your movie tells it to. This means that if your movie has a speed of 30 fps (you have set this speed at the very outset of this tutorial, remember), the onEnterFrame event will fire 30 times in a second. And what will it execute this many times per second? To understand this, let's analyze the line of code it lies in:

this.onEnterFrame = function():Void {

The ActionScript keyword this denotes the timeline it is sitting on. Since it is placed on the main or root timeline in this case, it is pointing to the SWF movie itself and not some movie clip or anything else. So, the construct this.onEnterFrame means the onEnterFrame event that is assigned to the main movie (the SWF file itself). You can choose any movie clip to attach this event to, but I have just decided to use the main timeline.

The code that follows says that a function is assigned to this event. The result of this construct makes this function execute at the speed of the onEnterFrame event, i.e. the speed of your movie. Thirty times in a second in this case.

The keyword Void tells Flash that this function returns no value. Unlike this one, some functions do, like a number or a string of text, for example.

NOTE You assign a function to an event via the assignment operator (=), which should not be confused with the equality operator, which is written as two equals signs (==), and is actually used to check if two values are equal.

And finally, the code that gets executed at this speed is the code placed between the function's curly brackets - { and }. Let's examine it in more detail. Here it is:

var loadedData:Number = this.getBytesLoaded();
var allData:Number = this.getBytesTotal();
var percent:Number = Math.round(loadedData/allData*100);
rectMask_mc._yscale = percent;
if (loadedData >= allData) {
gotoAndStop(10);
delete this.onEnterFrame;
}

The first line looks up the amount of data that has been loaded so far and stores it in a variable that I chose to call loadedData:

var loadedData:Number = this.getBytesLoaded();

The getBytesLoaded() method is used to see how much of a SWF movie has been loaded up to that moment. You can see that the keyword this is used once more, this time to tell Flash that it should check how much of the timeline this piece of ActionScript code resides in has been loaded so far - again meaning the SWF file itself.

Once this data is retrieved (note that this is a numerical value, the amount of bytes loaded so far), it is stored in a variable. When defining a variable in ActionScript 2.0, you must put the keyword var in front of its name, and the type of data it will store after a colon (:) that follows the name. Since the amount of bytes that have been loaded so far is a numerical one, you must put the keyword Number here. To translate ActionScript into English:

var loadedData:Number

means the variable called loadedData will store a numerical value. Ok, the next line does a similar thing:

var allData:Number = this.getBytesTotal();

It looks up the total amount of data that has to be loaded, via the getBytesTotal() method and than stores it in a variable that I named allData.

To be able to put the preloader at work, you need both pieces of information - the amount of your SWF movie that has been loaded (this information is read by Flash each time the onEnterFrame event fires and the function that is assigned to it gets executed) and the complete size of your SWF movie. From these two, you will be able to pull out the percentage of your movie that has been loaded, via a simple mathematical formula. All of this is contained in the following line of code:

var percent:Number = Math.round(loadedData/allData*100);

To obtain a percentage, you must divide the part by the whole and then multiply the result by 100: loadedData/allData*100. The result of this simple operation is then rounded with the round method of the Math object. This is made because you will need round numbers to resize the rectangular mask movie clip properly. Finally, this data (the percentage) is stored in the percent variable, which is of course a numerical one.

Now comes the beauty of it all: scaling the rectangular mask movie clip according to the percentage of your movie that has been loaded so far:

rectMask_mc._yscale = percent;

The _yscale property of the rectMask_mc movie clip will be the same as the number stored in the percent variable (which is the percentage of your SWF that has been loaded up to this point). Let me explain you now what is this _yscale property: it serves to resize the height of a movie clip in relation to its original height. The _height property of a movie clip is its height expressed in pixels. The _yscale property is its height expressed as a percentage value.

An actual example is the best way to clarify this: let's suppose that you have a movie clip that is 200 pixels high. When you created this movie clip, its original height of 200 pixels is considered to be from that moment on its _yscale property at 100%. Later, if you want to change its height via ActionScript, you can do it in two ways: via the _height property, by writing something like this:

myMovieClip._height = 100;

or via the _yscale property, like this:

myMovieClip._yscale = 50;

The result is the same: the movie clip's height is cut down in half, the only difference being that a pixel value is used in the former, and a percentage value in the latter. Keep in mind that in both cases only the number is written, you never write the percentage sign, pixels or anything else. Flash knows what you are talking about! :)

To go back to the preloader, the _yscale property is used because it will scale the height of the masking rectangle exactly by the amount of your movie that has been loaded so far. In plain English, if half (50%) of your movie has been loaded, the height of the rectangle mask will be exactly 50%, revealing just half of the image beneath it! Once the movie has fully been loaded, the height of the mask will be 100%, showing all of the bottle in the image below. All of the bottle can be seen - your movie has been completely loaded! Now ain't Flash great? :)

Flash has to know if everything has been loaded so it can proceed to the frame where the site content is placed. You will help him to decide if it can do that or not via a simple conditional statement:

if (loadedData >= allData) {
gotoAndStop(10);
delete this.onEnterFrame;
}

In plain words, the above conditional statement translates as the following:

if (this condition shows as being true) {
run all the code contained here
}

If this condition evaluates as false, the code between the curly brackets will simply be ignored and Flash will skip it as if it didn't exist at all. And this particular condition checks if the amount of your movie that has been loaded so far is greater than or equal to your movie's total size (these values are being looked up in the variables that keep them: loadedData and allData). It makes sense, doesn't it? Check this out:

User: Hey, Flash, can I see the site now?
Flash Player: Wait, let me see... I have loaded 100,000 bytes so far... and the movie's total size is 400,000 bytes. 100,000 is less than 400,000. I am sorry, but you will have to wait a little bit more. Don't worry, I will tell the preloader to show you how much more you have to wait.
User: That's no problem, I want to see this awesome site, so I'll wait.
Flash Player: Dude, that is so cool. Can't wait to show it to you!

Now that this little drama has explained the meaning of a conditional statement to you :), let me show you what gets executed once the condition evaluates as true. The first line,

gotoAndStop(10);

sends the playhead flying over to frame 10 and it stops it there. The Flash site is seen now by the user in all its glory. The next line,

delete this.onEnterFrame;

does an important thing. It deletes the onEnterFrame event. Bye bye onEnterFrame! Seriously, this has to be done, otherwise it would go on and on until the user leaves the page your SWF movie is displayed on. And this event gets executed 30 times per second in this example. By deleting it, you free some memory space on the user's computer and also put a less load on its processor.

Always remove the code that isn't of any use any more. Even if the functions and events that are being run don't seem to be putting much load on the processor and don't occupy much memory space, delete them if they don't have a purpose to exist. This is how great user experiences are made, by paying attention to the smallest detail. And I want to teach you exactly this, among many other things.

So if you are interested in many more ways that preloaders can be made, check out my quality tutorials on this subject. Bookmark my site, because you'll come back for more new Flash tutorials that are going to be posted here. And good luck!

Download the source FLA file for the preloader explained in this lesson.

If you have found this tutorial useful, please consider donating to support lukamaras.com.

Got any comments or questions? Want to add something but don't know how? Discuss it in the forum!