Flash Explained

There is a certain type of preloader often seen on flash sites: the one where the text showing the percentage of the movie loaded changes color as the loading bar passes over it. This is done with the use of a mask.

To see what I mean, look at the flash movie below. This is the one you’ll be making in this tutorial. The size of this preloader, including the image of the sparrow and the logo, is just 5 KB! Now isn’t that just extra cool? 🙂

1 Open a new flash document.

2 Using the rectangle tool (R), draw a rectangle 300 px wide and 10 px high on the stage. Make its fill color #660000, and its stroke (edge) color black.

Creating the movie clip containing the preloading bars and text fields

3 Select the rectangle (both the fill and the edge) and convert it to a movie clip symbol (F8). Call the movie clip shows loading. Double-click on the movie clip to enter its timeline.

4 Once inside the movie clip, call the layer you're on loading bar. Select the rectangle's edge by double-clicking on it. Cut the edge (Edit > Cut), lock this layer. Create a new layer, call it frame, paste in place the edge right in it (Edit > Paste in Place). Lock this layer.

5 Go back to the loading bar layer and unlock it. Select the rectangle (the fill that stayed after cutting away the edge) and convert it to a movie clip (F8). Call the movie clip loading bar. Make sure its registration point is in the upper left corner. This is important, because you want the loading bar to stretch from left to right, and not some other way.

6 With the movie clip still selected, go to the Properties panel and give it the instance name loadingBar. Make its width 1 pixel by entering this value in the W field. Lock this layer.

7 Create a new layer and call it black text. Put this layer below the two other layers.

8 Select the Text tool (T) and select the Dynamic Text option in the Properties panel. Select a cool pixel font made for flash 🙂

If you don't have a pixel font, go to the Orgdot's site and download the free pixel fonts. The folks at Orgdot are way cool because you can use their fonts completely free, even for commercial projects! I use their fonts in my tutorials 🙂

Once you've downloaded their fonts and installed them, make sure you set the font size to 8 in the Properties panel because they render properly only at that particular size.

9 Draw a text field on stage by clicking and dragging. It doesn't have to be big, because it will contain just the numbers showing the percentage of the external flash movie being loaded.

What's important is that, once you have drawn your dynamic text field, you must also set its X and Y coordinates in the Properties panel to round numbers if you wish the pixel font to render perfectly.

10 In the properties panel, give the text field the instance name blackText. On the right side of the panel, click the Embed button and select the Numerals property and click OK.

That way, the number characters for this font will be embedded with the movie. That means every visitor to your site will see the exact same font. Why is this necessary? Simply because if you don't embed the needed characters in the movie, Flash player will look for them on the user's machine. And, believe me, the average user does NOT have an exotic pixel font installed on hers/his computer.

11 With the text field still selected, copy it, create a new layer above the layer loading bar and call it white text. Lock the black text layer. Paste in place the text field in the white text created layer.

12 Select this second text field and change its Instance name to whiteText. Lock this layer.

Top of page

Making the mask

13 Create a new layer above the white text layer and call it mask. Unlock the loading bar layer, select the loadingBar movie clip in it and copy it.

Lock the loading bar layer, select the mask layer and paste in place the movie clip in it. Give this movie clip the Instance name maskBar.

Right-click on the mask layer and select Mask. This layer will become a mask layer, and the layer beneath it will automatically get masked by it.

14 You need to mask the loading bar layer too. Click on it and drag it upwards until you see a thick line appear indicating that the layer is ready to fall into place.

Release the mouse and the layer will become masked.

To make things easier to understand, here is a little diagram of the shows loading movie clip structure I made for you:

The black text field on the bottom is seen right away when the movie starts loading. There are two layers on top of it, the loading bar and the white text. The white text is shown in yellow on the diagram, so you can better see it. They are both masked with the mask layer.

The maskBar is an instance of the loading bar movie clip. You will animate it later with ActionScript, exactly the same way and at the same time as the loadingBar movie clip. In that way, the loading bar will progress, and when it arrives over the text, the white text field will begin to show (because the mask will get stretched over it thanks to ActionScript code), and the bar will cover the black text beneath it.

It isn't difficult at all, see? 🙂 A small trick giving you a nice effect. And, yes, of course, there is the frame on top of everything, giving the user the possibility to see how much more there is to wait before the movie starts, in addition to the percentage shown by the two text fields.

15 Now that everything is in place and properly named, go back to the main scene.

16 The complex movie clip you just exited, select it on stage and give it the instance name progressTracker. Call the layer it is situated on progress tracker mc or whatever you like. Lock this layer.

Top of page

Creating an empty movie clip

17 Make a new layer and call it place holder mc . Here you will put an empty movie clip that the main site content will load into.

18 Go to Insert > New Symbol. Select movie clip as symbol and call it empty mc. Click OK. Click on Scene 1 link to return to the main scene and create an empty movie clip in that way.

19 Open the Library (CTRL+L for PC and Command+L for Mac) and drag an instance of empty mc to the stage. Position it in the top left corner of the stage with the aid of the Align panel.

