创建进度条显示数据加载进度_Flash手册

下面的练习使用 Drawing API 动态创建一个简单的预加载器，并显示 XML 文档的加载进度。

创建一个新的 Flash 文档，并将该文档保存为 drawapi.fla。
将下面的 ActionScript 添加到主时间轴中的第 1 帧：
```
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("");
    } 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;
        }
    }
};
```
前面的代码分为七个部分。第一部分定义当在舞台上绘制进度条时所用的宽度和高度。在下面的一部分中，该进度条将在舞台上居中。下一部分代码创建两个影片剪辑 pBar_mc 和 bar_mc。bar_mc 影片剪辑嵌套在 pBar_mc 中，会在舞台上绘制一个红色矩形。从远程网站加载外部 XML 文件时，bar_mc 实例将修改其 _xscale 属性。

然后，第二个影片剪辑 stroke_mc 嵌套在 pBar_mc 影片剪辑中。stroke_mc 影片剪辑将在舞台上绘制一个轮廓，此轮廓与在第一部分中定义的 barHeight 和 barWidth 变量指定的尺寸相匹配。第四部分代码在 pBar_mc 影片剪辑中创建一个文本字段，用于显示已加载的 XML 文件的百分比，它与 ProgressBar 组件上的标签类似。然后，影片剪辑 pBar_mc（包括嵌套的 bar_mc、stroke_mc 和 label_txt 实例）将在舞台上居中。

第六部分代码定义了一个新的 XML 对象实例，用于加载外部 XML 文件。定义了一个 onLoad 事件处理函数，将在"输出"面板输出一条消息。onLoad 事件处理函数还将删除 pBar_mc 影片剪辑的 onEnterFrame 事件处理函数（此函数在下一部分中定义）。最后一部分代码为 pBar_mc 影片剪辑定义一个 onEnterFrame 事件处理函数。此事件处理函数将监视已加载的外部 XML 文件的量，并修改 bar_mc 影片剪辑的 _xscale 属性。onEnterFrame 事件处理函数将首先计算文件已完成的下载的百分比。只要已加载的文件百分比是有效数字，就将设置 bar_mc 的 _xscale 属性和 pBar_mc 中的文本字段，以显示已加载文件的百分比。如果文件已完成加载（加载百分比达到 100%），则 onEnterFrame 事件处理函数将被删除，以不再监视下载进度。
选择"控制">"测试影片"对该 Flash 文档进行测试。
加载外部 XML 文件时，嵌套的 bar_mc 影片剪辑将调整大小，以显示 XML 的下载进度。一旦 XML 文件加载完成后，onEnterFrame 事件处理函数将被删除，以使其不再继续计算下载进度。根据下载完成的速度，您应该能看到进度条慢慢变大，直到 bar_mc 与 stroke_mc 影片剪辑宽度相同为止。如果下载速度过快，进度条可能迅速从 0% 达到 100%，使效果很难看到；在这种情况下，需要尝试下载较大的 XML 文件。

创建进度条显示数据加载进度

使用 Drawing API 创建进度条：