Skip to main content
Z
Zaffer
Inspiring
February 27, 2022
Answered

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

  • February 27, 2022
  • 1 reply
  • 892 views

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

 

This topic has been closed for replies.
Correct answer JoãoCésar17023019

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

1 reply

JoãoCésar17023019
Community Expert
JoãoCésar17023019Community ExpertCorrect answer
Community Expert
February 28, 2022

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

    Z
    ZafferAuthor
    Inspiring
    March 1, 2022

    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ésar17023019
    Community Expert
    JoãoCésar17023019Community Expert
    Community Expert
    March 1, 2022

    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

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