Macromedia Flash Professional 8 UNLEASHED [Electronic resources] نسخه متنی

Preloaders

Preloaders are movie clips or blocks of code meant to show the user how much content has loaded, and how much there is left to load. It is important to keep the user engaged in something while the content loads in the background. This section will cover several methods of gathering the necessary information to build preloaders, starting with the basic getBytesLoaded() and getBytesTotal() methods.

The getBytesTotal() and getBytesLoaded() Methods

The getBytesTotal() method returns the total file size of the associated movie clip in bytes. The getBytesLoaded() method returns the size of the associated movie clip's file that has been loaded into the Flash player at the time of being called.

Here they both are in their respective forms:

MovieClip_mc.getBytesTotal();
MovieClip_mc.getBytesLoaded();

Both of these methods return numerical values.

They both seem simple enough, so let's jump right into an example.

In this example, we will place a large image in the timeline, and use the getBytesLoaded() and getBytesTotal() methods to determine the percentage of content loaded while we wait.

//stop right here
stop();
//this gets the total file size
var bT:Number = this.getBytesTotal();
//this event will continually check to see how much has loaded
this.onEnterFrame=function(){
//create the variable to see how much has loaded
var bL:Number = this.getBytesLoaded();
if(bT != bL){
//send the percentage loaded to the output panel
trace("Percentage Loaded = "+Math.floor((bL/bT)*100)+"%");
}else{
//go to the second frame
this.gotoAndStop(2);
//destroy the event we no longer need
delete this.onEnterFrame;
}
}

The preceding code first stops the play head from moving forward, then gets the total file size of the main movie. After that, it creates a callback that will constantly check to see how much has loaded. It uses a conditional that determines whether the loaded amount is equal to the total amount. If not, it displays a message in the Output panel with the percentage loaded. If they are equal, the play head is moved to frame 2, and the onEnterFrame callback is destroyed because it is no longer necessary.

Test the movie, and you will see that it jumps right to the second frame, so go to View and choose Simulated Download to see the preloader working. We will have to do that each time we test our preloaders because that is the only way to simulate an Internet download.

That example worked well, but it only sent information to the Output panel. And the user will never see the Output panel because it is part of the authoring environment. You can, however, use ActionScript to create a preloader that a user will see.

Creating a Preloader with ActionScript

The idea of a preloader is to give the user something to look at or interact with, while the main chunk of content is being loaded in the background.

We will continue the preceding example by changing the code in the first frame to this:

//stop the play head
stop();
//create the movie clip to hold the preloader
this.createEmptyMovieClip("preLoader_mc",1);
//put the preloader in the right spot
preLoader_mc._x = 200;
preLoader_mc._y = 200;
//create some variables for the preloader
preLoader_mc.tBytes = this.getBytesTotal();
preLoader_mc.startX = 0;
preLoader_mc.startY = 0;
//create the text field to display the information
preLoader_mc.createTextField("loader_txt",10,0,-40,200,40);
//create a text format and set some properties
var loadFormat:TextFormat = new TextFormat();
loadFormat.font="_sans";
loadFormat.bold=true;
loadFormat.size=14;
preLoader_mc.loader_txt.setNewTextFormat(loadFormat);
//this callback will run the preloader
preLoader_mc.onEnterFrame = function(){
this.clear();
//create the lineStyle
preLoader_mc.lineStyle(2,0x000000,100);
//get the amount of loaded bytes
lBytes = _root.getBytesLoaded();
//create the percentage variable
var percentLoaded:Number = Math.floor((lBytes/this.tBytes)*100);
if(lBytes != this.tBytes){
//insert the text into the text field
this.loader_txt.text="Loaded "+lBytes+" of "+this.tBytes+"\nat "+percentLoaded+"%";
//start the fill
this.beginFill(0x397dce,60);
//draw the loader
this.moveTo(this.startX,this.startY);
this.lineTo(this.startX,this.startY+25);
this.lineTo(this.startX+(percentLoaded*2),this.startY+25);
this.lineTo(this.startX+(percentLoaded*2),this.startY);
this.lineTo(this.startX,this.startY);
this.endFill();
}else{
//go to the second frame
_root.gotoAndStop(2);
//remove this preloader
this.removeMovieClip();
}
}

This code does a lot of things. First, it stops the play head like before. Then it creates an empty movie clip for the preloader to reside in. After that, it sets some of the positioning properties of the empty movie clip. Next, it sets some variables for the preloader, and then creates a text field within the empty movie clip. After that, a TextFormat is created to control the format of our text field. Then the event that will run the preloader for us is created. In the callback, we constantly check the amount loaded, convert it to a percentage, and use a conditional to detect whether the loaded bytes are equal to the total bytes. If not, we put text in the text field and create a rectangle to show the percentage loaded. If the loaded bytes do equal the total bytes, the movie goes to the second frame, and the preLoader_mc movie clip is removed.

Test the movie, and then choose View, Simulate Download. Then you should see a preloader similar to the one shown in Figure 19.11.

That was one way to show a preloader, but we had to build it in ActionScript. There is an easier way to have a preloader using the ProgressBar component.

The ProgressBar Component

The ProgressBar component can be used in conjunction with the Loader component to create a preloader with a dynamic content loader without having to type a single line of ActionScript.

Follow these steps to load in a JPEG image and have it preload:

The source is the most important parameter; it refers to the Loader component we placed on the stage.

Test the movie, and you will see the image and loader on the stage. Choose View, Simulate Download to see the progress bar work as shown in Figure 19.12.