Resizing images loaded with XMLLoader & ImageLoader

[ruh 0 Likes (Newbie)]

hi, thank you for this great and useful tool.

 

my xml:

<data>

	<ImageLoader name="digital_01" url="imgs/digital_01.jpg" centerRegistration="true" width="640" height="400" twx="342" twy="391" kw="230" kh="200" load="true"/>

	<ImageLoader name="digital_02" url="imgs/digital_02.jpg" centerRegistration="true" width="734" height="400" twx="594" twy="389" kw="215" kh="192" load="true"/>

</data>

as3:

var queue_xml:XMLLoader = new XMLLoader("imgs/digitals.xml", {name:"digitalsXML", maxConnections:1, estimatedBytes:5000, onChildComplete:imageCompleteHandler, onComplete:queueCompleteHandler});
queue_xml.load();

var img_xml:XML = new XML;

function imageCompleteHandler(event:LoaderEvent):void
{
	addChild(event.target.content as ContentDisplay);

	img_xml = LoaderMax.getLoader(event.target.name).vars.rawXML;
 
	//i want to scale down images for using them as thumbnails too
	TweenMax.to(event.target.content, 0, {autoAlpha:0.2, blurFilter:{blurX:5, blurY:5}, width:img_xml.@kw, height:img_xml.@kh, x:img_xml.@twx, y:img_xml.@twy});

trace("original image value:"+ img_xml.@width +", xml thumbnail size(kw) value:"+ img_xml.@kw +", current image value:"+ event.target.content.width);

// trace result for first
//original image value:640, xml thumbnail size(kw) value:230, current image value:820

//trace result for second
//original image value:734, xml thumbnail size(kw) value:215, current image value:1095
}

function queueCompleteHandler(event:LoaderEvent):void
{
}

problem:

my images bigger than its actual size but i want them smaller. when i set kw or kh to negative values, result is what i want. btw this is my first project with greensock tools.
 

[Carl 9,066 Likes (Superhero)]

Hi and welcome to the GreenSock forums.

If this is your first project with LoaderMax I would say you are doing really well!

 

To solve the sizing issue try using fitWidth and fitHeight

TweenMax.to(event.target.content, 0, {autoAlpha:0.2, blurFilter:{blurX:5, blurY:5}, fitWidth:img_xml.@kw, fitHeight:img_xml.@kh, x:img_xml.@twx, y:img_xml.@twy});

http://api.greensock.com/as/com/greensock/loading/display/ContentDisplay.html#fitWidth

 

If that doesn't help please upload your flash and image files and we'll give it a closer look.

[ruh 0 Likes (Newbie)]

thanks, i tried fitwidth but same result.

 

im using gs v11.

 

[ruh 0 Likes (Newbie)]

var queue_xml:XMLLoader = new XMLLoader("imgs/digitals.xml", {name:"digitalsXML", maxConnections:1, estimatedBytes:5000, onChildComplete:imageCompleteHandler, onComplete:queueCompleteHandler});
queue_xml.load();

var img_xml:XML = new XML;

//<NEW CODES>
var kw:uint = new uint;
var kh:uint = new uint;
var twx:uint = new uint;
var twy:uint = new uint;
//</NEW CODES>

function imageCompleteHandler(event:LoaderEvent):void
{
	addChild(event.target.content as ContentDisplay);
	
	img_xml = LoaderMax.getLoader(event.target.name).vars.rawXML;
//<NEW CODES>
	kw = img_xml.@kw;
	kh = img_xml.@kh;
	twx = img_xml.@twx;
	twy = img_xml.@twy;
//</NEW CODES>
	//i want to scale down images for using them as thumbnails too
//<CHANGES>
	TweenMax.to(event.target.content, 0, {autoAlpha:0.2, blurFilter:{blurX:5, blurY:5}, width:kw, height:kh, x:twx, y:twy});
</CHANGES>
}

function queueCompleteHandler(event:LoaderEvent):void
{
}

i found the problem. :shy:

any other simple way like setting some/all img_xml variables as uint instead of creating new uint variables?

[Carl 9,066 Likes (Superhero)]

Hi Ruh,

 

Thank you for providing the zip and for posting your solution. I haven't had a chance yet to dig into them (weekends are sometimes busy). 

 

It seems you found that your tweens were doing relative tweens because the values from the xml were strings. I didn't think of that.

 

For instance

 

if mc has x of 50

//relative
TweenLite.to(mc, 1, {x:"100"}) //tweens to x:150

//absolute:
TweenLite.to(mc, 1, {x:100}) // tweens to x 50

I think your solution is actually quite clean, but you could just convert to Number or uint inside the tween:

TweenMax.to(event.target.content, 0, {autoAlpha:0.2, blurFilter:{blurX:5, blurY:5}, width:Number(img_xml.@kw), Number(height:img_xml.@kh), x:Number(img_xml.@twx), y:Number(img_xml.@twy)});

[ruh 0 Likes (Newbie)]

//relative
TweenLite.to(mc, 1, {x:"100"}) //tweens to x:150

//absolute:
TweenLite.to(mc, 1, {x:100}) // tweens to x 50

TweenMax.to(event.target.content, 0, {autoAlpha:0.2, blurFilter:{blurX:5, blurY:5}, width:Number(img_xml.@kw), Number(height:img_xml.@kh), x:Number(img_xml.@twx), y:Number(img_xml.@twy)});

 

These are what i want. 

 

Thank you Carl.