Wednesday, November 16, 2011

Actionscript 3.0 design a flash loader using progress bar and UILoader


Purpose: To design a container to load external flash and show loading progress bar
1. Open flash CS5, new ActionScript 3.0 flash document
2. Set document Class as "Loader" in the Properties panel.
3. Drag the ProgressBar component and UILoader component from the Components panel to the library.
4. Save this files as Loader.fla.
5. In the same folder of Loader.fla, enter following ActionScript 3.0 in Loader.as:
package
{
import flash.display.MovieClip;
import flash.display.Sprite;
import fl.containers.UILoader;
import fl.controls.Label;
import fl.controls.ProgressBar
import fl.controls.ProgressBarMode;

import flash.events.*;
import flash.text.*;
//For Security.allowDomain
import flash.external.ExternalInterface;
import flash.system.Security;

public class Loader extends Sprite
{
private var UI_intro_loader:UILoader;


private var progressText:TextField;
private var bar_pb:ProgressBar;

private var introURL:String = 'http://www3.telus.net/jianlu58/resizebutton.swf';


public function Loader()
{
init();
}

private function init():void
{
//Load the Room Builder
var now:Date = new Date();
var queryString = this.loaderInfo.parameters;
var domain = "http://www3.telus.net/";
// allow domain www3.telus.net to access this flash
Security.allowDomain(domain);
UI_intro_loader = new UILoader();
UI_intro_loader.autoLoad = false;
UI_intro_loader.source = introURL;
UI_intro_loader.scaleContent = false;
UI_intro_loader.load();



bar_pb = new ProgressBar();
bar_pb.mode = ProgressBarMode.EVENT;
bar_pb.source = UI_intro_loader;
bar_pb.move(stage.stageWidth / 2 - bar_pb.width / 2, stage.stageHeight / 2);
bar_pb.addEventListener(ProgressEvent.PROGRESS, onProgress);
bar_pb.addEventListener(Event.COMPLETE, onComplete);
addChildAt(bar_pb,0);

progressText = new TextField();
progressText.x = bar_pb.x;
progressText.y = bar_pb.y + bar_pb.height;
progressText.textColor = 0xffffff;
progressText.autoSize = TextFieldAutoSize.LEFT;
addChildAt(progressText, 1);

//trace(UI_loader.source);
}

private function onProgress(e:ProgressEvent):void
{
//trace(e);
progressText.text = int(e.currentTarget.percentComplete) + '%';
}

private function onComplete(e:Event):void
{
//trace(e);


addChildAt(UI_intro_loader, 1);
var intro:MovieClip = UI_intro_loader.content as MovieClip;
intro.play();
//remove progress bar when it is done!
bar_pb.removeEventListener(ProgressEvent.PROGRESS, onProgress);
bar_pb.removeEventListener(Event.COMPLETE, onComplete);
removeChild(bar_pb);
removeChild(progressText);


}
}
}
6. Result:

7. Reference:
A.Use the ProgressBar component
http://help.adobe.com/en_US/as3/components/WS5b3ccc516d4fbf351e63e3d118a9c65b32-7fa4.html
B.Customize the ProgressBar component
http://help.adobe.com/en_US/as3/components/WS5b3ccc516d4fbf351e63e3d118a9c65b32-7f43.html

No comments:

Post a Comment