Custom variables in image Loader

[Zync 0 Likes (Newbie)]

Hi ya,

 

Firstly, gotta say loving Loadermax, but trying to wrap my head around this contentDisplay class. In the old days I could freely attach variables to my movieclips so that I could specify an index for example for a button thumbnail, and when i clicked on that thumbnail I could get that index and do stuff with it, like grab text from XML using the index as a position. Is this possible with the ImageLoader when adding it to the stage or before it? Don't suppose I could just add an index value to the vars huh?

 

 

private function xmlLoaded(e:LoaderEvent):void

{

var xLoad:XML = e.target.content;

xImgList = new XMLList(xLoad.img);

 

var thumbLoader:LoaderMax = new LoaderMax({name:"thumbLoader"});

thumbLoader.addEventListener(LoaderEvent.COMPLETE, thumbsLoaded);

 

for (var i:int = 0; i < xImgList.length(); i++)

{

trace(xImgList.@title)

thumbLoader.append(new ImageLoader("images/" + xImgList.@url,

new ImageLoaderVars().centerRegistration(true)

.name(xImgList.@name)

.width(100)

.height(100)

.smoothing(true)

.scaleMode("proportionalOutside")

.crop(true)

.container(thumbHolder)

.x((i%2)*100)

.y(int(i / 2) * 100)

.index(i)

));

}

 

thumbLoader.load();

}

[GreenSock 18,884 Likes (Superhero)]

I just updated LoaderMax to v1.72 to accommodate this request. All the vars data classes now have a "prop()" method that allows you to add arbitrary data to the vars object. So in your case, it would look like:

 

.prop("index", i)

 

I also added a "data" property to ContentDisplay and FlexContentDisplay where you can put arbitrary data if you want to.

 

Happy?

[Zync 0 Likes (Newbie)]

Oh so so so happy

[Zync 0 Likes (Newbie)]

I think my brain just tripped and fell over inside my head but how do i access said property?

 

I've got:

 

var img:ContentDisplay = LoaderMax.getContent("p" + (i + 1));

 

but trace(img.index) or trace(img.data.index) both dont seem to work?

 

Is there a getter in the content display class to get the prop value based on the key?

 

	private function xmlLoaded(e:LoaderEvent):void 
	{
		var xLoad:XML = e.target.content;
		xImgList = new XMLList(xLoad.img);

		var thumbLoader:LoaderMax = new LoaderMax({name:"thumbLoader"});
		thumbLoader.addEventListener(LoaderEvent.COMPLETE, thumbsLoaded);

		for (var i:int = 0; i < xImgList.length(); i++) 
		{
			trace(i)

			var iLoad:ImageLoader = new ImageLoader("images/" + xImgList[i].@url,
			new ImageLoaderVars().centerRegistration(true)
			.name(xImgList[i].@name)
			.width(100)
			.height(100)
			.smoothing(true)
			.scaleMode("proportionalOutside")
			.crop(true)
			.container(thumbHolder)
			.x((i%2)*100)
			.y(int(i / 2) * 100)
			.prop("index", i)
			)


			thumbLoader.append(iLoad);
		}

		thumbLoader.load();
	}

	private function thumbsLoaded(e:LoaderEvent):void 
	{
		for (var i:int = 0; i < xImgList.length(); i++) 
		{
			trace("i: " + i);
			var img:ContentDisplay = LoaderMax.getContent("p" + (i + 1));
			img.addEventListener(MouseEvent.ROLL_OVER, thumbOver);
			img.addEventListener(MouseEvent.ROLL_OUT, thumbOut);
			img.addEventListener(MouseEvent.CLICK, thumbClick);
			trace(img.index)

		}

	}

[Zync 0 Likes (Newbie)]

Hey ya,

 

Sorry to keep bugging ya mate, but any dice on how to access those prop values from the contestDisplay object reference?

[Zync 0 Likes (Newbie)]

Sorry for the triple post but figured it out.. I think, in case anyone else wanted to know. If there's a better way please let me know but I think this works.

 

So what I did was assign properties to my LoaderMaxVars object like so (index, title and desc):

 

			var iLoad:ImageLoader = new ImageLoader("images/" + xImgList[i].@url,
			new ImageLoaderVars()
			.centerRegistration(true)
			.name(xImgList[i].@name)
			.width(100)
			.height(100)
			.container(thumbHolder)
			.x((i%2)*100)
			.y(int(i / 2) * 100)
			.prop("index", i)
			.prop("title", xImgList[i].@title)			
			.prop("desc", xImgList[i].@desc)
			)

 

Setup an Event Listener as per normal for the ContentDisplay object. And in the on click function I can access the vars by getting the ImageLoader object's vars?:

 

	private function thumbClick(e:MouseEvent):void 
	{
		var vars:Object = ImageLoader(e.currentTarget.loader).vars
		trace(vars.title)
	}

 

That seemed to do the trick

[GreenSock 18,884 Likes (Superhero)]

Yep, you got it. And just so you know, if you prefer, you could add that data directly to the ContentDisplay object's "data" property.

 

var iLoad:ImageLoader = new ImageLoader(...);
iLoad.content.data = {index:i, title:xImgList[i].@title, desc:xImgList[i].@desc};

 

Then in your click handler, it'd be as simple as:

 

function thumbClick(e:MouseEvent):void {
   trace("title: " + e.currentTarget.data.title);
}

 

But your solution was just dandy as well.

[Zync 0 Likes (Newbie)]

Oh thats awesome, cheers mate for including this in.