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 ActionScript Tutorial: Load External Image to Empty MovieClip with ProgressBar Preloader

Although a text pre-loader is very easy to install and use, this is a bit boring. If you like a more interesting preloader for the flash movie, a ProgressBar preloader is good choice.

Please update flash player to view this Flash ActionScript tutorial!

Flash Tutorial Content:

The Text Preloader in previous Flash ActionScript tutorial is the most basic of a preloader. Some Flash Designer like more fancy preloader or interesting preloader. This ActionScript tutorial shows how to add a more interesting preloader, a ProgressBar preloader to Flash Movies.

The complete Flash Movie is shown as above, you may try how it works before you start this Flash Preloader tutorial.

Flash ActionScript Codes:

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

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

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



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

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

//Load the external image into the Loader

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


function loadingProgress(evt:ProgressEvent) {

//Show the loading bar
preloaderPB.setProgress(evt.bytesLoaded, evt.bytesTotal);

//You may add test showing the percentage completed
//Please see the "ProgressBar Component"



// 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 -> Select MovieClip
Give this new symbol any name you like (e.g. MyImage)
Return to the scene.
Drag the MovieClip (e.g. MyImage) into your scene from the Library window
Give the instance name of this MovieClip "holder_mc"

//Remove the ProgressBar that no longer in use


Download Flash Source File:

Flash Source File load-image-6.fla


This Flash ActionScript tutorial show how to a ProgressBar preloader to Flash Movies.