-
UIloader with autoresize is pixelating loaded images on different resolutions
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
Last edited by karenkane; 07-01-2010 at 02:08 PM.
Reason: Title was slightly wrong.
-
Senior Member
Have you tried avoiding the UILoader and just loading it into a Loader and scaling the image up or as in the last case down?
- The right of the People to create Flash movies shall not be infringed. -
Tags for this Thread
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|