UILoader Component

UILoader Component

Flash CS4 ActionScript 3.0 Tutorial

 

How to Add Pre-Built UILoader Component to Your Flash File

 

 

Flash ships with several Components. Components are pre-packaged elements that allow you to quickly add objects, such as scroll bars, text boxes and buttons.

Components can be added to the stage using the drag and drop method from the Components panel or added with ActionScript. The Component parameters are altered with the Component Inspector or ActionScript.

This example shows how to add a UILoader and ProgressBar Component using the drag and drop method and with ActionScript. It also describes changing the Component parameters with the Component Inspector and ActionScript. To talk to a Component with ActionScript, it must first be added to the Library. For the ProgressBar Component to work you must first add a UILoader Component and specify a file to be loaded.

Components are actually Movie Symbol objects regardless of the Component. If you are developing in ActionScript 2.0, you will see a different set of Components available.

For more information on the other Components, see topics, Button Component, CheckBox Component, ColorPicker Component, ComboBox Component, DataGrid Component, Label Component, List Component, NumericStepper Component, ProgressBar Component, RadioButton Component, ScrollPane Component, Slider Component, TextArea Component, TextInput Component, TileList Component and UIScrollBar Component.

Tutorial Elements

ProgressBar Component with instance name progress01_mc

UILoader Component with instance name uiLdr01_mc

Folder named External with two files, Image01.jpg and Image02.jpg. Each Image is 400 pixels (h) x 275 pixels (w)

 

Step One

Open a new Flash document and add a new layer.

Step Two

Name the upper layer Actions and the lower one Content.

Step Three

The stage should be at the default setting of 550 pixels x 400 pixels.

Step Four

Save your .fla file (call it Main.fla) in a Project folder. Add a folder next to your Main.fla file and name it External.

Step Five

Place two images (400(h) x 275(w) @ 72ppi) in the External folder. Name the files Image01.jpg and Image02.jpg.

Step Six

Select the first frame of the Content layer and open the Components panel (Window > Components).

Step Seven

Double-click the UILoader Component icon to a add a UILoader to the center of the stage. The UILoader and it's assets are also added to the Library.

Step Eight

Double-click the ProgressBar Component icon to a add a ProgressBar to the center of the stage. The ProgressBar and it's assets are also added to the Library.

Step Nine

Select the ProgressBar, then open the Properties panel and change it's x and y settings to 62 and 100.

Step Ten

With the ProgressBar still selected, open the Component Inspector (Window > Component Inspector).

Step Eleven

Click the blank area next to the word source in the Value column and enter uiLdr01_mc then press Enter. This connects the ProgressBar to the UILoader.

Step Twelve

Select the UILoader and open the Properties panel. Change it's x and y settings to 0 and 0.

Step Thirteen

With the UILoader still selected, open the Component Inspector (Window > Component Inspector).

Step Fourteen

Click the blank area next to the word source in the Value column and enter External/Image01.jpg then press Enter. This connects the UILoader to the external image file.

Step Fifteen

With the UILoader still selected, open the Properties panel and assign it an instance name of uiLdr01_mc.

Step Sixteen

Select the ProgressBar, then open the Properties panel and assign it an instance name of progress01_mc.

Step Seventeen

Open the ActionScript panel for the only keyframe in the Actions layer by Option double-clicking (PC - Alt double-clicking) the keyframe.

Step Eighteen

Copy/Paste the following code in the ActionScript Panel:

import fl.containers.UILoader;

import fl.controls.ProgressBar;

var uiLdr02_mc:UILoader=new UILoader ;

var progress02_mc:ProgressBar=new ProgressBar ;

uiLdr01_mc.addEventListener(Event.COMPLETE, onLoad01);

uiLdr02_mc.addEventListener(Event.COMPLETE, onLoad02);

uiLdr01_mc.scaleContent=false;

uiLdr02_mc.scaleContent=false;

uiLdr02_mc.x=275;

uiLdr02_mc.y=0;

uiLdr02_mc.source="External/Image02.jpg";

progress02_mc.x=337;

progress02_mc.y=100;

progress02_mc.source=uiLdr02_mc;

addChild(progress02_mc);

function onLoad01(e:Event):void {

progress01_mc.visible=false;

uiLdr01_mc.removeEventListener(Event.COMPLETE, onLoad01);

}

function onLoad02(e:Event):void {

progress02_mc.visible=false;

uiLdr02_mc.removeEventListener(Event.COMPLETE, onLoad02);

addChild(uiLdr02_mc);

}

Step Nineteen

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 both bars expand to show the download progress. Once the downloads are complete, the images appear.

Dissecting the Code

The first line of the code at Step Eighteen imports the code necessary to talk to the UILoader and ProgressBar classes. Line three establishes a new UILoader variable named uiLdr02_mc. Line four establishes a new ProgressBar variable named progress02_mc. Both of these objects are added to the stage with ActionScript.

Lines five and six add event listeners to both of the UILoaders. Once each external file is loaded, the respective onLoad01 and onLoad02 functions are run.

Lines seven and eight specify that the images retain their full size when added to the stage.

The next three lines of code set the uiLdr02_mc location and source file.

Lines 12 through 15 set the progress02_mc location and source file. It is also added to the stage.

The onLoad01 function hides the progress01_mc instance and removes the event listener created at line five.

The onLoad02 function hides the progress02_mc instance and removes the event listener created at line six. The ldr02_mc is also added to the stage.

Line 7 adds an event listener to button01_mc.

More Component Options

In this example we showed how to change the ProgressBar source and UILoader source. You can use this same method to change the other values shown in the Component Inspector for both of the components.

 

DAZ Studio FREE 3D MODELS AND SOFTWARE