View comments | RSS feed

Using the ProgressBar component

A progress bar lets you 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 mode and polled mode. 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.

Related topics

ProgressBar parameters

You can set the following authoring parameters for each ProgressBar instance in the Property inspector or in the Component inspector:

mode is 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 is a string to be converted into an object representing the instance name of the source.

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

label is the text indicating the loading progress. This parameter is a string in the format "%1 out of %2 loaded (%3%%)". In this string, %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 two question marks (??). If a value is undefined, the label doesn't display.

labelPlacement indicates 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 is a number by which 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 the ProgressBar component 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, 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:

  1. Drag a ProgressBar component from the Components panel to the Stage.
  2. In the Property inspector, do the following:
  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, which loads a JPEG file into the Loader component: 
    loader.autoLoad = false;
loader.contentPath = "http://imagecache2.allposters.com/images/86/
017_PP0240.jpg";
pBar.source = loader;
// loading does not start until load() 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:

  1. Drag a ProgressBar component from the Components panel to the Stage.
  2. In the Property inspector, do the following:
  3. Select Frame 1 in the Timeline, open the Actions panel, and enter the following code, which creates a Sound object called loader and calls loadSound() 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:

  1. Drag a ProgressBar component from the Components panel to the Stage.
  2. In the Property inspector, do the following:
  3. 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:Number i=1; i <= total; i++){
	// insert code to load file
pBar.setProgress(i, total);
}

Comments


jepo said on Oct 10, 2004 at 6:36 PM :
Hey guys,

If you have problems with the example, please make sure that the URL in the code is NOT cut into two lines in your Actions panel (or you will encounter a script error as noted in comments here). This is a general rule of thumb for your code - don't break your urls - or it won't work correctly. If that URL is contained on a single line, the example works correctly.

Hope that helps,
Jen d
Macromedia.
jepo said on Oct 10, 2004 at 6:53 PM :
If there is a problem hearing the sound in the second example, try using this code instead:
var loader:Object = new Sound();
loader.loadSound("http://www.flash-mx.com/mm/sound/song2.mp3", true);

This code simply changes the URL to a different sound file.
jepo said on Oct 18, 2004 at 10:09 AM :
Please try replacing this line:

