Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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