Flash AS 实例进阶 FLASH载入等待 Loading效果

Flash AS 实例进阶 FLASH载入等待 Loading效果，旨在提升网页的用户体验，增加页面的装饰性以及提示用户等待数据载入的效果。下面将详细讲解该攻略的完整流程及两个示例说明。

步骤1：创建loading效果

1.1 在Flash中创建loading效果，可以使用Flash的元件或自行绘制图形。建议使用矢量图形。

1.2 为loading效果添加动画效果，使其看起来更有趣味性和对比度。

1.3 给loading效果命名，假设为"loadingMC"。

步骤2：代码实现

2.1 在舞台上添加加载条，可以使用Flash插件或自行编写代码。

2.2 在舞台上添加loadingMC，所添加的loadingMC位置应该与加载条位置一致。

2.3 在舞台上添加文本框，用于提示用户"正在加载，请稍候..."等文本提示。

2.4 使用AS3的loader类，编写代码加载目标资源。示例代码如下：

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler);
loader.load(new URLRequest("目标资源的URL"));

2.5 在进度事件处理器函数progressHandler中，更新加载条的进度。示例代码如下：

function progressHandler(event:ProgressEvent):void{
    var percent:int = event.bytesLoaded / event.bytesTotal * 100;
    loadingBar.scaleX = percent / 100;
}

2.6 在加载完成事件处理器函数completeHandler中，移除加载条、loadingMC、文本框等元素。示例代码如下：

function completeHandler(event:Event):void{
    removeChild(loadingBar);
    removeChild(loadingMC);
    removeChild(loadText); //removeChild可用于移除舞台上任意元素
    //添加其它代码，如显示目标资源或跳转页面等
}

步骤3：附加功能实现

3.1 可以在加载完成事件处理器函数completeHandler中，对目标资源进行操作，如显示目标资源或跳转页面等。

3.2 可以添加错误事件处理器函数，处理目标资源加载失败的情况。示例代码如下：

loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);

function errorHandler(event:IOErrorEvent):void{
    trace("资源加载失败！");
}

以上就是Flash AS 实例进阶 FLASH载入等待Loading效果的完整攻略。下面分别给出两个示例说明。

示例1：加载外部图片资源

假设需要加载外部图片资源，可按照以下步骤实现。

1. 新建一个Flash文档，将第1步骤中的loading效果元件放在舞台中央，使用代码片段添加文本框用于显示文本提示。

2. 在舞台外添加一个按钮，用于启动加载图片资源的代码。按钮使用实例名称"loadBtn"，loading效果使用实例名称"loadingMC"，文本框使用实例名称"loadText"。

3. 添加如下代码，实现图片资源的加载：

loadBtn.addEventListener(MouseEvent.CLICK, clickHandler);

function clickHandler(event:MouseEvent):void{
    var url:String = "https://images.unsplash.com/photo-1634324537711-196d63eb89f1";
    var loader:Loader = new Loader();
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
    loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler);
    loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
    loader.load(new URLRequest(url));
    addChild(loadingMC);
    addChild(loadText);
}

function completeHandler(event:Event):void{
    removeChild(loadingMC);
    removeChild(loadText);
    var image:Bitmap = Bitmap(loader.content);
    addChild(image);
}

function progressHandler(event:ProgressEvent):void{
    var percent:int = event.bytesLoaded / event.bytesTotal * 100;
    loadingBar.scaleX = percent / 100;
}

function errorHandler(event:IOErrorEvent):void{
    trace("资源加载失败！");
}

1. 在浏览器中预览，点击按钮，可以看到loading效果和文本提示，图片资源加载完成后，loading效果和文本提示就会消失，图片就会在舞台中央显示。

示例2：加载外部SWF资源

假设需要加载外部SWF资源，可按照以下步骤实现。

1. 新建一个Flash文档，将第1步骤中的loading效果元件放在舞台中央，使用代码片段添加文本框用于显示文本提示。

2. 在舞台外添加一个按钮，用于启动加载SWF资源的代码。按钮使用实例名称"loadBtn"，loading效果使用实例名称"loadingMC"，文本框使用实例名称"loadText"。

3. 添加如下代码，实现SWF资源的加载：

loadBtn.addEventListener(MouseEvent.CLICK, clickHandler);

function clickHandler(event:MouseEvent):void{
    var url:String = "flash.swf";
    var loader:Loader = new Loader();
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
    loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler);
    loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
    loader.load(new URLRequest(url));
    addChild(loadingMC);
    addChild(loadText);
}

function completeHandler(event:Event):void{
    removeChild(loadingMC);
    removeChild(loadText);
    var swf:MovieClip = MovieClip(loader.content);
    swf.gotoAndPlay(1); //播放swf动画
    addChild(swf);
}

function progressHandler(event:ProgressEvent):void{
    var percent:int = event.bytesLoaded / event.bytesTotal * 100;
    loadingBar.scaleX = percent / 100;
}

function errorHandler(event:IOErrorEvent):void{
    trace("资源加载失败！");
}

1. 在浏览器中预览，点击按钮，可以看到loading效果和文本提示，SWF资源加载完成后，loading效果和文本提示就会消失，SWF就会在舞台中央播放。