How to find the name of a movieclip

[paul_james123]

Hi All,

I'm new to Animate CC and I'm using it to build an HTML5<canvas> end product. (So, I think I'm looking for code that works with EasleJS).

I want to find the name of the movie clip clicked on by the user. Here's the relevant part of my main timeline script:

var stage = this;

stage.MovieClipInstance.addEventListener("click", findNameOfMovieclipClickedOn.bind(this)); //event listener

function findNameOfMovieclipClickedOn () {

document.getElementById("testOutput").innerHTML = "you clicked on:: "+ theName;

}

"this.name" just returns "null"

Also:

• Is there another forum where I could ask questions specific to using Animate CC for HTML5 <canvas> projects...or is this the best place for that?
• As I build this project, should I just be looking for syntax/code that pertains to EasleJS?
  
  

Thanks much!

[Colin Holgate]

MovieClips don't have a name property in CreateJS. You can work around that by giving it a name property. Like:

alert(this.box.name); //shows 'null'

alert(this["box"].name); //shows 'null'

this["box"].name = "box";

alert(this["box"].name);  //now shows 'box'

alert(this.box.name);  //now shows 'box'

After that your listeners should be able to get the name property you set.

[paul_james123]

Thanks Colin,

I'm now able to name the MovieClipInstance using:

stage.MovieClipInstance.name = "myInstanceName";

...and then I can see that assigned name by doing:

document.getElementById("testOutput").innerHTML = "InstanceName: "+ stage.MovieClipInstance.name ;

but I want to get that name from within the function where I process the click (if I don't know which instance was clicked on). But maybe I'm not going about this correctly. Here's my intent:

I have 12 buttons that will be clicked on. Each button will show a different dashboard when it's clicked on.

I was thinking that, Instead of creating 11 different functions to show the dashboard associated with each button, I'd just make one function and, inside that function, determine which button was clicked on and find the correct dashboard to show.

Am I going about this the wrong way?

Thanks

[Colin Holgate · Accepted solution]

The click comes with an event. If you trap the event you can find out what was clicked. Like:

this.b1.name = "b1";

this.b2.name = "b2";

this.b1.addEventListener("click", wasclicked);

this.b2.addEventListener("click", wasclicked);

function wasclicked(e) {

  alert(e.currentTarget.name);

}

[Colin Holgate]

BTW, in my example I had two movieclips on stage where I had used Properties to set the instance names to b1 and b2.

[paul_james123]

That's exactly what I need.

Thanks much, Colin!

[ClayUUID]

First, your click handler code is completely wrong. Canvas mode draws everything on a single HTML canvas element. It does not create child HTML elements. You should just be referencing this in the event handler.

Second, Re: HTML Canvas instance names - Good tricks to getting them?

[paul_james123]

Thanks ClayUUID,

you wrote:

First, your click handler code is completely wrong.

hmm. I don't understand. The event listener..

var stage = this;

stage.MovieClipInstance.addEventListener("click", findNameOfMovieclipClickedOn.bind(this)); //event listener

..seems to work because it calls the findNameOfMovieclipClickedOn function. I can see the test output text sent to the browser by that function.

[ClayUUID]

paul_james123  wrote

Thanks ClayUUID,

you wrote:

First, your click handler code is completely wrong.

hmm. I don't understand. The event listener..

I said the click handler, not the event listener. The "document.getElementById("testOutput").innerHTML" stuff, that is all completely inapplicable to Canvas objects.

[paul_james123]

ClayUUID wrote:

I said the click handler, not the event listener. The "document.getElementById("testOutput").innerHTML" stuff, that is all completely inapplicable to Canvas objects.

Ok. Thanks. That's just for testing purposes. It outputs text (the name of the movie clip) to the html wrapper that contains the canvas.