for(var:Number i=1; i <= total; i++){

with this:

for (var i:Number = 1; i<=total; i++) {

I have filed a comment regarding this error and this page for the next doc update.

HTH,
Jen.
helentriolo said on Oct 18, 2004 at 1:35 PM :
Jen, a million thanks for putting up real-life examples! Very helpful. -Helen
jepo said on Oct 18, 2004 at 10:51 AM :
In case it helps, here is an additional example for the "manual" mode of the ProgressBar component:

1. Drag a Label component onto the Stage and give it an instance name "my_label".
2. Drag a ProgressBar component onto the Stage and give it an instance name "my_pb".
3. Select the my_pb ProgressBar on the Stage and set the component's "mode" property to "manual" in the Property inspector.
4. Add the following ActionScript frame 1 of the Timeline:
var feed_xml:XML = new XML();
feed_xml.onLoad = function(success:Boolean) {
clearInterval(timer);
my_label.text = "XML Loaded";
my_pb.setProgress(feed_xml.getBytesLoaded(), feed_xml.getBytesTotal());
};
function updatePB(local_xml:XML) {
my_pb.setProgress(local_xml.getBytesLoaded(), local_xml.getBytesTotal());
}
var timer:Number = setInterval(updatePB, 100, feed_xml);
feed_xml.load("http://www.flash-mx.com/news/atom.xml");
5. Press Ctrl+Enter to test.


Hope this helps,
Jen d.
jepo said on Oct 18, 2004 at 10:57 AM :
Another example for the manual mode of the ProgressBar.

1. Drag a ProgressBar component onto the Stage and give it an instance name of "my_pb".
2. Set the ProgressBar's mode property to "manual" in the Property inspector.
3. Add the following ActionScript to frame 1 of the Timeline:

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", this.getNextHighestDepth());
img_mcl.loadClip("http://www.flash-mx.com/images/image2.jpg", image_mc);

4. Press Ctrl+Enter to test the document.

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

Hope this helps,
Jen d.
Macromedia
ryzal said on Oct 20, 2004 at 10:47 PM :
Hi jen,
i'm just trying your suggestion below:

Please try replacing this line:

for(var:Number i=1; i <= total; i++){

with this:

for (var i:Number = 1; i<=total; i++) {

but the progress bar still not working, instead of working there's some message like this:
"A script in this movie is causing Flash Player to run slowly. If it continues to run, your computer may become unresponsive. Do you want to abort the script?"

what's wrong with this?

thx
jepo said on Oct 21, 2004 at 10:04 AM :
Hi ryzal,

That full example doesn't work on its own because of the "// insert code to load file" (only partial code is supplied).

For example, if you add:

var total:Number = 7;
for (var i:Number = 1; i<=total; i++) {
trace(i);
}

This should remove the comment in the Output panel, because the total is defined as opposed to saying "loop from 1 to undefined".

My comment for replacement is because the original code snippet contains incorrect syntax. All that said, I'd recommend using one of the replacement examples for that one in the comments above (the second and third comments made on Oct 18, 2004) that also use manual mode but in what I feel is a more "real life" way - plus they contain code that load files. :)

HTH,
Jen.
jepo said on Nov 8, 2004 at 1:49 PM :
To no screen name on Oct 27th,

You can use the following to set the progress to a specific amount manually:

my_pb.mode = "manual";
my_pb.setProgress(50, 100);

(where ‘my_pb’ is the instance name of my ProgressBar component on the Stage.)

Jen.
jepo said on Nov 8, 2004 at 1:55 PM :
To no screen names on the 28th,

I'm not sure if this is exactly what you are after. However, maybe it'll help somebody because this is such a hot issue.

So you have a FLA with three scenes. Scene 1 is blank (never referenced Scene 1 in your comments). Scene 2 has a ProgressBar (instance name: my_pb) and a Loader component (instance name: my_ldr). You only mention loading and complete, but not what you're trying to load, so I'll make an assumption below. So, add the following code on Frame 1 of the “Actions” layer in Scene 2:

stop();
my_pb.mode = "polled";
my_pb.source = "my_ldr";
my_ldr.load("http://www.flash-mx.com/images/image1.jpg");
var completeListener:Object = new Object();
completeListener.complete = function(evt:Object) {
var works = 1;
gotoAndPlay("Scene 3", 1);
};
my_pb.addEventListener("complete", completeListener);

So, now when the image finishes loading, the “complete” event triggers and is caught by the event listener object. The gotoAndPlay redirects the movie to frame 1 of Scene 3. Hope that's close to what you're after. Please direct further questions to the Flash forums at: http://webforums.macromedia.com/flash.

Thanks,
Jen d.
Macromedia
mixteca said on Nov 11, 2004 at 11:39 PM :
When I test this last method in Bandwidth Profiler mode, my movie loads up to about 80% before it even displays the progress Bar.

I've tried the Event and Polled methods using a progressBar instance on the first frame of my movie and the content sitting on the second frame. I reference the Source as _root.

Any thoughts?
smaiolo said on Nov 14, 2004 at 3:45 PM :
mixteca (Nov 11), the reason this happens is due to the components being loaded on the first frame. The V2 components are constructed from libraries of classes, very intelligently created classes. This reusable code is fine for developement of applications but has the drawback that you will always take a 20+ KB hit for the first component added. The frame's contents are not shown until the frame has loaded the assets and initialised. Which causes your delay.

I (like many others) used the stub approach. This consisted of a main movie, progress movie, and application movie. Using levels to load movies into main etc...

After the release of FlashVideoGallery Source [http://www.macromedia.com/devnet/mx/flash/articles/video_gallery.html] I found that you could use some tricks to preload. This was fine for me but it needed to be easier for mass deployment, enter Grant Skinner and JSFL [http://www.gskinner.com/blog/archives/000104.html]. BEWARE, this approach means you cannot use components like the ProgressBar to be your progress indication, it does overcome the delay when a custom progress bar is displayed. I hope this helps.

Cheers,
Shane...
jepo said on Dec 2, 2004 at 9:43 AM :
To mixteca,

Not sure if this will help, but perhaps give it a try.

1) Create a new Flash document and insert a new layer named "labels". Rename Layer 1 to “form”. Make sure the label layer appears above the form layer in the main Timeline.
2) Drag an instance of the ProgressBar component onto frame 1 of the form layer and give it an instance name of my_pb.
3) With the ProgressBar still selected on the Stage, use the Property inspector to change the mode to “polled” and set the source to “_level0”.
4) Using the Property inspector, give the first frame of the labels layer a frame label of “preloader”.
5) Create a blank keyframe on frame 10 of the labels layer and enter a frame label of “main”. Select frame 19 on the labels layer and press F5 to extend the timeline (helps you read the frame label in the timeline).
6) Create a blank keyframe on frame 10 of the form layer. Drag several components onto the Stage or import some images onto the Stage. Right-click each of the components you added to frame 10 in the document’s library and select Linkage from the context menu. Deselect the Export in first frame check box and click OK. Repeat this process for the remaining components (except for the ProgressBar).
7) Insert a new layer and rename it actions. Position the layer above the previous layers. Create a blank keyframe on frame 10 and add the following code, which prevents the playhead from going back to the beginning of the movie:

