UIloader with autoresize is pixelating loaded images on different resolutions

[karenkane]

Hi, I need someone to help point me in the right direction.

I am working with Adobe CS3 Professional.

My publish settings are Flash Player 9 with Bottom up Load order, and the Size of the stage has been set to 900x561.

The HTML is published to load the SWF file as 100%x100%

Additionally I added the following to the HTML Headers to disable scrollbars:

<STYLE TYPE="text/css">
<!--
body {overflow:hidden}
-->
</STYLE>

I writing the movie with AS3, and I am building a 4 image, gallery.

I have 4 Adobe UIloader components that are side by side and have arrows that allow you to browse the images back and forth. The UIloader is configured to auto-resize the images that it loads.

The UI Loader Size Is:
W: 175.0
H: 264.0

I am using an XML file to hold image info and I use an URLLoader to import the data into an array which is then feed to the UIloader to load via URLRequest().



Here is my AS:

// Stop the timeline
stop();


// Import functions
import fl.containers.UILoader;
import fl.controls.Label;
import fl.controls.ProgressBar;
import fl.controls.ProgressBarMode;

// Hide collection buttons until we determine if the collections
// exist and are needed.
gal1_btn.visible = false;
gal2_btn.visible = false;
gal3_btn.visible = false;
gal4_btn.visible = false;

// Setup XML Loader
var xmlLoader:URLLoader = new URLLoader();
var GlobalCollections:XML = new XML();
xmlLoader.load(new URLRequest("http://www.MySite.com/Gallery/Collections.xml"));
var domain:String = "http://www.MySite.com/Gallery/";
xmlLoader.addEventListener(Event.COMPLETE, processXML);


// Create Arrays for holding XML data
var collectionNamesList:Array = new Array();
var collectionGroupList:Array = new Array();


// Keep track of which gallery was selected
var selectedGallery:Number = 0;

// Track how many images in a collection
var numberOfimages:Number = 0;

// Initial pictures to load by MC
var pic1ImgNumber:Number = 0;
var pic2ImgNumber:Number = 1;
var pic3ImgNumber:Number = 2;
var pic4ImgNumber:Number = 3;


// Holds the path to the loaded image for each picture holder
var pic1Img:String;
var pic2Img:String;
var pic3Img:String;
var pic4Img:String;

// Used for testing
var testString:String;

// Add listeners for changing the color of the buttons
gal1_btn.addEventListener(MouseEvent.MOUSE_OVER, overBTN);
gal1_btn.addEventListener(MouseEvent.MOUSE_OUT, offBTN);
gal1_btn.addEventListener(MouseEvent.MOUSE_DOWN, downBTN);

gal2_btn.addEventListener(MouseEvent.MOUSE_OVER, overBTN);
gal2_btn.addEventListener(MouseEvent.MOUSE_OUT, offBTN);
gal2_btn.addEventListener(MouseEvent.MOUSE_DOWN, downBTN);

gal3_btn.addEventListener(MouseEvent.MOUSE_OVER, overBTN);
gal3_btn.addEventListener(MouseEvent.MOUSE_OUT, offBTN);
gal3_btn.addEventListener(MouseEvent.MOUSE_DOWN, downBTN);

gal4_btn.addEventListener(MouseEvent.MOUSE_OVER, overBTN);
gal4_btn.addEventListener(MouseEvent.MOUSE_OUT, offBTN);
gal4_btn.addEventListener(MouseEvent.MOUSE_DOWN, downBTN);



function incDown (e:MouseEvent):void
{
if(pic1ImgNumber > 0)
{
pic1ImgNumber = pic1ImgNumber - 1;
pic2ImgNumber = pic2ImgNumber - 1;
pic3ImgNumber = pic3ImgNumber - 1;
pic4ImgNumber = pic4ImgNumber - 1;

pic1Img = domain + selectedGallery +"/"+ pic1ImgNumber +".jpg";
pic2Img = domain + selectedGallery +"/"+ pic2ImgNumber +".jpg";
pic3Img = domain + selectedGallery +"/"+ pic3ImgNumber +".jpg";
pic4Img = domain + selectedGallery +"/"+ pic4ImgNumber +".jpg";

pic_1_mc.load(new URLRequest(pic1Img));
pic_2_mc.load(new URLRequest(pic2Img));
pic_3_mc.load(new URLRequest(pic3Img));
pic_4_mc.load(new URLRequest(pic4Img));

}
}

function incUp (e:MouseEvent):void
{
Arrow_Next.removeEventListener(MouseEvent.CLICK, incUp);

if(pic4ImgNumber < numberOfimages)
{
pic1ImgNumber = pic1ImgNumber + 1;
pic2ImgNumber = pic2ImgNumber + 1;
pic3ImgNumber = pic3ImgNumber + 1;
pic4ImgNumber = pic4ImgNumber + 1;

pic1Img = domain + selectedGallery +"/"+ pic1ImgNumber +".jpg";
pic2Img = domain + selectedGallery +"/"+ pic2ImgNumber +".jpg";
pic3Img = domain + selectedGallery +"/"+ pic3ImgNumber +".jpg";
pic4Img = domain + selectedGallery +"/"+ pic4ImgNumber +".jpg";

pic_1_mc.load(new URLRequest(pic1Img));
pic_2_mc.load(new URLRequest(pic2Img));
pic_3_mc.load(new URLRequest(pic3Img));
pic_4_mc.load(new URLRequest(pic4Img));

pic_4_mc.addEventListener(Event.COMPLETE, completeHandler);
}
}

function completeHandler(event:Event):void
{
pic_1_mc.removeEventListener(Event.COMPLETE, completeHandler);
pic_4_mc.removeEventListener(Event.COMPLETE, completeHandler);

Arrow_Prev.addEventListener(MouseEvent.CLICK, incDown);
Arrow_Next.addEventListener(MouseEvent.CLICK, incUp);
}


// Process the XML once it has finished loading
function processXML(e:Event):void {

// Load XML data
XML.ignoreWhitespace = true;
var Collections:XML = new XML(e.target.data);
GlobalCollections = Collections;

// get total number of collections should be 4
var numberOfCollections:Number = Collections.gallery.length();
//trace("Number Of Collections: " + numberOfCollections);

// Build list of collection Names
// Should be:
// Collection 0 name: Spring
// Collection 1 name: Summer
// Collection 2 name: Fall
// Collection 3 name: Holiday
var i:Number;
for(i=0; i < numberOfCollections; i++)
{
collectionNamesList[i] = Collections.gallery[i].@title;
collectionGroupList[i] = Collections.gallery[i].group[0].@title; // Get Year

//trace("Collection " + i + " name: " + collectionNamesList[i]);
//trace("Collection " + i + " year: " + collectionGroupList[i]);
}


if (numberOfCollections >= 1)
{
gal1_btn.visible = true;
gal1_btn.txt.text = collectionNamesList[0] + " " + collectionGroupList[0];

// Add Listener
gal1_btn.addEventListener(MouseEvent.CLICK, gal1Clicked);
}
if (numberOfCollections >= 2)
{
gal2_btn.visible = true;
gal2_btn.txt.text = collectionNamesList[1] + " " + collectionGroupList[1];

// Add Listener
gal2_btn.addEventListener(MouseEvent.CLICK, gal2Clicked);
}
if (numberOfCollections >= 3)
{
gal3_btn.visible = true;
gal3_btn.txt.text = collectionNamesList[2] + " " + collectionGroupList[2];

// Add Listener
gal3_btn.addEventListener(MouseEvent.CLICK, gal3Clicked);
}
if (numberOfCollections == 4)
{
gal4_btn.visible = true;
gal4_btn.txt.text = collectionNamesList[3] + " " + collectionGroupList[3];

// Add Listener
gal4_btn.addEventListener(MouseEvent.CLICK, gal4Clicked);
}
}

function gal1Clicked(event:MouseEvent):void
{
// gallery to load
selectedGallery = 0;

// Reset pictures to start at begining of collection.
pic1ImgNumber = 0;
pic2ImgNumber = 1;
pic3ImgNumber = 2;
pic4ImgNumber = 3;

pic1Img = domain + selectedGallery +"/"+ pic1ImgNumber +".jpg";
pic2Img = domain + selectedGallery +"/"+ pic2ImgNumber +".jpg";
pic3Img = domain + selectedGallery +"/"+ pic3ImgNumber +".jpg";
pic4Img = domain + selectedGallery +"/"+ pic4ImgNumber +".jpg";

pic_1_mc.load(new URLRequest(pic1Img));
pic_2_mc.load(new URLRequest(pic2Img));
pic_3_mc.load(new URLRequest(pic3Img));
pic_4_mc.load(new URLRequest(pic4Img));

// Start listening for pic_4_mc to finish loading
pic_4_mc.addEventListener(Event.COMPLETE, completeHandler);

// Figureout how many images in this collection
numberOfimages = GlobalCollections.gallery[0].group[0].image.length();

// Display the name of the collection that is being shown
collectionNam.text = collectionNamesList[0] + " " + collectionGroupList[0];
}
function gal2Clicked(event:MouseEvent):void
{
// gallery to load
selectedGallery = 1;

// Reset pictures to start at begining of collection.
pic1ImgNumber = 0;
pic2ImgNumber = 1;
pic3ImgNumber = 2;
pic4ImgNumber = 3;

pic1Img = domain + selectedGallery +"/"+ pic1ImgNumber +".jpg";
pic2Img = domain + selectedGallery +"/"+ pic2ImgNumber +".jpg";
pic3Img = domain + selectedGallery +"/"+ pic3ImgNumber +".jpg";
pic4Img = domain + selectedGallery +"/"+ pic4ImgNumber +".jpg";

pic_1_mc.load(new URLRequest(pic1Img));
pic_2_mc.load(new URLRequest(pic2Img));
pic_3_mc.load(new URLRequest(pic3Img));
pic_4_mc.load(new URLRequest(pic4Img));

// Start listening for pic_4_mc to finish loading
pic_4_mc.addEventListener(Event.COMPLETE, completeHandler);

// Figureout how many images in this collection
numberOfimages = GlobalCollections.gallery[1].group[0].image.length();

// Display the name of the collection that is being shown
collectionNam.text = collectionNamesList[1] + " " + collectionGroupList[1];
}
function gal3Clicked(event:MouseEvent):void
{
// gallery to load
selectedGallery = 2;

// Reset pictures to start at begining of collection.
pic1ImgNumber = 0;
pic2ImgNumber = 1;
pic3ImgNumber = 2;
pic4ImgNumber = 3;

pic1Img = domain + selectedGallery +"/"+ pic1ImgNumber +".jpg";
pic2Img = domain + selectedGallery +"/"+ pic2ImgNumber +".jpg";
pic3Img = domain + selectedGallery +"/"+ pic3ImgNumber +".jpg";
pic4Img = domain + selectedGallery +"/"+ pic4ImgNumber +".jpg";

pic_1_mc.load(new URLRequest(pic1Img));
pic_2_mc.load(new URLRequest(pic2Img));
pic_3_mc.load(new URLRequest(pic3Img));
pic_4_mc.load(new URLRequest(pic4Img));

// Start listening for pic_4_mc to finish loading
pic_4_mc.addEventListener(Event.COMPLETE, completeHandler);

// Figureout how many images in this collection
numberOfimages = GlobalCollections.gallery[2].group[0].image.length();

// Display the name of the collection that is being shown
collectionNam.text = collectionNamesList[2] + " " + collectionGroupList[2];
}
function gal4Clicked(event:MouseEvent):void
{
// gallery to load
selectedGallery = 3;

// Reset pictures to start at begining of collection.
pic1ImgNumber = 0;
pic2ImgNumber = 1;
pic3ImgNumber = 2;
pic4ImgNumber = 3;

pic1Img = domain + selectedGallery +"/"+ pic1ImgNumber +".jpg";
pic2Img = domain + selectedGallery +"/"+ pic2ImgNumber +".jpg";
pic3Img = domain + selectedGallery +"/"+ pic3ImgNumber +".jpg";
pic4Img = domain + selectedGallery +"/"+ pic4ImgNumber +".jpg";

pic_1_mc.load(new URLRequest(pic1Img));
pic_2_mc.load(new URLRequest(pic2Img));
pic_3_mc.load(new URLRequest(pic3Img));
pic_4_mc.load(new URLRequest(pic4Img));

// Start listening for pic_4_mc to finish loading
pic_4_mc.addEventListener(Event.COMPLETE, completeHandler);

// Figureout how many images in this collection
numberOfimages = GlobalCollections.gallery[3].group[0].image.length();

// Display the name of the collection that is being shown
collectionNam.text = collectionNamesList[3] + " " + collectionGroupList[3];
}



function overBTN(Event:MouseEvent):void
{
Event.currentTarget.txt.textColor = 0x495660;
}

function offBTN(Event:MouseEvent):void
{

Event.currentTarget.txt.textColor = 0x000000;
}

function downBTN(Event:MouseEvent):void
{

Event.currentTarget.txt.textColor = 0x999999;
}



Here is my Test XML File:

(Later on these XML nodes will contain a description of the image but for now they just have numbers for reference)

<?xml version="1.0"?>
<galleries>
<gallery title="Spring">
<group title="2010">
<image>1</image>
<image>2</image>
<image>3</image>
<image>4</image>
<image>5</image>
<image>6</image>
<image>7</image>
<image>8</image>
<image>9</image>
<image>10</image>
<image>11</image>
<image>12</image>
<image>13</image>
<image>14</image>
<image>15</image>
</group>
</gallery>
<gallery title="Summer">
<group title="2010">
<image>1</image>
<image>2</image>
<image>3</image>
<image>4</image>
<image>5</image>
<image>6</image>
<image>7</image>
<image>8</image>
<image>9</image>
<image>10</image>
<image>11</image>
<image>12</image>
<image>13</image>
<image>14</image>
<image>15</image>
</group>
</gallery>
<gallery title="Fall">
<group title="2010">
<image>1</image>
<image>2</image>
<image>3</image>
<image>4</image>
<image>5</image>
<image>6</image>
<image>7</image>
<image>8</image>
<image>9</image>
<image>10</image>
<image>11</image>
<image>12</image>
<image>13</image>
<image>14</image>
<image>15</image>
</group>
</gallery>
<gallery title="Holiday">
<group title="2010">
<image>1</image>
<image>2</image>
<image>3</image>
<image>4</image>
<image>5</image>
<image>6</image>
<image>7</image>
<image>8</image>
<image>9</image>
<image>10</image>
<image>11</image>
<image>12</image>
<image>13</image>
<image>14</image>
<image>15</image>
</group>
</gallery>
</galleries>



Now with all that out of the way here is my question.

I first created an image that is the exact dimensions of the URLLoader and it looks OK but somewhat pixelated 1024x768 but on larger resolutions the images are very pixelated. So I created a picture that was 1024 x 1542 and again this looks OK on larger resolutions but is horrible on smaller resolutions.

How can I fix this problem so the images look good regardless of the resolution?

I really need help with this because I have done some research but have yet to find a way to fix these issues.

Thanks,
Karen