The
ProgressBar component displays the progress of loading content,
which is reassuring to a user when the content is large and can
delay the execution of the application. The ProgressBar is useful
for displaying the progress of loading images and pieces of an application.
The loading process can be determinate or indeterminate. A determinate progress
bar is a linear representation of a task’s progress over time and
is used when the amount of content to load is known. An indeterminate progress
bar is used when the amount of content to load is unknown. You can
also add a Label component to display the progress of loading as
a percentage.
The ProgressBar component uses 9-slice scaling and has a bar
skin, a track skin, and an indeterminate skin.
User interaction with the ProgressBar componentThere
are three modes in which to use the ProgressBar component. The most commonly
used modes are the event mode and the polled mode. These modes specify
a loading process that either emits progress and complete events (event
and polled mode) or exposes bytesLoaded and bytesTotal properties
(polled mode). You can also use the ProgressBar component in manual
mode by setting the maximum, minimum,
and value properties along with calls to the ProgressBar.setProgress() method.
You can set the indeterminate property to indicate whether the ProgressBar
has a striped fill and a source of unknown size (true)
or a solid fill and a source of known size (false).
You set the ProgressBar’s mode by setting its mode property,
either through the mode parameter in the Property
inspector or the Component inspector or by using ActionScript.
If you use the ProgressBar to show processing status, like parsing
100,000 items, if it is in a single frame loop there will be no
visible updates to the ProgressBar because there are no redraws
of the screen.
ProgressBar component parametersYou can set the following parameters
in the Property inspector or in the Component inspector for each
ProgressBar instance: direction, mode,
and source. Each of these has a corresponding ActionScript
property of the same name.
You can write ActionScript to control these and additional options
for the ProgressBar component using its properties, methods, and
events. For more information, see the ProgressBar class in the ActionScript 3.0 Reference for Flash Professional.
Create an application with the ProgressBarThe following procedure shows you how
to add a ProgressBar component to an application while authoring.
In this example, the ProgressBar uses the event mode. In event mode,
the loading content emits progress and complete events
that the ProgressBar dispatches to indicate progress. When the progress event
occurs, the example updates a label to show the percent of content
that has loaded. When the complete event occurs,
the example displays “Loading complete” and the value of the bytesTotal property,
which is the size of the file.
Create a new Flash (ActionScript 3.0) document.
Drag the ProgressBar component from the Components panel
to the Stage.
In the Property inspector, enter the
instance name aPb.
In the Parameters section, Enter 200 for the X value.
Enter 260 for the Y value.
Select event for the mode parameter.
Drag the Button component from the Components panel to the
Stage.
In the Property inspector, enter loadButton as
the instance name.
Enter 220 for the X parameter.
Enter 290 for the Y parameter.
Enter Load Sound for the label parameter.
Drag the Label component to the Stage and give it an instance
name of progLabel.
Enter 150 for the
W value.
Enter 200 for the X parameter.
Enter 230 for the Y parameter.
In the Parameters section, clear the value for the text parameter.
Open the Actions panel, select Frame 1 in the main Timeline,
and enter the following ActionScript code, which loads an mp3 audio
file:
import fl.controls.ProgressBar;
import flash.events.ProgressEvent;
import flash.events.IOErrorEvent;
var aSound:Sound = new Sound();
aPb.source = aSound;
var url:String = "http://www.helpexamples.com/flash/sound/song1.mp3";
var request:URLRequest = new URLRequest(url);
aPb.addEventListener(ProgressEvent.PROGRESS, progressHandler);
aPb.addEventListener(Event.COMPLETE, completeHandler);
aSound.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
loadButton.addEventListener(MouseEvent.CLICK, clickHandler);
function progressHandler(event:ProgressEvent):void {
progLabel.text = ("Sound loading ... " + aPb.percentComplete);
}
function completeHandler(event:Event):void {
trace("Loading complete");
trace("Size of file: " + aSound.bytesTotal);
aSound.close();
loadButton.enabled = false;
}
function clickHandler(event:MouseEvent) {
aSound.load(request);
}
function ioErrorHandler(event:IOErrorEvent):void {
trace("Load failed due to: " + event.text);
}
Select Control > Test Movie.
Create an application with the ProgressBar component in polled modeThe following example sets
the ProgressBar to polled mode. In polled mode, progress is determined
by listening for progress events on the content
that is loading and using its bytesLoaded and bytesTotal properties
to calculate progress. This example loads a Sound object, listens
for its progress events, and calculates the percent
loaded using its bytesLoaded and bytesTotal properties.
It displays the percent loaded in both a label and in the Output
panel.
Create a new Flash (ActionScript 3.0) document.
Drag a ProgressBar component from the Components panel to
the Stage and enter the following values in the Property inspector:
Enter aPb for the instance name.
Enter 185 for the X value.
Enter 225 for the Y value.
Drag the Label component to the Stage and enter the following
values in the Property inspector:
Enter progLabel for
the instance name.
Enter 180 for the X value.
Enter 180 for the Y value.
In the Parameters section, clear the value for the text parameter.
Open the Actions panel, select Frame 1 in the main Timeline,
and enter the following ActionScript code, which creates a Sound
object (aSound) and calls loadSound() to
load a sound into the Sound object:
import fl.controls.ProgressBarMode;
import flash.events.ProgressEvent;
import flash.media.Sound;
var aSound:Sound = new Sound();
var url:String = "http://www.helpexamples.com/flash/sound/song1.mp3";
var request:URLRequest = new URLRequest(url);
aPb.mode = ProgressBarMode.POLLED;
aPb.source = aSound;
aSound.addEventListener(ProgressEvent.PROGRESS, loadListener);
aSound.load(request);
function loadListener(event:ProgressEvent) {
var percentLoaded:int = event.target.bytesLoaded / event.target.bytesTotal * 100;
progLabel.text = "Percent loaded: " + percentLoaded + "%";
trace("Percent loaded: " + percentLoaded + "%");
}
Select Control > Test Movie to run the application.
Create an application with the ProgressBar component in manual modeThe following example sets
the ProgressBar to manual mode. In manual mode, you must set progress
manually by calling the setProgress() method and provide
it with the current and maximum values to determine the extent of progress.
You do not set the source property in manual mode.
The example uses a NumericStepper component, with a maximum value
of 250, to increment the ProgressBar. When the value in the NumericStepper
changes and triggers a CHANGE event, the event
handler (nsChangeHander) calls the setProgress() method
to advance the ProgressBar. It also displays the percent of progress
completed, based on the maximum value.
Create a new
Flash (ActionScript 3.0) document.
Drag the ProgressBar component from the Components panel
to the Stage and give it the following values in the Property inspector:
Enter aPb for the instance name.
Enter 180 for the X value.
Enter 175 for the Y value.
Drag a NumericStepper component to the Stage and enter the
following values in the Property inspector:
Enter aNs for
the instance name.
Enter 220 for the X value.
Enter 215 for the Y value.
In the Parameters section, enter 250 for the maximum
parameter, 0 for the minimum value, 1 for the stepSize parameter,
and 0 for the value parameter.
Drag a Label component to the Stage and enter the following
values in the Property inspector:
Enter progLabel for
the instance name.
Enter 150 for the W value.
Enter 180 for the X value.
Enter 120 for the Y value.
In the Parameters tab, clear the value Label for the text
parameter.
Open the Actions panel, select Frame 1 in the main Timeline,
and enter the following code:
import fl.controls.ProgressBarDirection;
import fl.controls.ProgressBarMode;
import flash.events.Event;
aPb.direction = ProgressBarDirection.RIGHT;
aPb.mode = ProgressBarMode.MANUAL;
aPb.minimum = aNs.minimum;
aPb.maximum = aNs.maximum;
aPb.indeterminate = false;
aNs.addEventListener(Event.CHANGE, nsChangeHandler);
function nsChangeHandler(event:Event):void {
aPb.value = aNs.value;
aPb.setProgress(aPb.value, aPb.maximum);
progLabel.text = "Percent of progress = " + int(aPb.percentComplete) + "%";
}
Select Control > Test Movie to run the application.
Click the Up Arrow on the NumericStepper to advance the ProgressBar.
Create a ProgressBar using ActionScriptThis example
creates a ProgressBar using ActionScript. Apart from that, it duplicates
the functionality of the preceding example, which creates a ProgressBar
in manual mode.
Create a new Flash (ActionScript 3.0)
document.
Drag the ProgressBar component to the Library panel.
Drag the NumericStepper component to the Library panel.
Drag the Label component to the Library panel.
Open the Actions panel, select Frame 1 in the main Timeline,
and enter the following code:
import fl.controls.ProgressBar;
import fl.controls.NumericStepper;
import fl.controls.Label;
import fl.controls.ProgressBarDirection;
import fl.controls.ProgressBarMode;
import flash.events.Event;
var aPb:ProgressBar = new ProgressBar();
var aNs:NumericStepper = new NumericStepper();
var progLabel:Label = new Label();
addChild(aPb);
addChild(aNs);
addChild(progLabel);
aPb.move(180,175);
aPb.direction = ProgressBarDirection.RIGHT;
aPb.mode = ProgressBarMode.MANUAL;
progLabel.setSize(150, 22);
progLabel.move(180, 150);
progLabel.text = "";
aNs.move(220, 215);
aNs.maximum = 250;
aNs.minimum = 0;
aNs.stepSize = 1;
aNs.value = 0;
aNs.addEventListener(Event.CHANGE, nsChangeHandler);
function nsChangeHandler(event:Event):void {
aPb.setProgress(aNs.value, aNs.maximum);
progLabel.text = "Percent of progress = " + int(aPb.percentComplete) + "%";
}
Select Control > Test Movie to run the application.
Click the Up Arrow on the NumericStepper to advance the ProgressBar.
|
|
|