Highlighted

Handling function names and MC attributes in a loop

New Here ,
May 20, 2020

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.

 

TOPICS
ActionScript, How to

Views

599

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Handling function names and MC attributes in a loop

New Here ,
May 20, 2020

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.

 

TOPICS
ActionScript, How to

Views

600

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 20, 2020 0
Adobe Community Professional ,
May 20, 2020

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 20, 2020 0
New Here ,
May 21, 2020

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

 

 

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 21, 2020 0