A bit of background for my current issue: I've been using Adobe Animate to generate HTML5 canvas and create my front-end canvas elements: labels, text fields, and MovieClip objects as well. These are acting as my multipurpose objects. Reason being is that if I use traditional buttons any pop up dialog gets drawn behind my buttons. I've tried a number of ways to get around this issue but in the end I ended up replacing my buttons objects with MovieClip objects and that solved the layering issue I was having.
Now onto my current issue: I still need some of my MovieClip objects to act as buttons. I created a class in my project file and called it BasicButton. Its got some core functionalities that my MovieClip objects will need in order for any object to act like a button.
class BasicButton {
constructor(obj){
this.obj = obj;
}
}
function onMouseHover() {
console.log('Hovering over' + this.obj);
}
function onMouseDown() {
console.log('MouseDown on' + this.obj);
}
In my main .html file I managed to get access to my MovieClip item which is named FakeButton_1 and is of type MovieClip.
<html>
..head
..body
<script .. create.js />
<script src="./BasicButton.js" />
<script>
funtion onLoad(){
extractRoot('canvas').FakeButton_1.text = "Hello World"; //testing I can change the text of this object and it works!
//TODO: now make FakeButton_1 extend or make it of type BasicButton
}
</script>
</html>
My question is how, then, can I say FakeButton_1 extends BasicButton? Ideally I would have to pass it FakeButton_1 object into BasicButton constructor so then it knows which object it is manipulating.
I also started looking into this article but I cant seem to find a way to get BasicButton to acknowledge FakeButton_1.
Any help would be greatly appreciated.