Loading Content in Background

Loading Content in Background

Flash CS4 ActionScript 3.0 Tutorial

 

How to Load External Files in the Background of swf File

 

 

When loading an external file, the user generally waits as the preloader tracks the download progress. This method starts the download process in advance thus making it less painful for the user.

The key to making this work is to download each of the external files into a separate Loader object. The contents of each Loader object is placed in a holder Movie Symbol (MovieClip) when requested. A MovieClip can hold several Loader objects at the same time. Yet since we are adding each new Loader to the top (addChild()), the existing Loader object is covered when the new one is loaded.

Tutorial Elements

Two external jpg files with instances name Image01.jpg and Image02.jpg. For animations you could substitute this file with a swf file. Another option for still images is to use a png file.

Two Button Symbols with instance names button01_btn and button02_btn.

Rectangular Movie Symbol shape with instance name of bar_mc.

 

Step One

Open a new Flash document and add two additional layers.

Step Two

Name the top layer Actions, middle layer Preloader and the lower layer Buttons.

Step Three

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

Step Four

Add a folder named External next to your Main.fla file and add two image files (Image01.jpg and Image02.jpg). Image files should have the same dimensions as your stage.

Step Five

Return to the Main.fla file and add a rectangle with the Rectangle tool to the Preloader layer.

Step Six

Select the rectangle and press F8 to convert it to a Movie Symbol.

Step Seven

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

Step Eight

Add two buttons to the Buttons layer.

Step Nine

Assign the buttons instance names button01_btn and button02_btn 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.

var holder_mc:MovieClip=new MovieClip();

var loader01:Loader=new Loader();

var loader02:Loader=new Loader();

var loadState01:Boolean=false;

var loadState02:Boolean=false;

loader01.load(new URLRequest("External/Image01.jpg"));

loader02.load(new URLRequest("External/Image02.jpg"));

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

loader02.contentLoaderInfo.addEventListener(Event.COMPLETE, state02);

function state01(e:Event):void {

loadState01=true; }

function state02(e:Event):void {

loadState02=true;

}

bar_mc.visible=false;

addChildAt(holder_mc,0);

button01_btn.addEventListener(MouseEvent.CLICK, onClick01);

function onClick01(e:MouseEvent):void {

if (loadState01==false) {

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

function loading01(e:ProgressEvent):void {

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

bar_mc.visible=true;

bar_mc.scaleX=perc;

}

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

function done01(e:Event):void {

holder_mc.addChild(loader01);

bar_mc.visible=false;

}

} else {

holder_mc.addChild(loader01);

bar_mc.visible=false;

}

}

button02_btn.addEventListener(MouseEvent.CLICK, onClick02);

function onClick02(e:MouseEvent):void {

if (loadState02==false) {

loader02.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loading02);

function loading02(e:ProgressEvent):void {

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

bar_mc.visible=true;

bar_mc.scaleX=perc;

}

loader02.contentLoaderInfo.addEventListener(Event.COMPLETE, done02);

function done02(e:Event):void {

holder_mc.addChild(loader02);

bar_mc.visible=false;

}

} else {

holder_mc.addChild(loader02);

bar_mc.visible=false;

}

}

Step Twelve

Click the Auto Format icon to format the code.

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. Once the buttons appear on the stage, the external file download begins. If you click a button right away, the progress bar appears. By waiting to press a button, the image appears without the preloader bar.

Dissecting the Code

The first line of the code at Step Eleven establishes a new MovieClip variable called holder_mc. This is the MovieClip that each of the loaders (loader01 and loader02) will be added to when the buttons are clicked. Whenever one loader is added, the other is removed.

The next two lines establish a loader for each of the external files. Lines 4 and 5 create a new Boolean variable to track whether the image is fully loaded or not. A false state means not loaded and true means loaded.

The next two URLRequest lines load the external images in the Loader objects loader01 and loader02.

Lines 8 and 9 add event listeners to determine if the files have finished loading in the background. If the downloading is complete, the corresponding (state01 and state02 functions are run. They toggle the loadState variable to true.

Line 16 makes the bar_mc invisible.

Line 17 adds the holder_mc to the stage at the bottom level (level 0).

Line 18 adds an event listener to button01_btn. Once clicked, the onClick01 function is run.

The onClick01 function checks to see if the loadState is true or false. If it is true, the loader content is loaded into the holder_mc and the bar_mc becomes invisible. If it is false, the progress is monitored and the bar_mc scales to show the progress. Once the file is downloaded, the loader content is loaded into the holder_mc and the bar_mc becomes invisible.

The final lines of code repeat the process for the second button.

MovieClip verses Sprite

In line one of the code, you can substitute Sprite in both cases for the MovieClip class. A Sprite is similar to a MovieClip except it has only one frame. MovieClips can have one or several frames. If you changed it to Sprite, the line would read: var holder_mc:Sprite=new Sprite();

 

Stock Photos from 123RF