Handling function names and MC attributes in a loop

[Helen Fickling]

I am having problems adding event listeners and associated functions in a loop that adds images to a series of MCs.

The population of the MCs, from XML data, with images and positioning them on the canvas is working well. However, when I come to add event listeners to each of the MCs to allow for mouse action stops working.  I suspect it is something wrong with the syntax of the function name as realise that I need to make all the function names different.  I simply thought I could apend a standard function name with the loop value to make them different.

I cannot seem to make the MC scaling work either.  Need to do this as pictures will be larger than the MC  although same proportion.

Here is my code:

//Parse data after XML has loaded

function imagedataF1(e) {
parser = new DOMParser();
var xml = parser.parseFromString(e.target.response, "text/xml");

	myImagesID_array = xml.getElementsByTagName("imagedata");

var imagesNum = myImagesID_array.length;

//Loop to add images to MCs and alter scale and position and apend event listeners
	
	for (var i = 0; i<imagesNum; i++)
{
  var myImageID = i;
	
imageInstance = myImagesID_array[myImageID].getElementsByTagName("imageid")[0].childNodes[0].nodeValue;
smallURL = myImagesID_array[myImageID].getElementsByTagName("small_url")[0].childNodes[0].nodeValue;
	
// Create new image

var p = new createjs.Bitmap(smallURL);

// Make image fit MC - NOT WORKING

p.scaleX = that.myImage.getBounds().width/p.getBounds().width;
p.scaleY = that.myImage.getBounds().height/p.getBounds().height;

//Add image to MC
	
that[imageInstance].addChild(p);

// position MC on stage
	
that[imageInstance].x = myImagesID_array[myImageID].getElementsByTagName("xpos")[0].childNodes[0].nodeValue;
that[imageInstance].y = myImagesID_array[myImageID].getElementsByTagName("ypos")[0].childNodes[0].nodeValue;

//Add mouseover to alter alpha - NOT WORKING

that[imageInstance].addEventListener("mouseover", myImageID+i );
	function myImageID+i(){
	
	that[imageInstance].alpha = 0.5;
	
	
}

//Add mouseout to restore alpha - NOT WORKING

that[imageInstance].addEventListener("mouseout", myImageID+i);
	function myImageID+i(){
	
	that[imageInstance].alpha = 1;
	
// Add mouse click event handler

}

}

Tried various different syntax to no avail.

Any help appreciated.

[JoãoCésar]

Hi.

By taking a quick look, I can make note of three things:

- In your case, use anonymous functions to make things easier;

- Use the currentTarget property.

Example:

that[imageInstance].addEventListener("mouseover", function(e){ e.currentTarget.alpha = 0.5; });
that[imageInstance].addEventListener("mouseout", function(e){ e.currentTarget.alpha = 0.5; });

- function myImageID + i(){}; is not a valid syntax. If you really need dynamic references, use bracket notation. E.g.: this["yourMethodPrefix" + i].

Please review these points and let us know the result.

Regards,

JC

[Helen Fickling]

Many thanks Joao.  

Anonymous functions and the currentTarget property was just what I needed. Works as expected.  I can see benefit over dynamic references.

I am still having problems resizing the images as they load and scaling to fit MCs before adding them to MCs .

This is the code I am using -  however, it stops loop working.

for (var i = 0; i<imagesNum; i++)
{
  var myImageID = i;
	
imageInstance = myImagesID_array[myImageID].getElementsByTagName("imageid")[0].childNodes[0].nodeValue;
smallURL = myImagesID_array[myImageID].getElementsByTagName("small_url")[0].childNodes[0].nodeValue;
	
	
var p = new createjs.Bitmap(smallURL);

// THIS IS WHERE I RE_SCALE IMAGES - NOT WORKING

p.scaleX = that[imageInstance].getBounds().width/p.getBounds().width;
p.scaleY = that[imageInstance].getBounds().height/p.getBounds().height;

	
that[imageInstance].addChild(p);

On steep learning curve so really appreciate your help.  

Thank you

Andrew