I want to create html canvas movie clip button

[aleksis63820686]

Hello

I created movie clip buttons with as3 and then converted to html canvas. I created buttons that worked perfectly in actionscript. But I can't get them to work in JavaScript. I'm using very simple code. Tell me what am I doing wrong?

/* Mouse Over Event

Mousing over the symbol instance executes a function in which you can add your own custom code.

Instructions:

1. Add your custom code on a new line after the line that says "// Start your custom code" below.

The code will execute when the symbol instance is moused over.

frequency is the number of the times event should be triggered.

*/

var frequency = 3;

stage.enableMouseOver(frequency);

this.btn1.addEventListener("mouseover", fl_MouseOverHandler_5);

function fl_MouseOverHandler_5()

{

  this.gotoAndPlay("over");// Start your custom code

  // This example code displays the words "Moused over" in the Output panel.

  alert("Moused over");

  // End your custom code

}

[kglad · Accepted solution]

html5/canvas loses scope (or context) in functions.  so you must explicitly define 'this' inside function bodies.

var frequency = 3;

stage.enableMouseOver(frequency);

this.btn1.addEventListener("mouseover", fl_MouseOverHandler_5.bind(this));

function fl_MouseOverHandler_5()

{

this.gotoAndPlay("over");// Start your custom code

// This example code displays the words "Moused over" in the Output panel.

alert("Moused over");

// End your custom code

}

[ClayUUID]

Well you don't have to use bind. You can also use the .target property of the MouseEvent object.

Either way he'll definitely want to set mouseChildren = false on the movieclip, or things will get weird.

[aleksis63820686]

Well I still can't get it to work...

What do you mean .target property of the MouseEvent object? (can you show me what you mean in code)

my code looks like this and all my movie clips are looping. Only thing that works is that I get message when I roll over.

mouseChildren = false

/* Mouse Over Event

Mousing over the symbol instance executes a function in which you can add your own custom code.

Instructions:

1. Add your custom code on a new line after the line that says "// Start your custom code" below.

The code will execute when the symbol instance is moused over.

frequency is the number of the times event should be triggered.

*/

var frequency = 3;

stage.enableMouseOver(frequency);

this.btn1.addEventListener("mouseover", fl_MouseOverHandler_2.bind(this));

function fl_MouseOverHandler_2()

{

  this.gotoAndPlay("over");// Start your custom code

  // This example code displays the words "Moused over" in the Output panel.

  alert("Moused over");

  // End your custom code

}

[kglad]

what do you mean by, "i still can't get it to work"?  if you don't wan't movieclips to loop, put a this.stop() in their last (or some) frame.

the only thing you put in code in an alert when you rollover btn1 and you stated that works.

[aleksis63820686]

Yeah sorry about that I had my stop commands still in ac3 because I had converted the file.

I still have one problem. How can I get touchable alpha chanel rectangle to my button so that the rollover function works also in transparent area inside rectangle and play symbol. Now only the black areas respond to rolling over. This worked perfectly in AC3 but not in html5 canvas.

[kglad]

use an alpha of 1 with the same color as your background.

(p.s when using the adobe forums, please mark helpful/correct responses, if there are any.)

[aleksis63820686]

Okey so you can't really make completely transparent background? But I guess that's ok.

Ok thanks from the tip.

I'm super thankful for all your help ❤️

[ClayUUID]

aleksis63820686 wrote:

Yeah sorry about that I had my stop commands still in ac3 because I had converted the file.

This worked perfectly in AC3 but not in html5 canvas.

"AS3". AC3 is a Dolby Digital codec.