adding an event listener to a loaded image

[digisam]

Hi, first time posting after too many hours trying to find out what I am doing wrong.

 

I have an XMLlist that loops through my XML fine and loads the images and places them where I want them.

 

But I can not figure out how to add an event listener to the images that are loaded, the contentDisplay.

 

I can see in my displayList that the bitmaps are loaded into the contentDisplay and are given the names thumbnail0, thumbnail1 etc

 

instance23 [object MovieClip]

instance24 [object Sprite]

thumbnail0 [object ContentDisplay]

[object Bitmap]

instance28 [object icon_zoom]

[object Shape]

thumbnail1 [object ContentDisplay]

[object Bitmap]

instance33 [object icon_zoom]

[object Shape]

 

When i try to add an event listener I always get errors. The eventListener is added to the galleryIcons that are pulled from the library fine.

 

I try:

 

this["thumbnail" + i].addEventListener(MouseEvent.CLICK, openLightBox);

 

or

 

["thumbnail" + i].addEventListener(MouseEvent.CLICK, openLightBox);

 

or

 

thumbNailLoader.addEventListener(MouseEvent.CLICK, openLightBox);

 

After searching other forums suggested the first two would be the correct way of constructing the addListener, but there give me "1064 Invalid metadata"

 

It might be a way i am constructing my code, this is my first project in AS3 after many years working with AS2. I am forcing myself through the horrendous learning curve because I felt it is about time. And who knew how slack AS2 was at accepting errors, but as we know AS3 has none of it. Typically I can find an answer to my problems but their has me stumped, and i am really hoping it is going to be a face palm moment when i find out.

 

Is it something to do with me trying to add the listener before the image has loaded? When i try it in the imageLoaded function I get the same error.

 

Any help would be appreciated.

 

Many thanks

 

	var i:int = 0;
for each (var puImage:XML in puImageList) {
	trace("thumbNail", puImage.@thumbnail);

	var puThumbNailToLoad:String = puImage.@thumbnail;
	var puThumbNailW:Number = puImage.@tnWidth;
	var puThumbNailH:Number = puImage.@tnHeight;
	var puThumbNailX:Number = puImage.@tnX;
	var puThumbNailY:Number = puImage.@tnY;		
	trace("puThumbNailToLoad", ["thumbnail"+i])
	var thumbNailLoader:ImageLoader = new ImageLoader(puThumbNailToLoad, {name:"thumbnail"+i, x:puThumbNailX, y:puThumbNailY, container:puImagesHolder, smoothing:true, onComplete:imageLoaded});

	thumbNailLoader.load();
	//["thumbnail"+i]addEventListener(MouseEvent.CLICK, openLightBox);

	//ADD ICON BASED ON THE POSITIONS OF THE IMAGE JUST LOADED
	var galleryIcon:MovieClip =  new icon_zoom() as MovieClip; 
		//POSITION ICONS
	puImagesHolder.addChild(galleryIcon)
	galleryIcon.x = puThumbNailW;
	galleryIcon.y = puThumbNailY-13;

	galleryIcon.addEventListener(MouseEvent.CLICK, openLightBox);
	function imageLoaded(e:Event) {     



		this["thumbnail" + i].addEventListener(MouseEvent.CLICK, openLightBox);


	}
	i++;

}

[Carl]

Hi.

 

First off I know how difficult the AS2 > AS3 migration can be. It takes a few weeks of pulling your hair out, but after you get a few concepts down, you will never look back.

I was once a die-hard AS2 fan who scoffed at all the as3 folks bragging about their "bloated and unnecessarily" strict code.

 

There is nothing better than what you are doing right now as far as learning goes. Forcing yourself to build your own project in AS3 will really pay off for you.

 

Now over to LoaderMax (another great decision), what you need to do is assign your eventListener to the content of the ImageLoader that loads your image. You can do this a few ways:

 

var thumbNailLoader:ImageLoader = new ImageLoader(puThumbNailToLoad, {name:"thumbnail"+i, x:puThumbNailX, y:puThumbNailY, container:puImagesHolder, smoothing:true, onComplete:imageLoaded});

thumbNailLoader.content.addEventListener(MouseEvent.CLICK, openLightBox)

 

A big hassle when converting from AS2 to AS3 is understanding that the "name" property of a displayObject in AS3 isn't really the same as an "instance name" in AS2. In the context of LoaderMax the name of a Loader is just handy way for you to identify a particular ImageLoader, SWFLoader, XMLLoader etc within the scope of all the various loaders that LoaderMax is managing for you. The most common ways of using the name property are

 

1: LoaderMax.getLoader("thumbnail1");

2: LoaderMax.getContent("thumbnail2");

 

In your situation, although the first code I provided above will work fine, you could also do:

 

LoaderMax.getContent("thumbnail" + i).addEventListener(MouseEvent.CLICK, openLightBox);

 

---

 

It seems like you are well on your way. I can't recommend enough reading the LoaderMax, ImageLoader and XMLLoader docs as often as you need. In addition the following tutorials will really hammer in some of the core concepts (events, event targets, content, container etc)

 

http://www.snorkl.tv/2011/07/loadermax- ... exhibit-a/

http://www.snorkl.tv/2011/08/loading-im ... le-images/

http://www.snorkl.tv/2011/08/loading-im ... xmlloader/

 

Have fun.

 

c

[digisam]

Thank you.

 

That worked a treat.

 

Yes it is struggle grasping the concepts of AS3. I do find it hard to let go of naming everything, but then if i don't name them I lose track of items very quickly.

 

I think I will continue with naming them in this first transition, with what I know now compared to when I started I would have approached the projects very differently.

 

Again, thank you very much.

 

Sam