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.

1.

Create a new Flash document and name it preload1.fla.

2.

In the main timeline, create a second keyframe.

3.

In the second keyframe, place an image that is of considerable file size, 50 kilobytes or more.

4.

Return to the first frame of the main timeline, open the Actions panel, and place these actions in it:

 //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.

Figure 19.11. Use ActionScript to create visual preloaders.


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:

1.

Create a new Flash document.

2.

Save this document as progressBar1.fla in the same directory as the external files.

3.

Drag an instance of the Loader component onto the stage and give it an instance name of loader.

4.

Set its parameters to the following:

  • autoLoad true

  • contentPath bridge.jpg

  • scaleContent TRue

5.

Now drag an instance of the ProgressBar above the Loader component and set the parameters to the following:

  • conversion 1

  • direction right

  • label LOADING %3%%

  • labelPlacement top

  • mode event

  • source loader

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.

Figure 19.12. Use the ProgressBar component with the Loader component for a quick and easy dynamic content and preloader combo.





Macromedia Flash Professional 8 Unleashed
Macromedia Flash Professional 8 Unleashed
ISBN: 0672327619
EAN: 2147483647
Year: 2005
Pages: 319

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net