how to put an event listener on a movie clip from the library -- HTML5

[Zaffer]

Hi,

I am trying to instantiate a movie clip from the library and then add a "click" event listener to it.  So far, I can get the clip out of the library and position it on the stage, but when I try to add an event listener to it, I can't get it working.  I tried calling another function using the library name of the clip as a parameter, but that didn't work.  The alert message just says, [MovieClip (name=null)]. Here's my code; any help will be appreciated.

Zaffer

let starFrontLg = new lib.starFrontLg();
var pickedFlower_mc;

this.blue_btn.addEventListener("click", getStarFrontLg.bind(this));

function getStarFrontLg()
{
	this.addChild(starFrontLg);
	starFrontLg.x = 200;
	starFrontLg.y = 200;
	pickFlower(starFrontLg);
}
function pickFlower(pickedFlower_mc){
	alert(pickedFlower_mc); //alert says [MovieClip (name=null)]
	
}

pickedFlower_mc.addEventListener("click", clickSomeFlower);

function clickSomeFlower(e)
{
	currentClickedFlower = e.currentTarget;
	alert(currentClickedFlower);
}

[JoãoCésar · Accepted solution]

Hi.

Try this:

let currentClickedFlower;

function getStarFrontLg()
{
	const starFlower = new lib.starFrontLg();
	
	this.addChild(starFlower);
	starFlower.x = 200;
	starFlower.y = 200;
	starFlower.addEventListener("click", clickSomeFlower);
	pickFlower(starFlower);
}

function clickSomeFlower(e)
{
	currentClickedFlower = e.currentTarget;
	console.log(currentClickedFlower);
}

function pickFlower(flower)
{
	console.log(flower);
}

this.blue_btn.addEventListener("click", getStarFrontLg.bind(this));

Regards,

JC

[Zaffer]

Thanks so much João.  This is just what I was looking for and it works beautifully.  I was trying something like this but I couldn't get the syntax right.  Also, I kept getting thrown by the message [MovieClip (name=null)] which I took to mean my code wasn't working.  I thought the name of the clip had to somehow be present.  Your code taught me a lot!  Thanks.

By the way, apparently you can't use the command "console.log" in Animate.  You would think this would go to the Output panel, but it doesn't.  You have to use the command "alert" and the message appears in the browser.  I wish I could use the Output panel.  Is there a way to route messages there?  Thanks again.

Zaffer

[JoãoCésar]

Awesome!

Glad to help.

The alert method is more suitable to display primitive values like numbers and strings.

You can use console.log, but you have to use the browser's console to see the result.

Regards,

JC