Jump to content
Search Community

Custom variables in image Loader

Zync test
Moderator Tag

Recommended Posts

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? :P

 

 

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();

}

Link to comment
Share on other sites

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? :)

Link to comment
Share on other sites

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)

		}

	}

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...