Skip to main content
paul_james123
paul_james123
Inspiring
March 25, 2017
Answered

How to find the name of a movieclip

  • March 25, 2017
  • 2 replies
  • 2698 views

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!

    This topic has been closed for replies.
    Correct answer Colin Holgate

    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);

    }

    2 replies

    C
    ClayUUID
    Legend
    March 26, 2017

    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
    paul_james123Author
    Inspiring
    March 26, 2017

    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.

    C
    ClayUUID
    Legend
    March 26, 2017

    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.

    Colin Holgate
    Colin Holgate
    Inspiring
    March 25, 2017

    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
    paul_james123Author
    Inspiring
    March 26, 2017

    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
    Colin HolgateCorrect answer
    Inspiring
    March 26, 2017

    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);

    }

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices