PreviousNext

Using the ProgressBar component

A progress bar allows you to display the progress of content as it loads. This is essential feedback for users as they interact with an application.

There are several modes in which to use the ProgressBar component; you set the mode with the mode parameter. The most commonly used modes are "event" and "polled". These modes use the source parameter to specify a loading process that either emits progress and complete events (event mode), or exposes getBytesLoaded and getsBytesTotal methods (polled mode). You can also use the ProgressBar component in manual mode by manually setting the maximum, minimum, and indeterminate properties along with calls to the ProgressBar.setProgress() method.

ProgressBar parameters

The following are authoring parameters that you can set for each ProgressBar component instance in the Property inspector or in the Component Inspector panel:

mode The mode in which the progress bar operates. This value can be one of the following: event, polled, or manual. The default value is event.

source A string to be converted into an object representing the instance name of the source.

direction The direction toward which the progress bar fills. This value can be right or left; the default value is right.

label The text indicating the loading progress. This parameter is a string in the format "%1 out of %2 loaded (%3%%)"; %1 is a placeholder for the current bytes loaded, %2 is a placeholder for the total bytes loaded, and %3 is a placeholder for the percent of content loaded. The characters "%%" are a placeholder for the "%" character. If a value for %2 is unknown, it is replaced by "??". If a value is undefined, the label doesn't display.

labelPlacement The position of the label in relation to the progress bar. This parameter can be one of the following values: top, bottom, left, right, center. The default value is bottom.

conversion A number to divide the %1 and %2 values in the label string before they are displayed. The default value is 1.

You can write ActionScript to control these and additional options for ProgressBar components using its properties, methods, and events. For more information, see ProgressBar class.

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, 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. The Loader component emits these events. For more information, see Loader component.

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

  1. Drag a ProgressBar component from the Components panel to the Stage.
  2. In the Property inspector, do the following:
    • Enter the instance name pBar.
    • Select event for the mode parameter.
  3. Drag a Loader component from the Components Panel to the Stage.
  4. In the Property inspector, enter the instance name loader.
  5. Select the progress bar on the Stage and, in the Property inspector, enter loader for the source parameter.
  6. Select Frame 1 in the Timeline, open the Actions panel, and enter the following code that loads a JPEG file into the Loader component: 
    loader.autoLoad = false;
loader.content = "http://imagecache2.allposters.com/images/86/017_PP0240.jpg";
pBar.source = loader;
// loading does not start until the load method is invoked
loader.load();

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, do the following:

  1. Drag a ProgressBar component from the Components panel to the Stage.
  2. In the Property inspector, do the following:
    • Enter the instance name pBar.
    • Select polled for the mode parameter.
    • Enter loader for the source parameter.
  3. Select Frame 1 in the Timeline, open the Actions panel, and enter the following code that creates a Sound object called loader and calls the loadSound() method to load a sound into the Sound object: 
    var loader:Object = new Sound();
loader.loadSound("http://soundamerica.com/sounds/sound_fx/A-E/air.wav", true);

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, do the following:

  1. Drag a ProgressBar component from the Components panel to the Stage.
  2. In the Property inspector, do the following:
    • Enter the instance name pBar.
    • Select manual for the mode parameter.
  3. Select Frame 1 in the Timeline, open the Actions panel, and enter the following code that updates the progress bar manually on every file download using calls to the setProgress() method: 
    for(var:Number i=1; i <= total; i++){
  // insert code to load file
  // insert code to load file
pBar.setProgress(i, total);
}
PreviousNext