In the Properties panel, give it the Instance name placeHolder. Lock this layer.

Before proceeding, download the SWF file containing a mock-up flash site I made just for the purpose of this tutorial. Unzip it and put it in the same folder as the flash document you are now working on.

Top of page

The ActionScript code

20 Make a new layer and call it actions. Select its first keyframe and open the Actions panel (F9). Enter this code:

placeHolder.loadMovie("http://www.mysite.com/mainsite.swf");
progressTracker.onEnterFrame = function() {
movieLoaded = Math.round(this._parent.placeHolder.getBytesLoaded()/1024);
movieComplete = Math.round(this._parent.placeHolder.getBytesTotal()/1024);
percentage = Math.round(movieLoaded/movieComplete*100);
this.loadingBar._xscale = percentage;
this.maskBar._xscale = percentage;
if (percentage < 10) {
this.blackText.text = "0" + percentage;
this.whiteText.text = "0" + percentage;
} else if (percentage == 100) {
delete this.onEnterFrame;
this._visible = false;
//this._parent.sparrowImage._visible = false;
//this._parent.sparrowLogo._visible = false;
} else {
this.blackText.text = percentage;
this.whiteText.text = percentage;
}
}

Test your movie. The site will load instantly if you've followed everything I explained to you up to this point. Press CTRL+ENTER (Command+ENTER on a Mac) again to simulate a modem download. You should see the preloader at work.

Top of page

Explaning the ActionScript that makes the preloader work

I won't go into much detail here, because the thorough explanation on how to make a progress bar can be found in the tutorial about making a preloader with a loading bar. I will explain the more important point of this tutorial - how does the ActionScript in conjunction with the design work to make the effect obtained possible.

The first line,

placeHolder.loadMovie("http://www.mysite.com/mainsite.swf");

tells flash to load the mainsite.swf movie into the clip called placeHolder.

The next line defines a function which is linked to the progressTracker movie clip's onEnterFrame event. That means the function will be executed as much times per second as there are frames per second defined in the document's framerate. This document's framerate is set at the deafult 12 fps, which means the function will execute 12 times per second.

progressTracker.onEnterFrame = function() {
... all the function's code goes here ...
}

The first three lines of code inside the function define three variables: movieLoaded, movieComplete and percentage. They respectively hold the values of how much of the external movie has been loaded so far (in bytes), what's its total size (in bytes too) and the percentage of the movie loaded so far.

The third variable (percentage) derives its value from the first two by use of a simple mathematical formula. The formula says that the percentage is obtained by dividing the part with the whole, and then multiplying the result with 100. The final result of the operation is then rounded to a whole number.

progressTracker.onEnterFrame = function() {
movieLoaded = Math.round(this._parent.placeHolder.getBytesLoaded()/1024);
movieComplete = Math.round(this._parent.placeHolder.getBytesTotal()/1024);
percentage = Math.round(movieLoaded/movieComplete*100);

Next, the movie clips loadingBar and maskBar have their _xscale properties manipulated so that they match the percentage of the movie loaded so far. It can easily be seen from the lines of code that the two movie clips will get stretched the exact same way at the same time.

this.loadingBar._xscale = percentage;
this.maskBar._xscale = percentage;

Then, you have an if statement. It says that if the value of the percentage variable is below 10, the text in both blackText and whiteText text fields should have a zero character added in front.

This is made so that when the percentage value is below 10 (let's say it's 7) the fields do not display "7" but "07" instead.

if (percentage < 10) {
this.blackText.text = "0" + percentage;
this.whiteText.text = "0" + percentage;

The next portion of code says that if the value of the percentage variable equals 100, the onEnterFrame for this movie clip should be deleted. This is done because if the external flash movie has loaded completely, there's no sense in leaving the event and the function attached to it occupy memory space.

} else if (percentage == 100) {
delete this.onEnterFrame;
this._visible = false;
//this._parent.sparrowImage._visible = false;
//this._parent.sparrowLogo._visible = false;

The line this._visible = false; tells Flash to turn off the visibility of the progressTracker movie clip. It has served its purpose and therefore, you are hiding it. Always clean up the things which have served their purpose and will not have any futher use in your project.

The two commented lines serve the purpose of hiding the movie clip containing the sparrow image and the movie clip containing the logo. I have commented out these lines because they are optional. If you want to put the sparrow in your project, save the image below this paragraph to your computer. The logo is simple text typed with the Times New Roman font.

//this._parent.sparrowImage._visible = false;
//this._parent.sparrowLogo._visible = false;

So, after that just remove the coments (//) from these lines.

The final else says that if every previous condition does not exist (percentage less than 10 or equal to 100) the text fields should just display the value of the percentage variable.

} else {
this.blackText.text = percentage;
this.whiteText.text = percentage;
}
}

And that's it! Check out my tutorial on creating a preloader which uses a mask over an image to gradually show a bottle - it looks cool!

Download the zipped source FLA file for this tutorial.

Comments

Submit a comment