Loading External File with UILoader and Preloader

Loading External File with UILoader and Preloader

Flash CS4 ActionScript 3.0 Tutorial


How to Bring External Files to the Main Stage in Flash with a Preloader



External files can be imported multiple ways in Flash. You can simply add the object to the stage or add the object with a preloader to let the user know about the downloading process.

Preloaders can be added at the start of your host file or used to count down the loading of an external swf or image file. For more information, see topics, Preloader for External swf or Image File and Preloader for Main swf File.

The following is an example of a preloader that displays whenever an external file is added to the stage using the UILoader component.

Tutorial Elements

External swf file with instance name External.swf. For still images you could substitute this file with a jpg file.

A UILoader component


Step One

Open a new Flash document and name the default layer Actions.

Step Two

Add a new layer below the Actions layer named Content.

Step Three

Save your file in a Project folder and name the file Main.fla.

Step Four

Open a new Flash document and name it External.fla. Save it in the same Project folder.

Step Five

Add an animation or series of images to the External.fla file and publish the file (Cmd/Return (PC - Ctrl/Enter).

Step Six

Return to the Main.fla file, Content layer and add a UILoader component by dragging it from the Components panel (Window > Components) to the stage.

Step Seven

Using the Text tool, add a Dynamic text box to the Content layer on the stage.

Step Eight

Select the text box and drag a corner to increase it's size.

Step Nine

With the text box selected, assign it an instance name of percent_txt in the Properties panel.

Step Ten

Option double-click (PC - Alt double-click) frame one of the Actions layer.

Step Eleven

Copy/Paste the following code to the ActionScript panel.

import fl.containers.UILoader;

var loader01:UILoader = new UILoader();



loader01.addEventListener(ProgressEvent.PROGRESS, loop01);

loader01.addEventListener(Event.COMPLETE, done01)

function loop01(e:ProgressEvent):void{

var perc:Number=e.bytesLoaded/e.bytesTotal;

percent_txt.text=Math.ceil(perc*100).toString()+ "%";


function done01(e:Event):void{




Step Twelve

Click the Auto Format icon at the top of the ActionScript panel.

Step Thirteen

Test your movie by pressing Cmd/Return (PC - Ctrl/Enter). Press Cmd/Return (PC - Ctrl/Enter) a second time to simulate a specified download speed. The speed can be changed by choosing View > Download Settings. The text field displays the download progress. Once the external file loads, the text disappears.

Dissecting the Code

The first line of the code at Step Eleven imports the UILoader class to the file. Line two establishes a new UILoader variable called loader01.

Line three sets the target for the external source file. If the external file were inside a folder (named SwfFiles) next to the host file the code in parentheses would read, "SwfFiles/External.swf".

Line four tells Flash not to scale the external content.

Line five adds an event listener to monitor the external file download progress. The event listener on line six determines if the download is complete. Each of the event listeners triggers the corresponding function (loop01 and done01).

Function loop01 calculates the percent of bytes loaded. This value is passed to the Dynamic text field percent_txt located on the stage.

If the download is complete, the done01 function is run. It loads the content to the stage and makes the text field invisible.


Stock Images