Monday, October 4, 2010

Using the UILoader component

Today we will learn how to use the UILoader component.

UILoader is a component that plays the role of a container, which you can fill with an SWF, JPG, PNG, GIF file. You can use this component when you need to load an external image file, for example, in a photo-viewing application.

If you're using flash, you can use the UILoader component through component inspector. Here are the possible parameters: autoLoad, maintainAspectRatio, source and scaleContent. If autoLoad is set to false, you will need to call the load() method to display the picture. When maintainAspectRatio is set to false, the image doesn't follow any proportions and scales according to the UILoader's width and height. Source is the url to the image to be loaded. ScaleContent determines whether the image should be scaled at all, or left in its default size.

Here's a simple example of using this component with AS3:

import fl.containers.UILoader;

var MyLoader:UILoader = new UILoader();
MyLoader.source = "http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png";
MyLoader.scaleContent = false;
addChild(MyLoader);

MyLoader.addEventListener(Event.COMPLETE, completeHandler);
function completeHandler(event:Event) {
trace("File loaded! " + MyLoader.bytesLoaded + " bytes");
}

This will load the wikipedia logo once the flash is loaded, but if you set autoLoad to false, it won't.

MyLoader.autoLoad=false;

Once autoLoad is false, you will need to load the image manually using the load() method.

MyLoader.load();

Play around with the properties to get the results that suit you best.

Thanks for reading!

21 comments:

Anonymous said...

Thanks, this helped a lot. But what if I want to load text from a .txt file?

Kirill Poletaev said...

You would need to use an URLLoader for this:

var myLoader:URLLoader = new URLLoader();
myLoader.load(new URLRequest("Text.txt"));

myTextLoader.addEventListener(Event.COMPLETE, textLoaded);

function textLoaded(e:Event):void {
trace(e.target.data);
}

miltonrgc said...
This comment has been removed by the author.
miltonrgc said...

Hi! I am using several UIloader components in my flash file but something is functioning wrong. My images don't displayed when I click to dynamically load the images. I am using different instance names for each UIloader component as well as they are in different layers and different key frames. I will appreciate if someone can help me.

Kirill Poletaev said...

What code are you using?

miltonrgc said...

Thanks for reply. I am using it in this way:
I ADDED TWO BUTTONS [NEXT/BACK] TO NAVIGATE THROUGH THE IMAGES using the UIloader:

HDnext_btn.addEventListener(MouseEvent.CLICK, nextImage);
//variable...
var imageNumber:Number = 1;

function checkNumber():void{
HDnext_btn.visible=true;
HDback_btn.visible=true;
//If the imageNumber is = 10, then do something...
if(imageNumber==10){
trace(imageNumber);
HDnext_btn.visible = false;
}
//if the imageNumber is = 1, then don't show the back button
if(imageNumber==1){
trace(imageNumber);
HDback_btn.visible = false;
}
}
checkNumber();

function nextImage (evtObj:MouseEvent):void{
//Adding to the current value +1
imageNumber++;
HDloader.source = "4VISUALART/HD/"+imageNumber+".jpg";
checkNumber();
}

HDback_btn.addEventListener(MouseEvent.CLICK, backImage);

function backImage (evtObj:MouseEvent):void{
//Subtract 1 from the current value
imageNumber--;
HDloader.source = "4VISUALART/HD/"+imageNumber+".jpg";
checkNumber();
}

Kirill Poletaev said...

Do you have autoLoad of the UILoader set to true or false? If it is false, then you need to either turn it true or call HDloader.load(); every time you're changing source.

miltonrgc said...

The autoLoad of the UIloader is set to true, but still doesn't display the images. It does display the buttons but it shows the images frame flashing. With the HDloader.load(); didn't work either.

Sorry! I am new with this and learning.

Kirill Poletaev said...

Hmm. Strange, the code seems fine to me. Some things that came to my mind that might be causing the problem:

- The source path to the picture is invalid

- You've mentioned the images frsme is flashing - if you have multiple frames you might've forgotten to put a stop(); on that frame...

I checked this code without changing anything on my computer, put some pictures in the folder and it all worked well. It must be something else than this code.

Nick said...

Hey I am building a flash portfolio and I am wanting to use more than one UiLoader on a flash page and what's the best way of going about it. Currently I have it working with one UiLoader with a back and next button. I have 4 buttons I am wanting to use to navigate between UiLoaders.

