Can't play multiple Movie Clips on same frame

[dyle99]

Hello,

I'm in the process of creating an interactive story using HTML 5 Canvas and have encountered an issue when using multiple Movie Clips on the same frame. The gist of my project is each scene is on one frame and all the animation is embedded into Movie Clips. The issue occurs when trying to add interactivity to the movie clips, the user clicks something and that symbol does an animation. At the moment only the last function will work no matter which function it is.

Here's my code;

this.stop(); //stops at this frame

this.midWave.addEventListener("click", fl_MouseClickHandler_2.bind(this));

function fl_MouseClickHandler_2()

{

this.Fish2.play();

}

this.Ship1.addEventListener("click", fl_MouseClickHandler_2.bind(this));

function fl_MouseClickHandler_2()

{

this.Ship1.play();

}

this.frontWave.addEventListener("click", fl_MouseClickHandler_2.bind(this));

function fl_MouseClickHandler_2()

{

this.Fish1.play();

}

Thanks in advance for reading!

Message was edited by: João César de Lima | Reason: font size too small

[JoãoCésar · Accepted solution]

Hi.

This is happening because you're redeclaring the fl_MouseClickHandler_2 function over and over again.

function fl_MouseClickHandler_2()
{
    this.Fish2.play();
}
function fl_MouseClickHandler_2()
{
    this.Ship1.play();
}
function fl_MouseClickHandler_2()
{
    this.Fish1.play();
}

Assign different names as you want different codes to run.

Regards,

JC

[ClayUUID]

Or, better, just put all the movieclip actions in a single event handler.