Skip to main content
Inclusive Web Access
Inspiring
August 30, 2017
Answered

In Animate html5 canvas how do I add key press actions to buttons?

  • August 30, 2017
  • 1 reply
  • 6368 views

EDIT [Discussion locked by moderator]

I have a movie clip that acts as a nav menu. I want it to show when the menu button is clicked but also when the "m" key is pressed. I also want to hide it with the same method. This method will also need to be applied to other clips and the main timeline (using different keyboard keys, no repeats).

To be clear this is in Animate html5 canvas. It was so easy and straightforward in Flash AS2.

Thank you!

cld@cldesign.co

This topic has been closed for replies.
Correct answer Colin Holgate

Any other Adobe professionals wish to actually answer my last question instead of patronize me? I would really appreciate it.

I'd continue to happily use Flash except that the player will be discontinued in 2 years. If I seem cranky it's because the whole thing smacks of the oxymoron "military intelligence". And I am clearly not happy about it…


It's 3 1/4 years, but no harm in being ready!

To explain ClayUUID's code:

window.addEventListener("keydown", keyPressed);

function keyPressed(evt) {

    var k = evt.key.toLowerCase();

    alert(k);

}

That script could go into frame 1 of your timeline, then whenever the user presses a key that function will be called.

'k' is a variable, it could be any non-reserved word at all, but being k makes you think of 'key'. A longer, easier to understand version could be:

var theKey = evt.key.toLowerCase();

The point of the toLowerCase() is to halve the amount of checking you will need to do. In your application you wouldn't do the alert() at all, instead you would check the key and if it's M or m you would hide or show your menu dialog layer.

So, you would end up with something like this:

var menuShowing = false;

var self = this;

this.menuBtn.addEventListener("click",toggleMenu);

window.addEventListener("keydown", keyPressed);

function keyPressed(evt) {

    var theKey = evt.key.toLowerCase();

    if(theKey=="m"){

        toggleMenu();

   }

}

function toggleMenu(){

  menuShowing = !menuShowing

  self.menuMC.visible = menuShowing;

}

The keyPressed function could check for other things too, like:

function keyPressed(evt) {

    var theKey = evt.key.toLowerCase();

    if(theKey=="m"){

        toggleMenu();

   }

    if(theKey=="?"){

        toggleHelp();

   }

}

If you end up with a lot of keys to check you could think about using a case statement instead.

I just typed all that in here, but hopefully it would work, or at least give you an idea on how to solve your original problem.

1 reply

Legend
August 30, 2017

window.addEventListener("keydown", keyPressed);

function keyPressed(evt) {

    var k = evt.key.toLowerCase();

    alert(k);

}

Inclusive Web Access
Inspiring
August 30, 2017

Thank you. Does the alert(k) refer to the "k" key on the keyboard? If not how do I indicate which key? Do I just put "gotoAndPlay(frame # or label); on the line after "alert(k)"?

Legend
August 30, 2017

So... no programming experience at all then, I take it?