LoaderMax Nesting - Best Practices

[ukla]

Today was the first time that I've had a chance to dig in. So please forgive my ignorance. Right now I am trying to determine how useful these classes will be to me.

 

Ok, so for my first test I created a simple xml document. It has three items like so:

 

 

In the code below I parse through the xml and load all of the images ("myimage1.jpg", "myimage2.jpg", "myimage3.jpg") via LoaderMax into a new movie clips. So far so good.

 

_mainqueue = new LoaderMax({name:"mainQueue", onProgress:progressHandler, onComplete:completeHandler, onError:errorHandler});

var xpos = 0;

for (var i:int=0;i     var item:MovieClip = new MovieClip();
    var image = _imagepath + list[i].attribute("image");
    _mainqueue.append( new ImageLoader(image, {name: list[i].attribute("id"), estimatedBytes:2400, container:item, alpha:1, width:764, height:340}) );
    item.x = xpos;
    _itemholder.addChild(item);
    _items.push(item);
    xpos = xpos + 50;
}
_mainqueue.load();

 

However, now I want to load ALL of the images at once (images and logos). I want three movie clips - each movie clip contains the image and the logo on top. So "myimage1.jpg" would have "mylogo1.png" on top.

 

What would be the best practice for this?

 

If I load everything together, there is a good chance that the logos will load before the images - resulting in the logos being covered by the images. Make sense?

 

I don't normally LOAD UP everything like this. But I just wanted to give it a shot. It could work well for flash elements on a site.

[GreenSock]

However, now I want to load ALL of the images at once (images and logos). I want three movie clips - each movie clip contains the image and the logo on top. So "myimage1.jpg" would have "mylogo1.png" on top.

 

What would be the best practice for this?

 

If I load everything together, there is a good chance that the logos will load before the images - resulting in the logos being covered by the images. Make sense?

 

That's the nice thing about the fact that LoaderMax instantly creates Sprites (ContentDisplay instances actually) that you can put wherever you want. You have complete control, and the actual image that gets loaded will be placed into the ContentDisplay Sprite whenever it happens to load. So:

var loader1:ImageLoader = new ImageLoader("image1.jpg");
var loader2:ImageLoader = new ImageLoader("logo.png");

//the content property is already available - put it on the stage wherever you want, in whatever order you want.
addChild(loader1.content);
addChild(loader2.content);

//then load() them whenever you want. Put them in a LoaderMax or not - totally flexible.

 

See what I mean?

 

And again, you could define all your loaders directly inside your XML file and have LoaderMax automatically load the assets immediately. Then in your onComplete, you could use LoaderMax.getContent() to get whatever content you want from the various loaders inside your xml! Like:

 

XML file:

AS code:

var loader:XMLLoader = new XMLLoader("data.xml", {onComplete:completeHandler});
function completeHandler(event:LoaderEvent):void {
   var image1:Sprite = LoaderMax.getContent("image1"); //from inside the XML!
   var logo1:Sprite = LoaderMax.getContent("logo1");
   addChild(image1);
   addChild(logo1);
}

 

See how easy it can be?

[ukla]

I used XMLLoader to load the xml file but didn't show the code. It define loaders for "fonts.swf" and "style.css". I dig that and it worked out well.

 

However, I NEVER see myself referencing xml images by name in my ActionScript code (as you show in your example). That really kills flexibility for me. I have producers editing xml files when clients request edits. If one of my producers changes the name of the image ... well ... I'd be screwed b/c my ActionScript would be calling an image (by name) that doesn't exist.

 

mainqueue.append( new ImageLoader(image, {name: list[i].attribute("id"), estimatedBytes:2400, container:item, alpha:1, width:764, height:340}) );

 

I guess that I wasn't very clear. So let's look at it like this ... do I always need to specify a container? What if I want the image loaded but don't want to target a container?

[ukla]

Regarding the nesting ....

 

I thought you might explain how to create a mainqueue - then nest imagesqueue and logosqueue within mainqueue. Anyhow, that was my thinking when I orginally started the thread.

 

Sorry if I am not being clear. I find it difficult to convey my thoughts in words when it comes to coding.

 

I also find that I try to be TOO FLEXIBLE when I program. Maybe I just need to chill out.

[GreenSock]

do I always need to specify a container? What if I want the image loaded but don't want to target a container?

 

Absolutely not - you don't need to define a container. That's just a convenience thing, but often you won't need (or want) to use it. Do whatever you want with the content whenever you want.

 

var loader:ImageLoader = new ImageLoader("image1.jpg");
//then later...
addChild(loader.content);

 

As far as nesting queues, it's as simple as putting a LoaderMax into another one with append() or insert() or prepend(). Like:

 

var imagesQueue:LoaderMax = new LoaderMax({name:"images"});
imagesQueue.append( new ImageLoader(...) );
...append more...

var logosQueue:LoaderMax = new LoaderMax({name:"logos"});
logosQueue.append( new ImageLoader(...) );
...append more....

var mainQueue:LoaderMax = new LoaderMax({name:"main", maxConnections:1});
mainQueue.append(imagesQueue);
mainQueue.append(logosQueue);

mainQueue.load();

 

That'll load all the images and then the logos. Does that answer your question?

[ukla]

Perfect.

 

Thanks!