0

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.

user2529011
  • 705
  • 3
  • 11
  • 21
  • I have no knowledge about most of this, but when using traditional buttons, did you try to set the `z-index` CSS property? – trincot Jun 26 '22 at 13:07
  • The problem seems to be just that you haven't added the `onMouseHover` and `onMouseDown` functions to the class definition. – MikeM Jun 26 '22 at 14:06
  • @MikeM yep you’re right. I since moved the methods inside the class definition. But how do I use my FakeButton_1 to use BasicButton.js as an extension class or make it inherit it? – user2529011 Jun 26 '22 at 17:42
  • It depends what you mean exactly and what you are trying to achieve. Do you want to add the methods of the BasicButton class to the FakeButton_1 instance and potentially overwrite its own properties? What does `console.dir(FakeButton_1.constructor.prototype)` show? – MikeM Jun 26 '22 at 18:09
  • @MikeM correct. I want FakeButton_1 to take on the methods of BasicButton class. I’m just not sure how I can achieve it. I’d imagine there’s some way to extend Basic Button class so that FakeButton can inherit the behavior of BasicButton. – user2529011 Jun 26 '22 at 18:20
  • Well, if you used `Object.defineProperties(FakeButton_1, Object.getOwnPropertyDescriptors(BasicButton.prototype));` that would add the BasicButton methods to FakeButton_1 but it is unlikely to achieve what you want. – MikeM Jun 26 '22 at 18:41
  • @MikeM I see. so in order for that work I would have to first instantiate BasicButton, pass in FakeButton_1 in its constructor and then somehow turn it into an object that uses BasicButton functionalities. – user2529011 Jun 26 '22 at 19:15
  • Why is your current solution of wrapping FakeButton_1 using `new BasicButton(FakeButton_1)` and making FakeButton_1 a property of a BasicButton instance not working for you? If you explain what is wrong with that then it might help to clarify what you are trying to achieve. – MikeM Jun 26 '22 at 19:22

0 Answers0