stop();

8) Select frame 1 of the actions layer and add the following ActionScript:

stop();

var pbListener:Object = new Object();
pbListener.complete = function(evt:Object) {
gotoAndStop("main");
};
my_pb.addEventListener("complete", pbListener);

This code creates a listener object which waits for the progress bar to finish loading and then moves the playhead to the frame label “main”.

9) Save the document and test the document in the authoring environment. If the content loads too fast and you don’t see the progress bar move, press Ctrl+Enter again to simulate the downloading process at a slower speed. Once the progress bar finishes loading you should be redirected to frame 10.

Hope that helps,
Jen.
rsjagtia said on Dec 8, 2004 at 9:17 AM :
Jenn From Macromedia I have a question about preloading.. can you please help...

I have a movie that I am loading from via a loader and progress bar on the stage. Everything works great, the progress bar works (event mode) and I have a listener that does its job. Now the problem is that when the movie is loaded, I want the user to click a button and only then should the loaded movie play. What currently happens is that when the user clicks the button, the loaded movie starts from near frame 50 or so. How can i Solve this? This is what I tried.... There is only one frame in my preloader movie and this is what i've put there:

_root.beginButton._visible = false;
_root.introLoader._visible = false;

myLoaderListener = new Object();

myLoaderListener.complete = function(eventObject) {
_root.introLoader.content.stop();
_root.beginButton._visible = true;
};

_root.introLoader.addEventListener("complete", myLoaderListener);
_root.introLoader.load();

now when the loading is done, the button pops up and I click on it and this is the code that is executed:

on (press){
_root.introLoader.content.play();
}

Help me please! Thank yoU!
jepo said on Dec 8, 2004 at 5:53 PM :
Unfortunately I wasn't able to replicate your issue in my testing, but hopefully I can offer a few ideas.

First, does your SWF that you're loading in have a stop() action on the first frame? That should solve the problem (I'd think). The only way for this SWF to begin playing would be to click the Button component in the loading movie. My other idea would be to use gotoAndPlay(1) in the loading movie instead of simply using the play action.

For testing I had a SWF with just a Button component (instance name
beginButton) and a Loader component (instance name introLoader) and then set the content path directly in the Loader component using the Property inspector. Next I add the following code to frame 1 of the Timeline:

beginButton._visible = false;
//introLoader._visible = false;
//
var myLoaderListener:Object = new Object();
myLoaderListener.complete = function(eventObject) {
introLoader.content.stop();
beginButton._visible = true;
};
introLoader.addEventListener("complete", myLoaderListener);
//
var myButtonListener:Object = new Object();
myButtonListener.click = function(eventObject:Object) {
introLoader.content.gotoAndPlay(1);
};
beginButton.addEventListener("click", myButtonListener);


As you can see, the code is similar to the code you provided, except I removed all the _root references (_root leads to problems), added some data types, removed the code on the Button instance (and placed it on the timeline instead). Then I used gotoAndPlay instead of play.

Give this a try (and add a stop action in the first frame of your movie that you are trying to load in).

Hope it helps,
Jen.
BinfordFTC said on Dec 10, 2004 at 11:03 PM :
So how do you make the progressbar disappear after it is done loading and has 100% completed on the label?
jepo said on Dec 15, 2004 at 10:12 AM :
Already on this page. Please see my third comment on October 18th. (This one: jepo said on Oct 18, 2004 at 10:57 AM : ) - has an example of how to do this.

Jen.
QuaKerSam said on Dec 24, 2004 at 2:07 AM :
well tried the event mode for progressbar component and i got no error....i followed the steps given here as well as in the help panel of flash mx 2004 professional also.....but the problem is that when i uploaded my swf files on my server for testing it online i found that there is no progress shown in the lable.......there is only 0% loaded shown every time but when loader component loads the main file that i wanted to load .....it just shows 100% why so....?
progressbar must tell the status or say progress of loading......well if this component really dosent works then why macromedeains are making us foollll..........plz solve my problem if possible....thanx
mail me at quake3@indiatimes.com......

