6 Replies Latest reply on Jun 22, 2010 4:48 PM by u10angel

    detecting keypress or keydown

    jayzrogers Level 1

      Funnily enough, the first project I want to try in Catalyst is the behaviour of some keyboard commands we're introducing into our web app.  But I don't see a way to detect any kind of interaction besides mouse clicks/hovers.



        • 1. Re: detecting keypress or keydown

          Hi jay!


             You have to select the button and in the interaction's panel click the button Add interaction and you will see



          • 2. Re: detecting keypress or keydown
            jayzrogers Level 1

            Sorry Gabiango, I'm looking for a way to detect keyboard presses, not buttons.

            • 3. Re: detecting keypress or keydown
              Bear Travis Adobe Employee

              Catalyst does not currently support keyboard interactions. I would suggest using buttons to prototype ("Hitting this button is equivalent to pressing 'e' "), and then bringing your project over to Flex Builder to add the ActionScript logic for keyboard events.


              For more documentation on keyboard event handlers, you can check out the Flex documentation here:




              • 4. Re: detecting keypress or keydown

                hi bear travis,


                can you give more detail on how to add such code. i'm not familiar with flex.


                i guess have identified the button code..


                protected function tour_button_clickHandler():void








                <s:Button click="tour_button_clickHandler()" enabled.tour="false" enabled.tour_finder_popup="false" label="tour" skinClass="components.tourButton" d:userLabel="tour_button" x="23" y="177"/>



                is there a way to extend the button code to have it still clickable and receive a keyboard command ?

                i guess i'm not the only one trying to achieve simply left / right keyboard control to jump from state to state....




                • 5. Re: detecting keypress or keydown
                  Bear Travis Adobe Employee

                  Hello Chris,


                  You would set up your application to listen for keydown events as described in this post:



                  Inside the keyDown function, you would test to see if the key you are interested in was pressed. If it was, then you could call the "button_clickHandler" function.


                  In all, the beginning of your application might look like this:


                  <?xml version="1.0" encoding="utf-8"?>

                  <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"






                                 height="600" preloaderChromeColor="#FFFFFF"

                                 width="800" xmlns:mx="library://ns.adobe.com/flex/mx"



                          protected function button_clickHandler():void





                          public function init():void {

                              stage.addEventListener(KeyboardEvent.KEY_DOWN, reportKeyDown);



                          public function reportKeyDown(event:KeyboardEvent):void {

                              var keyPressed:String = String.fromCharCode(event.charCode);

                              if (keyPressed == 'j') button_clickHandler();





                  Good luck!


                  • 6. Re: detecting keypress or keydown
                    u10angel Level 1

                    thanx, i'm getting more into...probably need a counter variable to jump from state to state....