Creating an application with the ProgressBar component

The following procedure explains how to add a ProgressBar component to an application while authoring. In this example, the progress bar is used in event mode. In event mode, the loading content must emit progress and complete events that the progress bar uses to display progress. (These events are emitted by the Loader component. For more information, see Loader component.)

To create an application with the ProgressBar component in event mode:

Select File > New and choose Flash File (ActionScript 2.0).
Drag a ProgressBar component from the Components panel to the Stage.
In the Property inspector, do the following:
- Enter the instance name my_pb.
- Select Event for the mode parameter.
Drag a Loader component from the Components panel to the Stage.
In the Property inspector, enter the instance name my_ldr.
Select the progress bar on the Stage and, in the Property inspector, enter my_ldr for the source parameter.
Select Frame 1 in the Timeline, open the Actions panel, and enter the following code, which loads a JPEG file into the Loader component:

/**
 Requires:
  - Loader component on Stage (instance name: my_ldr)
  - ProgressBar component on Stage (instance name: my_pb)
*/

System.security.allowDomain("http://www.helpexamples.com");

var my_ldr:mx.controls.Loader;
var my_pb:mx.controls.ProgressBar;

my_pb.source = my_ldr;
my_ldr.autoLoad = false;
my_ldr.contentPath = "http://www.helpexamples.com/flash/images/image1.jpg";

// when autoLoad is false loading does not start until load() is invoked
my_ldr.load();

Select Control > Test Movie.

In the following example, the progress bar is used in polled mode. In polled mode, the ProgressBar uses the getBytesLoaded() and getBytesTotal() methods of the source object to display its progress.

To create an application with the ProgressBar component in polled mode:

Select File > New and choose Flash File (ActionScript 2.0).
Drag a ProgressBar component from the Components panel to the Stage.
In the Property inspector, enter the instance name my_pb.
Select Frame 1 in the Timeline, open the Actions panel, and enter the following code, which creates a Sound object called my_sound and calls loadSound() to load a sound into the Sound object:

/**
 Requires:
  - ProgressBar component on Stage (instance name: my_pb)
*/

System.security.allowDomain("http://www.helpexamples.com");

var my_pb:mx.controls.ProgressBar;

my_pb.mode = "polled";
my_pb.source = "my_sound";

var pbListener:Object = new Object();
pbListener.complete = function(evt_obj:Object) {
 trace("Sound loaded");
}
my_pb.addEventListener("complete", pbListener);

var my_sound:Sound = new Sound();
my_sound.loadSound("http://www.helpexamples.com/flash/sound/disco.mp3", true);

Select Control > Test Movie.

In the following example, the progress bar is used in manual mode. In manual mode, you must set the maximum, minimum, and indeterminate properties in conjunction with the setProgress() method to display progress. You do not set the source property in manual mode.

To create an application with the ProgressBar component in manual mode:

Select File > New and choose Flash File (ActionScript 2.0).
Drag a ProgressBar component from the Components panel to the Stage.
In the Property inspector, do the following:
- Enter the instance name my_pb.
- Select Manual for the mode parameter.
Select Frame 1 in the Timeline, open the Actions panel, and enter the following code, which updates the progress bar manually on every file download by using calls to setProgress():
```
for (var i:Number = 1; i <= total; i++){
    // insert code to load file
    my_pb.setProgress(i, total);
}
```
Select Control > Test Movie.

To create an application with the ProgressBar component in manual mode (example 2):

Select File > New and choose Flash File (ActionScript 2.0).
Drag a Label component onto the Stage and give it an instance name my_label.
Drag a ProgressBar component onto the Stage and give it an instance name my_pb.
Select the my_pb ProgressBar on the Stage and, in the Property inspector, set the component's mode parameter to "manual".

Select Frame 1 in the Timeline, and add the following ActionScript in the Actions panel:

var feed_xml:XML = new XML();
feed_xml.onLoad = function(success:Boolean):Void {
    clearInterval(timer);
    my_label.text = "XML Loaded";
    my_pb.setProgress(feed_xml.getBytesLoaded(), feed_xml.getBytesTotal());
};
function updatePB(local_xml:XML):Void {
    my_pb.setProgress(local_xml.getBytesLoaded(), local_xml.getBytesTotal());
}
var timer:Number = setInterval(updatePB, 100, feed_xml);
feed_xml.load("http://www.helpexamples.com/flash/xml/menu.xml");

Select Control > Test Movie.

To create an application with the ProgressBar component in manual mode (example 3):

Select File > New and choose Flash File (ActionScript 2.0).
Drag a ProgressBar component onto the Stage and give it an instance name my_pb.
Select the my_pb ProgressBar on the Stage and, in the Property inspector, set the component's mode parameter to "manual".

Select Frame 1 in the Timeline, and add the following ActionScript in the Actions panel:

var img_mcl:MovieClipLoader = new MovieClipLoader();
var mclListener:Object = new Object();
mclListener.onLoadProgress = function(target_mc:MovieClip, numBytesLoaded:Number, numBytesTotal:Number) {
    my_pb.setProgress(numBytesLoaded, numBytesTotal);
};
mclListener.onLoadComplete = function(target_mc:MovieClip) {
//my_pb._visible = false;
};
img_mcl.addListener(mclListener);
this.createEmptyMovieClip("image_mc", 20);
img_mcl.loadClip("http://www.helpexamples.com/flash/images/image1.jpg", image_mc);

NOTE

You can uncomment the line //my_pb._visible = false; if you want to hide the component after the content loads.

Select Control > Test Movie.