Flash ProgressBar Component ActionScript 3 Tutorial

This Flash Component tutorial series show how to use ProgressBar with Flash ActionScript 3.

Flash ActionScript component control tutorial example display here. Your flash player version is too old to see this Flash tutorial example!

Flash Tutorial Content:

The Flash ProgressBar component displays the progress of loading content. The ProgressBar is useful for displaying the status of loading large files (images, swf files or other external files, etc...).

The finished Flash Movie of this tutorial is shown as above. Click on the above Flash Movie and play around.

Flash ActionScript Codes:

//import used controls
import fl.controls.ProgressBar;
import fl.controls.ProgressBarMode;

//Declare the ProgressBar with the name preloaderPB
var preloaderPB:ProgressBar;

//Declare the loading percentage
var percent:Number;

enter_mc.addEventListener(MouseEvent.MOUSE_DOWN , loadTheImage);

function loadTheImage(event:MouseEvent) {

//Hide the button that no longer in use
enter_mc.visible = false;

//Create a new ProgressBar
preloaderPB = new ProgressBar ();

//The default value is ProgressBarMode.EVENT
//In MANUAL mode, it allows us to
//setting the maximum and minimum properties.

preloaderPB.mode = ProgressBarMode.MANUAL;

//Set Location ofthe progressBar
//This is the TopLeft Location (x, y) of the ProgreeBar
preloaderPB.move(120, 170);

//Set Width of the ProgressBar
preloaderPB.width = 250;

//Set Height of the Progressar
preloaderPB.height = 30;

addChild(preloaderPB);

//Create a new Loader to load the image
var loader:Loader = new Loader();

//URL of the external image content
var fileURL:URLRequest=new URLRequest("background.png");

//Load the external image into the Loader
loader.load(fileURL)

//Listen to the progress of the loading
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadingProgress);

function loadingProgress(evt:ProgressEvent) {

preloaderPB.setProgress(evt.bytesLoaded, evt.bytesTotal);

//Calculate the loading percentage
percent = Math.round((evt.bytesLoaded/evt.bytesTotal) * 100);

//Display the loading percentage to visitors
//Actually you can use AS to add the TextField dynamically
percentLoaded_txt.text = "Loading picture.... " + String(percent) + "% loaded";}// Listen when the loading of image is completed
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadingComplete);

function loadingComplete(evt:Event) {//Display the Loader on the MainTimeline
//The holder_mc (new symbol) was created before by
//Insert -> New Symbol
//
//In many case you don't need to insert the new symbol.
//In this case, you can simply use:
/*
loader.x = 0;
loader.y = 27;
addChild(loader);
*/
holder_mc.addChild(loader)

//Remove the ProgressBar that no longer in use
removeChild(preloaderPB);

//Hide the textfield
percentLoaded_txt.visible = false;}

}

Download Flash Source File:

progressbar.fla

Image: background.png

Remarks:

This Flash ActionScript tutorial shows how to use Flash ProgressBar component.