I don't think there is a way to duplicate the code for the UILoader without getting an error so I am guessing if I can get the code to target all UiLoaders that might be the way to go.

My current code is:

next_btn.addEventListener(MouseEvent.CLICK, nextImage);

var imageNumber:Number = 1;
function checkNumber():void{
next_btn.visible=true;
back_btn.visible=true;
//If the imageNumber is = 5, then do something...
if(imageNumber==9){
trace(imageNumber);
next_btn.visible = false;
}
//if the imageNumber is = 1, then don't show the back button
if(imageNumber==1){
trace(imageNumber);
back_btn.visible = false;
}
}
checkNumber();

function nextImage (evtObj:MouseEvent):void{
//Adding to the current value +1
imageNumber++;
largeImageLoader.source = "images_p/portfolio0"+imageNumber+".jpg";
checkNumber();
}

back_btn.addEventListener(MouseEvent.CLICK, backImage);

function backImage (evtObj:MouseEvent):void{
//Subtract 1 from the current value
imageNumber--;
largeImageLoader.source = "images_p/portfolio0"+imageNumber+".jpg";
checkNumber();
}

Nick said...

Maybe if I could have the 4 navigational buttons change the source where the UiLoader is pulling the images.

Kirill Poletaev said...

Well, the most simple way to do it would be to create separate functions and variables for each UILoader.

For example, instead of having one imageNumber variable, you'll have 3 of them: imageNumber_one, imageNumber_two, imageNumber_three, 6 buttons on stage with names next_btn_one, back_btn_one, next_btn_two, etc... then apply separate functions with similar names, nd so on.

The second way to do this would be create a specific class for your whole UILoader + buttons construction. Take a look at the OOP tutorials. If you can code that, you won't need to duplicate any variables and you'll be able to make as many of these objects as you want.

Nick said...

Thank you so much for your help and I am going to attempt "oop" and if I understand correctly, composition would be the way to go.

I am not the best at ActionScript 3 and flash so hopefully I can pull this off.

Nick said...

OOP was a bit above me so I had a go at the first method and I might almost have it but I have the duplication at:

"function checkNumber():void {"


next_btn_1.addEventListener(MouseEvent.CLICK, nextImage_1);

var imageNumber_1:Number=1;
function checkNumber():void {
next_btn_1.visible=true;
back_btn_1.visible=true;
//If the imageNumber is = 5, then do something...
if (imageNumber_1==3) {
trace(imageNumber_1);
next_btn_1.visible=false;
}
//if the imageNumber is = 1, then don't show the back button
if (imageNumber_1==1) {
trace(imageNumber_1);
back_btn_1.visible=false;
}
}
checkNumber();

function nextImage_1(evtObj:MouseEvent):void {
//Adding to the current value +1
imageNumber_1++;
largeImageLoader_1.source="experimental/ex00"+imageNumber_1+".jpg";
checkNumber();
}

back_btn_1.addEventListener(MouseEvent.CLICK, backImage_1);

function backImage_1(evtObj:MouseEvent):void {
//Subtract 1 from the current value
imageNumber_1--;
largeImageLoader_1.source="experimental/ex00"+imageNumber_1+".jpg";
checkNumber();
}

next_btn_2.addEventListener(MouseEvent.CLICK, nextImage_2);

var imageNumber_2:Number=1;
function checkNumber():void {
next_btn_2.visible=true;
back_btn_2.visible=true;
//If the imageNumber is = 5, then do something...
if (imageNumber_2==3) {
trace(imageNumber_2);
next_btn_2.visible=false;
}
//if the imageNumber is = 1, then don't show the back button
if (imageNumber_2==1) {
trace(imageNumber_2);
back_btn_2.visible=false;
}
}
checkNumber();

function nextImage_2(evtObj:MouseEvent):void {
//Adding to the current value +1
imageNumber_2++;
largeImageLoader_2.source="scenery/sc00"+imageNumber_2+".jpg";
checkNumber();
}

back_btn_2.addEventListener(MouseEvent.CLICK, backImage_2);

function backImage_2(evtObj:MouseEvent):void {
//Subtract 1 from the current value
imageNumber_2--;
largeImageLoader_2.source="scenery/sc00"+imageNumber_2+".jpg";
checkNumber();
}

I hope this makes sense and this is all on the same frame at the moment just so I can get the basics working.

Kirill Poletaev said...

You need to call the functions checkNumber_1(), checkNumber_2, etc.

Nick said...

Thank you that fixed it and now I have my UiLoaders on different frames and I can jump between them but I have a new problem.

