Creating a Numeric Bar Preloader in Flash
By Blue_Chi | Flash MX / Flash 8 | BeginnerHaving a preloader is necessary in all Flash movies displayed on the web as they stop the movie from being played before loading all the data and it also informs the user how much data has already loaded. This tutorial will teach you how to create a very simple numeric bar preloader that could be used in almost any movie. You are not required to have any special ActionScript knowledge to be able to follow this tutorial.
How does it work?
The idea behind a preloader is pretty simple, we are using ActionScript to retrieve the number of bytes that has been loaded and then use this value to create a percentage that is assigned as the width of the loading bar. This tutorial will teach you how to do this in Flash.
Starting off
Start off by creating a new flash movie, you can use the default settings, for the , as the and the .
Setting up the Timeline
Create two layers on the timeline, name the upper one and the one below . the second frame on the and select , and then the second frame in the and select . This makes the contents of the lower layer span across the first and the second frame, while the upper layer has different contents in the first and the second frame.
Creating the Bar
We are going to put our bar in the Contents layer, so on the name of the layer labeled and then use the to draw in the center of the stage a bar similar to the one illustrated in the image below, you'll have to check before you make your bar that there is a fill color and an outline colour selected in the lower part of the toolbar.
We will now have to transform our bar into a movieclip that we can later manipulate using ActionScript. We are going to separate it from its outline so that the outline remains unaltered. Use the to select ONLY THE OUTLINE of our bar.
We will now transform our outline into a movie clip. Simply hit on your keyboard to show the window, select and name your symbol .
That should do the outline part, select the colored bar body now using the and hit to open the window. We are going to change the , i.e. the place from which our bar is going to grow bigger, select the point on the side of the square. Select , name the symbol and then hit .
A small point that we need to do now is make sure the outline appears above the bar, because of the order in which we created the objects, the outline would be lower because it was created earlier. Simply use the to select the bar symbol and then hit to make the bar go below the outline.
This is our final step for the bar, while the colored bar body is still , access the and assign an to it. This makes it possible for us to manipulate this object using ActionScript. Use the instance name .
Creating the Text Field for our Numeric Preloader
This one is easier, use the to create a text field below the bar and then access the to change the to and assign the instance name to it. I have set the font to _sans, the font size to 12px and the color to black.
Adding the ActionScript
the second frame on the labeled Actions and select . Copy and paste the code below to make our preloader functional.
if (_root.getBytesTotal() != _root.getBytesLoaded()){
gotoAndPlay(1);
}
bar_mc._xscale=(_root.getBytesLoaded()/_root.getBytesTotal())*100;
loader_txt.text=Math.round((_root.getBytesLoaded()/_root.getBytesTotal())*100)+"%";
The first part of our code tells the movie to go back to the first frame if the amount of data loaded does not equal the total amount of the data the file contains. We later set the horizontal scale of our bar to the percentage of data loaded, and then used the rounded value as the text value of our text field.
Our preloader is now ready to use, you can insert a keyframe on the forth frame of our content layer and then import a large image to the stage by going though . You can then test your movie and then simulate download by going through .
This concludes our tutorial. I hope that you learnt how to create a preloader that you could use for all of your flash movies, you can download a sample FLA of the end result through this link. Please feel free to post your comments, questions or suggestions at the Oman3D Forum.
- End of Tutorial.