Preloader for External swf or Image File

Preloader for External swf or Image File

Flash CS4 ActionScript 3.0 Tutorial

 

How to Add a Movie Symbol Preloader with Flash ActionScript

 

 

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.

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

For information on importing images with preloaders, see topics, Loading External File with UILoader and Preloader and Preloader for Main swf File.

Tutorial Elements

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

 

Step One

Open a new Flash document and add a new layer.

Step Two

Name the top layer Actions and the lower layer Preloader.

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 and click frame one of the Preloader layer. Add a rectangle with the Rectangle tool.

Step Seven

Select the rectangle and convert it to a Movie Symbol by pressing F8. The registration should be set to the upper left corner.

Step Eight

Select the rectangle and assign it an instance name of bar_mc in the Properties panel.

Step Nine

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

Step Ten

Copy/Paste the following code to the ActionScript panel.

var loader01:Loader = new Loader();

loader01.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loop);

loader01.contentLoaderInfo.addEventListener(Event.COMPLETE, done);

loader01.load(new URLRequest("External.swf"));

function loop(e:ProgressEvent):void{

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

bar_mc.scaleX=perc;

}

function done(e:Event):void{

addChild(loader01);

bar_mc.visible=false;

}

Step Eleven

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

Step Twelve

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 bar expands to show the download progress. Once the external file loads, the bar disappears.

Dissecting the Code

The first line of the code at Step Ten establishes a new Loader variable called loader01. Lines two and three add event listeners for the download progress and to see if the download is complete.

Line four makes a URLRequest to import the external 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".

If the download is in progress, then the loop function is run. The variable perc is added to track the download from zero to one by calculating bytesLoaded by bytesTotal.

The value of perc is assigned to the bar_mc's scale in the x direction.

The done function adds the loader01 contents to the stage and makes the bar_mc invisible.

 

Royalty-Free Stock Video at Pond5