uniform sizing of loaded images

[pc75]

Hi,

 

I have an array of images I need to be available to load onto the stage with little or no transition time. My (clearly flawed) plan is to load the array with LoaderMax and add/remove them as required. The source images are of different dimensions and file sizes. I need the images to appear at the same size within a container of some sort. All works well, however, the images do not load at the required size (600 x 450), some do, some don't. Here is my experimental code so far (please laugh as required)...

 

import com.greensock.loading.ImageLoader;
import com.greensock.events.LoaderEvent;
import com.greensock.loading.LoaderMax;
import flash.display.Sprite;
import com.greensock.layout.ScaleMode;
import flash.display.MovieClip;
import flash.events.MouseEvent;

var picArr:Array = ["chassis.jpg","toyota1.jpg","dog_model.jpg","arrows2.jpg"];

var holder:MovieClip = new MovieClip();

LoaderMax.activate([imageLoader]);

var queue:LoaderMax = LoaderMax.parse(picArr,
{maxConnections:1,
ScaleMode:"proportionalInside",
centerRegistration:true,	
width:600,
height:450,
onChildComplete:compHandler	
});

queue.prependURLs("Images/");

queue.load();

function compHandler(event:LoaderEvent)
{
trace(event.target.name);
stage.addChild(holder);
holder.addChild(LoaderMax.getContent("loader1"));
holder.width = 600;
holder.height = 450;
holder.x = 212;
holder.y = 200;
}

button1.addEventListener(MouseEvent.CLICK, clickHandler);
button2.addEventListener(MouseEvent.CLICK, clickHandler);
button3.addEventListener(MouseEvent.CLICK, clickHandler);
button4.addEventListener(MouseEvent.CLICK, clickHandler);

function clickHandler(event:MouseEvent)
{
switch (event.target.name)
{

	case "button1" :
		holder.removeChildAt(0);
		holder.addChild(LoaderMax.getContent("loader1"));
		break;

	case "button2" :
		holder.removeChildAt(0);
		holder.addChild(LoaderMax.getContent("loader2"));
		break;

	case "button3" :
		holder.removeChildAt(0);
		holder.addChild(LoaderMax.getContent("loader3"));
		break;

	case "button4" :
		holder.removeChildAt(0);
		holder.addChild(LoaderMax.getContent("loader4"));
		break;
}
}

 

Please feel free to point out the undoubtedly obvious errors to someone as competent with AS3 as a pig with a musket.

 

Thanks in advance,

 

PC

[Carl]

did you try proportionalOutside?

 

"proportionalOutside" - The image will be scaled proportionally to completely fill the area, allowing portions of it to exceed the bounds defined by the width/height.

 

I think that is what you are trying to achieve

[GreenSock]

I noticed several problems with your code:

 

1) You're using "ScaleMode" instead of "scaleMode" (lowercase "s").

 

2) You're defining loader variables like width, height, centerRegistration, and scaleMode in the wrong vars parameter of parse(). When you feed an array into the parse() method, it spits back a LoaderMax instance containing a loader for each element in the array. The 2nd parameter is for defining the LoaderMax's vars, not each individual loader's vars. For example, if you want the LoaderMax to have maxConnections:1, you'd put that in the 2nd parameter. But put the individual loader-based vars in the 3rd parameter (as the ASDocs indicate). So your code would look like this:

var queue:LoaderMax = LoaderMax.parse(picArr,
  {maxConnections:1, onChildComplete:compHandler},
  {scaleMode:"proportionalInside", container:holder, centerRegistration:true, width:600, height:450, x:212, y:200});

 

3) You're using a "holder" MovieClip to dump all the images into, but you never add that holder to the display list anywhere, so you won't be able to see it. When you click one of your buttons, it looks like you're also moving things around in that invisible holder.

 

4) I'm not entirely sure why you're using an onChildComplete to call a method that is re-setting the width/height and x/y of the holder every single time.If you have different sized images, that will result in scaling the clip differently each time, potentially squishing the previously loaded images in odd ways. I'd just set the width/height in the ImageLoaders themselves and leave it at that. And you can use the special "container" property to tell the images to load into your "holder" clip directly.

 

Here's what your code would probably look like after the changes:

var picArr:Array = ["chassis.jpg","toyota1.jpg","dog_model.jpg","arrows2.jpg"];

var holder:MovieClip = new MovieClip();
addChild(holder);

LoaderMax.activate([imageLoader]);

var queue:LoaderMax = LoaderMax.parse(picArr,
  {maxConnections:1, onChildComplete:compHandler},
  {scaleMode:"proportionalInside", container:holder, centerRegistration:true, width:600, height:450, x:212, y:200});

