Copy link to clipboard
Copied
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
}
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
}
Copy link to clipboard
Copied
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
}
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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
}
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.)
Copy link to clipboard
Copied
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 ❤️
Copy link to clipboard
Copied
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.