QuaKerSam
jepo said on Jan 3, 2005 at 12:44 PM :
Hi QuaKerSam,

Please try using some of the ActionScript in the examples I have provided in the LiveDocs comments, or post the steps you are using for others to help in the Macromedia forums (http://webforums.macromedia.com/flash/). The ProgressBar does work, but some of the examples are not clear in the original documentation so I offered some alternatives that will be added to future documentation. Also make sure that you have the latest version of Flash Player installed on your computer (7.0.19.0). An early version of Flash Player caused the ProgressBar not to display the correct progress and disappear in some browsers.

Hope this helps,
Jen.
jepo said on Jan 3, 2005 at 4:19 PM :
Hi,

Yeah, that's expected with the bandwidth profiler. Try loading a larger size file online. Doing Ctrl+Enter doesn't usually display a loading progress (this or other forms of progress bars). One typically needs to view it online to see the loading progress.

Hope that helps,
Jen.
mmtechwriter said on Mar 8, 2005 at 8:32 AM :
WhiteWeedow,

You need to set the visibility of the ProgressBar instance to false once it is done loading. For example, if you used the event mode:
1. Select the ProgressBar instance on the stage.
2. Add the following in the Actions panel:

on (complete) {
this.setVisible(false);
}
WhiteWeedow said on Apr 4, 2005 at 7:53 AM :
HI mmtechwriter!!

Thanks very much, my progressbar working very good


Thanks
jacksosw said on Apr 4, 2005 at 10:33 AM :
This is a totally random loader just for looks. It may work for you. Just add a ProgressBar and a Loader to your stage and call the ProgressBar pBar and Loader loader. Modify what the loader should be loading

var url:String = _root._url ;
domain = url.substr( 0, url.lastIndexOf( "/mycontext" ) );
pBar.addEventListener("complete", mx.utils.Delegate.create(this, pBarComplete));

function pBarComplete( eventObj:Object):Void {
loader.visible = true;
}

loader.load( domain + "/" + something );
loader.visible = false;

pBar.mode = "manual";
var totalBytes:Number = 100;
var loadedBytes:Number = 0;
var timer:Number = setInterval(updatePBar, 250, pBar, totalBytes, loadedBytes);

function updatePBar( ):Void {
trace( "updatePBar:" + loadedBytes + " - " + totalBytes );
pBar.setProgress( loadedBytes, totalBytes);
if( loadedBytes >= totalBytes ){
clearInterval( timer );
pBar.visible = false;
}
loadedBytes += Math.random() * 10;
if( loadedBytes >= 100 ){
loadedBytes = 100;
}
}
jepo said on Jun 6, 2005 at 7:12 PM :
Thank you for your comments - but this page has been overwealmed by off-topic posts. This site is for documentation feedback only. Some comments with general questions about how to use components, bug reports, or feature requests for the Flash product, have been removed. Please use the Flash webforums for questions about how to use components: http://webforums.macromedia.com/flash. Please use this form for feature requests or suspected bugs: www.macromedia.com/support/email/wishform/.
walidaly said on Oct 6, 2005 at 5:18 PM :
if you're loading a lot of Clips and want to toggle the progress bar visibility
try
on (complete) {
this.visible=false;
}
on (progress) {
this.visible=true;
}
No screen name said on Jul 21, 2008 at 3:30 AM :
English:::
I try this
frame1:
loading = _root.getBytesLoaded();
total = _root.getBytesTotal();
pBar.setProgress(loading, total);
if(loading == total){
pBar.setVisible(false);
gotoAndStop(5);
}
frame2:
gotoAndPlay(1);
frame5:
//put your image on this frame

Indonesia:::
Saya coba seperti ini
frame1:
loading = _root.getBytesLoaded();
total = _root.getBytesTotal();
pBar.setProgress(loading, total);
if(loading == total){
pBar.setVisible(false);
gotoAndStop(5);
}
frame2:
gotoAndPlay(1);
frame5:
//taruh image anda di frame ini

English:::
I dont know if you have more simple like i do (if you have, share please...) but when i try simulate download on 56k, this progress bar will show lately

Indonesia:::
Bila ada yg lebih simple dari cara saya bagi2 ya.... tapi waktu coba simulate download, munculnya agak telat

 

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flash/mx2004/main_7_2/00002688.html