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

[Inclusive Web Access]

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

[ClayUUID]

window.addEventListener("keydown", keyPressed);

function keyPressed(evt) {

    var k = evt.key.toLowerCase();

    alert(k);

}

[Inclusive Web Access]

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)"?

[ClayUUID]

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

[Inclusive Web Access]

Just enough to create access.visittheusa.com with Flash as2 which integrates accessibility for 4 disability types with no need for any assistive technology thereby saving costs and treating people like people when they go online.

No developer thought of this.

Don't need your condescending BS… Never mind.

[Inclusive Web Access]

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…

[Colin Holgate · Accepted solution]

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.

[Inclusive Web Access]

First of all, my rant above notwithstanding, I am capable of gratitude and appreciation. Thank you, Colin, for answering my question.

This is what I have. It is not working in html5 canvas. The URL is contactalt

window.addEventListener("keydown", keyPressed);

function keyPressed(evt) {

    var theKey = evt.key.toLowerCase();

    if(theKey=="m"){

  this.gotoAndPlay("show");

  }

}

My knowledge of programming is less than basic which is why I liked as2 better. Anyway thanks again!

[Colin Holgate]

In my version I used the variable 'self' to solve that problem, and so that either the key press or the mouse click would be able to toggle the menu. If you don't use that approach would would need to bind(this):

window.addEventListener("keydown", keyPressed.bind(this));

  function keyPressed(evt) {

     var theKey = evt.key.toLowerCase();

     if(theKey=="m"){

  this.gotoAndPlay("show");

  }

  }

In whatever browser you're testing on, look at the developer tools. In there is Console, and it will be showing you errors that are happening, and you can click on the error line to go to the code to see what's wrong.

[Inclusive Web Access]

That worked! Awesome job, Colin! Thanks for your patience with me and your detailed assistance.

Will the Console just show me the error or will it also show me the solution?

[Colin Holgate]

In the Console error section it will show the error, with some text to say what it thinks was wrong. You can also include lines in your code if you want to see that it got that far. For example, instead of the alert(k) from earlier you could have:

console.log(theKey);

and then in the console you can see what letters were pressed.

[ClayUUID]

Also best of luck with your anger management.