Flash AS3 Tutorials Center | Interesting Flash Animation Tutorials | Valuing Flash Animation Tutorials | Flash ActionScript and Animation Home

AS3 Beginner Tutorials | AS3 Basic Lessons | AS3 Valuing Courses | AS3 Components Tutorials | AS3 and PHP Interaction Tutorials
AS3 Practical Tutorials | AS3 Animation Techniques | AS3 Transition Effects Tutorials | AS3 Download Upload Files | AS3 Particle Systems
Communication Between Flash Movies with AS3 | AS3 and JavaScript interaction | AS3 Matrix Transformation | AS3 Physics Simulation Tutorials

Flash ProgressBar Component ActionScript 3 Tutorial

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

Please update flash player to view this Flash ActionScript tutorial!

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;


//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

//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;

//Remove the ProgressBar that no longer in use

//Hide the textfield
percentLoaded_txt.visible = false;


Download Flash Source File:

Flash Source File progressbar.fla

Image: background.png


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