ImageLoader Resize Issue

[iTech]

var loader:ImageLoader = new ImageLoader(element.data.@value, { name: 'loader_profile_picture', maxConnections: 100, width: 175, height: 175, x: 277, y: 840, bgColor: 0xFF1ab7ea, scaleMode: 'proportionalInside', noCache: true, container: this, onComplete: display });

loader.load();

 

 

That's what I am using for my code.

 

Now the issue is that when using the "scaleMode", onComplete says the image has been finished loading and displays it but there is about a one second delay for the image to show up because it has to be resized. I know this because I disabled the resizing and the onComplete handler synced up properly. Is there any way to wait until it's done scaling to fire the onComplete?

[iTech]

If anyone could post a demo of scaling working properly I can give that a try and see if it's just me.

[Carl]

Hi and welcome to the GreenSock forums.

 

I don't know why the image would appear large and then wait before being scaled down. That isn't normal.

 

Here is a basic example of a 640 x 400 image being loaded and proportionally scaled into a 200 x 200 square container

 

 

 

import com.greensock.*;
import com.greensock.loading.*;
import com.greensock.events.LoaderEvent;


var image:ImageLoader = new ImageLoader("crab.png", {container:this, noCache:true, width:200, height:200, scaleMode:"proportionalInside", onComplete:display});
image.load();
    
function display(e:LoaderEvent):void {
    message_txt.text = "image loaded!!!";
    };
 

 

 

Live Demo: http://www.snorkl.tv/dev/loaderMax/scaleModeProportionalInside.html

 

Source Image: http://www.snorkl.tv/dev/loaderMax/crab.png

 

Zip of CS5 fla, swf and sample image attached. 

 

 

If this doesn't help, please feel free to upload a simple example so that we can compile and see the issue on this end.

 

Thanks!

proportionalInsideDemo_CS5.zip

[iTech]

Thanks for the welcome! I really like the LoaderMax library, it makes things simple and clean.

 

Essentially I am trying to do the following:

 

Once the AS3 Class is instantiated, it loads a profile picture off Twitter, and once COMPLETELY loaded, it displays it to the stage (based off "container: this", not entirely sure if that's true) using the display() function. Then when a new profile picture URL is sent, it should keep showing the old picture until the new one is COMPLETELY loaded. Once the new one is loaded, it should remove the old picture and display the new one.

 

Some of the issues I'm having is that:

 

1. Once the onComplete is fired, it ends up making the picture visible but the background sprite shows first then a second later the picture. I know it's the proportion property because I disabled it (I also used tested the regular AS3 code for loading) and the events sync up. Is it possible to modify the proportion property to finish before onComplete is fired?

 

2. I can't get the old picture removed. It keeps stacking on top of each other.

 

CONSTRUCTOR: public card() { this.visible = false; }

public data(xmldata:XML):void {

   for each(var element:XML in xmldata.elements())
   {
     var loader:ImageLoader = new ImageLoader(element.data.@value, { name: 'loader_profile_picture', maxConnections: 100, width: 175, height: 175, x: 277, y: 840, bgColor: 0xFF1ab7ea, scaleMode: 'proportionalInside', noCache: true, container: this, onComplete: display });
 
     loader.load();
   }
}

private function display(event:LoaderEvent):void
{
	this.visible = true;
}

[Carl]

When you create an ImageLoader  and specify a container property, the ImageLoader's ContentDisplay object is immediately placed on the stage. Since you are defining a bgColor and width and height you are seeing the ContentDisplay object immediately. The image then appears (inside the ContentDisplay) at the size you specify as soon as it is loaded. 

 

If you don't want to see the ContentDisplay object simply add alpha:0 to your constructor like so:

 

 var loader:ImageLoader = new ImageLoader(element.data.@value, { name: 'loader_profile_picture', maxConnections: 100, width: 175, height: 175, x: 277, y: 840, bgColor: 0xFF1ab7ea, scaleMode: 'proportionalInside', noCache: true, container: this, alpha:0, onComplete: display });

 

and then inside your display method turn the alpha to 1

 

 

 

private function display(event:LoaderEvent):void
{
    e.target.content.alpha = 1;
    this.visible = true;
}
 

 

Another option is to not define a container in the ImageLoader constructor and use the onComplete callback to add the ImageLoader's ContentDisplay to the stage once it's loaded

 

 

 

private function display(event:LoaderEvent):void
{
    addChild(e.target.content);
    this.visible = true;
}
 

 

 

 

Once the new one is loaded, it should remove the old picture and display the new one.

 

 

You are going to have to add some code to handle that. It appears to me that you are looping through xml data and creating MULTIPLE ImageLoaders that all load at the same time. Also when each ImageLoader is built the ContentDisplay sprites are all stacking up on top of each other at the same x/y coordinates. 

 

You can remove the content of a loader from the display list just like you would any display object.

You can find the content of any loader by name or url (LoaderMax.getContent()), since you ImageLoader's are being built in a loop, it appears they all have the same name (not so good). 

 

To remove a specific loader's content you can do

 

 

 

removeChild(LoaderMax.getContent("someUrl"));
 

Since all the ContentDisplay objects are added to 'this' you could also just use 

 

 

removeChildAt(someIndex)
 

Which will allow you to remove them without knowing their name or url

 

Again, I'm a little confused by your loop as it appears that you loading a bunch of images at the same time and placing them all at the same coordinates on top of each other. Perhaps there is something I'm missing. 

 

Hopefully some of this gets you closer to the right direction.

 

Let us know if you need more assistance.

[iTech]

Thanks for the help Carl. As you can tell I'm new to AS3 so bear with me!

 

I'm basically showing a single tweet one after another, I figured out the issue with the image and background sprite (you were right). The loaders end up being stacked on top of each other but I obviously don't want that in fear of memory leaks. I tried keeping track of the previous URL but that won't work because the entire class isn't called every time, only on the first load.