Creating a Progress Bar to Display Data Loading Progress In Adobe Flash

To creating a progress bar to display data loading progress in adobe flash, following exercise dynamically creates a simple preloader using the Drawing application programming interface (API) and displays the loading progress for an XML document.

See The Tutorial Video

 

 

TIP

If the remote XML file loads too quickly to see the preloading effect, try uploading a larger XML file to the internet and loading that file.

1. Create a new Flash document and save it as drawapi.fla.

2. Add the following ActionScript to Frame 1 of the main Timeline:

var barWidth:Number = 200;
var barHeight:Number = 6;

this.createEmptyMovieClip("pBar_mc", 9999);
var bar:MovieClip = pBar_mc.createEmptyMovieClip("bar_mc", 10);
bar.beginFill(0xFF0000, 100);
bar.moveTo(0, 0);
bar.lineTo(barWidth, 0);
bar.lineTo(barWidth, barHeight);
bar.lineTo(0, barHeight);
bar.lineTo(0, 0);
bar.endFill();
bar._xscale = 0;

var stroke:MovieClip = pBar_mc.createEmptyMovieClip("stroke_mc", 20);
stroke.lineStyle(0, 0x000000);
stroke.moveTo(0, 0);
stroke.lineTo(barWidth, 0);
stroke.lineTo(barWidth, barHeight);
stroke.lineTo(0, barHeight);
stroke.lineTo(0, 0);

pBar_mc.createTextField("label_txt", 30, 0, barHeight, 100, 21);
pBar_mc.label_txt.autoSize = "left";
pBar_mc.label_txt.selectable = false;

pBar_mc._x = (Stage.width - pBar_mc._width) / 2;
pBar_mc._y = (Stage.height - pBar_mc._height) / 2;

var my_xml:XML = new XML();
my_xml.ignoreWhite = true;
my_xml.onLoad = function(success:Boolean) {
    pBar_mc.onEnterFrame = undefined;
    if (success) {
        trace("XML loaded successfully");
    } else {
        trace("Unable to load XML");
    }
};
my_xml.load("http://www.helpexamples.com/flash/xml/ds.xml");

pBar_mc.onEnterFrame = function() {
    var pctLoaded:Number = Math.floor(my_xml.getBytesLoaded() / my_xml.getBytesTotal() * 100);
    if (!isNaN(pctLoaded)) {
        pBar_mc.bar_mc._xscale = pctLoaded;
        pBar_mc.label_txt.text = pctLoaded + "% loaded";
        if (pctLoaded >= 100) {
            pBar_mc.onEnterFrame = undefined;
        }
    }
};

The previous code is broken down into seven sections. The first section defines the width and height of the progress bar when it is drawn on the Stage. The progress bar will be centered on the Stage in an upcoming section. The next section of code creates two movie clips, pBar_mc and bar_mc. The bar_mc movie clip is nested inside pBar_mc, and draws a red rectangle on the Stage. The bar_mc instance modifies its _xscale property as the external XML file loads from the remote website.

Next, a second movie clip is nested inside of the pBar_mc movie clip, stroke_mc. The stroke_mc movie clip draws an outline on the Stage that matches the dimensions specified by the barHeight and barWidth variables defined in the first section. The fourth section of code creates within the pBar_mc movie clip a text field that is used to display what percentage of the XML file has already loaded, similar to the label on the ProgressBar component. Next, the pBar_mc movie clip (which includes the nested bar_mc, stroke_mc, and label_txt instances) is centered on the Stage.

The sixth section of code defines a new XML object instance, which is used to load an external XML file. An onLoad event handler is defined and traces a message to the Output panel. The onLoad event handler also deletes the onEnterFrame event handler (which is defined in the next section) for the pBar_mc movie clip. The final section of code defines an onEnterFrame event handler for the pBar_mc movie clip. This event handler monitors how much of the external XML file has loaded and modifies the _xscale property for the bar_mc movie clip. First the onEnterFrame event handler calculates what percentage of the file has finished downloading. As long as the percentage of the file loaded is a valid number, the _xscale property for bar_mc is set, and the text field within pBar_mc displays what percentage of the file has loaded. If the file has completed loading (percent loaded reaches 100%) the onEnterFrame event handler is deleted so download progress is no longer monitored.

 

3. Select Control > Test Movie to test the Flash document.

As the external XML file loads, the nested bar_mc movie clip resizes to display the download progress of the XML. Once the XML file has completely loaded, the onEnterFrame event handler gets deleted so it doesn't continue to calculate the download progress. Depending on how fast the download completes, you should be able to see the bar slowly grow until the bar_mc is the same width as the stroke_mc movie clip. If the download occurs too fast, the progress bar may go from 0% to 100% too quickly, making the effect harder to see; in this case it may be necessary to try downloading a larger XML file.

 

Note: In address http://www.helpexamples.com/flash/xml/ds.xml, you can change your XML URL.