The first image on the first UilLoader acts as the first image when I move onto my second Uiloader. I can only see the proper first image on the second Uiloader when I move forward through the Uiloader then backwards.

This is my current code:

stop();

experimental_btn.addEventListener(MouseEvent.CLICK, experimentalClick2);
function experimentalClick2(event:MouseEvent):void{
gotoAndStop(2);
};

scenery_btn.addEventListener(MouseEvent.CLICK, sceneryClick2);
function sceneryClick2(event:MouseEvent):void{
gotoAndStop(4);
};


next_btn_1.addEventListener(MouseEvent.CLICK, nextImage_1);

var imageNumber_1:Number=1;
function checkNumber_1():void {
next_btn_1.visible=true;
back_btn_1.visible=true;
//If the imageNumber is = 5, then do something...
if (imageNumber_1==3) {
trace(imageNumber_1);
next_btn_1.visible=false;
}
//if the imageNumber is = 1, then don't show the back button
if (imageNumber_1==1) {
trace(imageNumber_1);
back_btn_1.visible=false;
}
}
checkNumber_1();

function nextImage_1(evtObj:MouseEvent):void {
//Adding to the current value +1
imageNumber_1++;
largeImageLoader_1.source="experimental/ex00"+imageNumber_1+".jpg";
checkNumber_1();
}

back_btn_1.addEventListener(MouseEvent.CLICK, backImage_1);

function backImage_1(evtObj:MouseEvent):void {
//Subtract 1 from the current value
imageNumber_1--;
largeImageLoader_1.source="experimental/ex00"+imageNumber_1+".jpg";
checkNumber_1();
}

Thank you for all of your help so far.

Nick said...

Do you know of a way to help me?

Kirill Poletaev said...

I couldn't understand your question until now :P Took me like 20 times.

Anyway, what you wanna do is update the big image loader as you move to the new frame.

You need to change the largeImageLoader source and call the checkNumber() method (or whatever it is called in your code) everytime you go to a new frame.

Nick said...
This comment has been removed by the author.
Nick said...

That's ok, I just moved onto a few other jobs and sorry if I did not give you enough information. The code above for frame 2

This is for frame 4:

stop();

experimental_btn.addEventListener(MouseEvent.CLICK, experimentalClick4);
function experimentalClick4(event:MouseEvent):void {
gotoAndStop(2);
}


scenery_btn.addEventListener(MouseEvent.CLICK, sceneryClick4);
function sceneryClick4(event:MouseEvent):void {
gotoAndStop(4);
}


next_btn_2.addEventListener(MouseEvent.CLICK, nextImage_2);

var imageNumber_2:Number=1;
function checkNumber_2():void {
next_btn_2.visible=true;
back_btn_2.visible=true;
//If the imageNumber is = 5, then do something...
if (imageNumber_2==3) {
trace(imageNumber_2);
next_btn_2.visible=false;
}
//if the imageNumber is = 1, then don't show the back button
if (imageNumber_2==1) {
trace(imageNumber_2);
back_btn_2.visible=false;
}
}
checkNumber_2();

function nextImage_2(evtObj:MouseEvent):void {
//Adding to the current value +1
imageNumber_2++;
largeImageLoader_2.source="scenery/sc00"+imageNumber_2+".jpg";
checkNumber_2();
}

back_btn_2.addEventListener(MouseEvent.CLICK, backImage_2);

function backImage_2(evtObj:MouseEvent):void {
//Subtract 1 from the current value
imageNumber_2--;
largeImageLoader_2.source="scenery/sc00"+imageNumber_2+".jpg";
checkNumber_2();
}

I have "checkNumber()" on both frames and I have referenced different folders so I am not sure what to change. I have a diagram to helpfully explain my problem a bit more and I have a screenshot of my folder system. I hope this all helps.

https://img.skitch.com/20110303-e15cg3npghui1n22i5rupn1xyq.jpg

https://img.skitch.com/20110303-92mrnj7jqeb9hjtcsj5b934y7.jpg

Kirill Poletaev said...

Add this to the end of the code at frame 2:

imageNumber_1 = 1;
largeImageLoader_1.source="experimental/ex00"+imageNumber_1+".jpg";
checkNumber_1();

Add this to the end of the code at frame 4:

imageNumber_2 = 1;
largeImageLoader_2.source="experimental/sc00"+imageNumber_2+".jpg";
checkNumber_2();

Post a Comment