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 Text Preloader

This is always good to let users know how long have to wait for the external image to load up in the Flash Movie. A preloader is the best solution. We will use text Pre-loader in this Flash ActionScript tutorial. A text pre-loader is very easy to install and use.

Please update flash player to view this Flash ActionScript tutorial!

Flash Tutorial Content:

When the file size of the external images are large. This may take some time to load the external image to the Flash Movie. Under this situation, you may consider to add a preloader that shows the progress or status of the loading otherwise the visitors do not know what happens. This Flash ActionScript tutorial shows how to make a very simple text preloader. If you do not like gimmick preloader, this text preloader should be the first choice of your Flash Movie.

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

Flash ActionScript Codes:

//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
loader.load(myRequest);

//Declare the loading percentage
var percent:Number;

 

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

 

function loadingProgress(evt:ProgressEvent) {

//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 -> 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"
*/
holder_mc.addChild(loader);

//Hide the loading progress text that no longer in use
percentLoaded_txt.visible = false;

}

Download Flash Source File:

Flash Source File load-image-5.fla

Remarks:

Some Flash Designerwould like more fancy or interesting preloader. The next Flash ActionScript tutorial will show how to add a more interesting preloader, a ProgressBar preloader to Flash Movies.