holder.addChild(LoaderMax.getContent(picArr[0]));
queue.prependURLs("Images/");

queue.load();

function compHandler(event:LoaderEvent) {
  trace(event.target.name);
}

(I didn't include the code for the buttons, but hopefully this clears things up)

[pc75]

Hi,

 

Many thanks for the replies. Karl, I tried all kinds of scaleMode, sadly never with a lowercase 's'. A schoolboy error on my part! I did , however, revisit your series of tutorials on the LoaderMax features and eventually got the project to work. Your site is a great help to me, please don't stop.

 

Mr Greensock, as above, many thanks for taking the time to explain my errors. I believe I chased the code around so many times it ended up worse than it was to begin with.

 

Having now got this to work seamlessly with the code kindly amended, I've attempted to go down the path of XML Loaders...

 

import com.greensock.loading.ImageLoader;
import com.greensock.events.LoaderEvent;
import com.greensock.loading.LoaderMax;
import flash.events.MouseEvent;
import com.greensock.loading.XMLLoader;

button1.addEventListener(MouseEvent.CLICK, clickHandler);
button2.addEventListener(MouseEvent.CLICK, clickHandler);
button3.addEventListener(MouseEvent.CLICK, clickHandler);
button4.addEventListener(MouseEvent.CLICK, clickHandler);

LoaderMax.activate([imageLoader]);

var queue:XMLLoader = new XMLLoader("imageLoader.xml",{name:"imageLoader", maxConnections:4, onProgress:progressHandler, onComplete:compHandler
});

queue.load();

progressBar.scaleX = 0;

var splash:Splash = new Splash ;
splash.alpha = 0.8;

function compHandler(event:LoaderEvent):void
{
stage.addChildAt(splash, 0);
}

function progressHandler(event:LoaderEvent):void
{
progressBar.scaleX = queue.progress;
}

function clickHandler(event:MouseEvent):void
{
switch (event.target.name)
{

	case "button1" :
		stage.removeChildAt(0);
		var image1:Bitmap = LoaderMax.getLoader("chassis").rawContent;
		stage.addChildAt(image1, 0);
		image1.x = 256;
		image1.y = 250;
		break;

	case "button2" :
		stage.removeChildAt(0);
		var image2:Bitmap = LoaderMax.getLoader("arrows").rawContent;
		stage.addChildAt(image2, 0);
		image2.x = 364;
		image2.y = 250;
		break;

	case "button3" :
		stage.removeChildAt(0);
		var image3:Bitmap = LoaderMax.getLoader("dog").rawContent;
		stage.addChildAt(image3, 0);
		image3.x = 256;
		image3.y = 250;
		break;

	case "button4" :
		stage.removeChildAt(0);
		var image4:Bitmap = LoaderMax.getLoader("toyota").rawContent;
		stage.addChildAt(image4, 0);
		image4.x = 256;
		image4.y = 250;
		break;
}
} 

 

The xml is as follows:

<?xml version="1.0" encoding="utf-8"?>

 

This code all works well - my only question is: 'I have specified 'x' and 'y' coordinates in the xml, but, when adding to the display list the images appear at stage 0,0 and I have to reposition them in the relative switch statements. I'm guessing that I should declare the x and y in separate parameters of the xml loader. I cannot get it to work though. Being an engineer and not a programmer doesn't help I guess!

 

I appreciate any time you may spend on this!

[Carl]

glad you have made progress and that my tutorials and Mr. GreenSock's help have gone a long way.

 

when you set the x/y values in the xml they get applied to the ContentDisplay sprite that contains the image.

you can target this object through the content property of an ImageLoader.

 

the problem you are having is you are grabbing the rawContent which technically lives inside the content. the rawContent always has x/y coordinates of 0/0.

 

to target the content you can either do

someLoader.content;

//or 

LoaderMax.getContent("someLoaderNameOrUrl");

 

in your example either will work fine:

 var image2:ContentDisplay = LoaderMax.getLoader("arrows").content;

//or

var image2:ContentDisplay = LoaderMax.getContent("arrows");

 

or if for some reason you really really need the Bitmap

 

 var image2:Bitmap = LoaderMax.getLoader("arrows").rawContent;
image2.x = LoaderMax.getContent("arrows").x;
image2.y = LoaderMax.getContent("arrows").y;

[pc75]

Karl,

 

Brilliant! Works like a proverbial charm! Thanks again and, yes, keep the snorkl going - like this site, it's a great resource for us folk on the learning path who don't yet have the experience to decipher the Docs accurately.

 

Regards,

 

PC