5 Replies Latest reply on Jun 7, 2010 10:46 AM by Flex harUI

    Moving an Textarea via Keyboard Event

    noobStar

      Hello everyone,

       

      would be great if you could help me with this one.

      Shouldn't be so difficult but I'm quite a noob.

       

      So, Goal is to learn to move an "object" (Image, Textarea, Button...., i think it's all the same in this relation) when I push a special character at my Keyboard. (If you have some general book/pdf/website-advice it would be great)

       

      So here we go, first stepps without Keyboard Control:

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                     xmlns:s="library://ns.adobe.com/flex/spark"
                     xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)">
         
          <fx:Script>
              <![CDATA[
                 
                  import mx.events.FlexEvent;
                 
                             
                  public function moveTextRight(e:Event):void
                  {   
                          text.x += 10;   
                  }
                 
                 
                 
                 
                  protected function application1_creationCompleteHandler(event:FlexEvent):void
                  {
                      var timer:Timer = new Timer(500000);
                      timer.delay = 100;
                      timer.repeatCount = 0;   
                      timer.addEventListener(TimerEvent.TIMER, moveTextRight);
                      timer.start()   
                  }
                 
                             
                 
              ]]>
          </fx:Script>
         
          <fx:Declarations>
             
          </fx:Declarations>
          <s:TextArea x="100" y="87" id="text" text="Just some text"/>
      </s:Application>

       

      So far, so simple.

      Problem is I want now that that the Text-Area only moves when i push an Character at my Keyboard.

      For example ESCAPE.

       

      I tried several options but nothing worked, I think i have some general problems understanding how it works.

      Here is some try, just to show, but as I sayed, it doesn't work.

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                     xmlns:s="library://ns.adobe.com/flex/spark"
                     xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)">

          <fx:Script>
              <![CDATA[
                  import ActionScripts.EineKlasse;
                  import mx.core.FlexGlobals;
                 
                  import mx.events.FlexEvent;
                 
                  public var bewegungsBoolean:int = 0;

                  public function moveTextRight(e:Event):void
                  {
                      //trace("test1");
                      if (bewegungsBoolean == 1)
                      {
                         
                      text.x += 10;
                      bewegungsBoolean = 0;
                    
                      }
                  }
                 
             
                 

                  protected function application1_creationCompleteHandler(event:FlexEvent):void
                  {
                      FlexGlobals.topLevelApplication.addEventListener(KeyboardEvent.KEY_DOWN,keyDownListener)
                     
                      var timer:Timer = new Timer(500000);
                      timer.delay = 100;
                      timer.repeatCount = 0;
                     
                      timer.addEventListener(TimerEvent.TIMER, moveTextRight);
                      timer.start()
                     
                  }
                 
                  protected function keyDownListener(e:KeyboardEvent):void
                  {
                      trace("Test4");
                      if(e.keyCode == Keyboard.ESCAPE)
                      {
                      bewegungsBoolean = 1;
                      }
                     
                  }
                 

              ]]>
          </fx:Script>

          <fx:Declarations>
          </fx:Declarations>
          <s:TextArea x="100" y="87" id="text" text="Ich bin ein Text"/>
      </s:Application>

       

      It would  be great if you could help me out or give me some general advice.

       

      Thanks

       

      Stephan

        • 1. Re: Moving an Textarea via Keyboard Event
          BhaskerChari Level 4

          Hi Stephan,

           

          Check out the sample code below:

           

          <?xml version="1.0"?>
          <!-- events/MultipleHandlerParametersInline.mxml -->
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
            <mx:Script><![CDATA[
               public function runMove(dir:String, e:Event):void {
                  if (dir == "up") {
                     moveableButton.y = moveableButton.y - 5;
                  } else if (dir == "down") {
                     moveableButton.y = moveableButton.y + 5;
                  } else if (dir == "left") {
                     moveableButton.x = moveableButton.x - 5;
                  } else if (dir == "right") {
                     moveableButton.x = moveableButton.x + 5;
                  }
               }
            ]]></mx:Script>

           

            <mx:Canvas height="100%" width="100%">
               <mx:Button id="moveableButton"
                  label="{moveableButton.x.toString()},{moveableButton.y.toString()}"
                  x="75"
                  y="100"
                  width="80"
               />
            </mx:Canvas>

           

            <mx:VBox horizontalAlign="center">
               <mx:Button id="b1"
                  label="Up"
                  click='runMove("up",event);'
                  width="75"
               />
                  <mx:HBox horizontalAlign="center">
                     <mx:Button id="b2"
                      label="Left"
                      click='runMove("left",event);'
                      width="75"
                     />
                     <mx:Button id="b3"
                      label="Right"
                      click='runMove("right",event);'
                      width="75"
                     />
                  </mx:HBox>
               <mx:Button id="b4"
                  label="Down"
                  click='runMove("down",event);'
                  width="75"
               />
            </mx:VBox>

           

          </mx:Application>

           

          If this post answers your question or helps, please kindly mark it as such.


          Thanks,

          Bhasker Chari

          1 person found this helpful
          • 2. Re: Moving an Textarea via Keyboard Event
            noobStar Level 1

            Hello Basker Chari,

             

            thanks a lot !

             

            Meanwhile I have done my own Code, but your's is way better

             

            <?xml version="1.0" encoding="utf-8"?>
            <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                           xmlns:s="library://ns.adobe.com/flex/spark"
                           xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)" >
                <fx:Script>
                    <![CDATA[
                        import mx.events.FlexEvent;
                       
                       
                       
                        public function moveTextArea(e:KeyboardEvent):void
                        {
                            if(e.keyCode == Keyboard.RIGHT)
                            {
                            area1.x += 10;
                            }
                           
                            if(e.keyCode == Keyboard.LEFT)
                            {
                                area1.x -= 10;
                            }
                           
                            if(e.keyCode == Keyboard.UP)
                            {
                                area1.y -= 10;
                            }
                           
                            if(e.keyCode == Keyboard.DOWN)
                            {
                                area1.y += 10;
                            }
                        }

             

                        protected function application1_creationCompleteHandler(event:FlexEvent):void
                        {
                            area1.addEventListener(KeyboardEvent.KEY_DOWN, moveTextArea);
                           
                             var timer:Timer = new Timer(50);
                            timer.delay=100;
                            timer.repeatCount=0;
                            timer.addEventListener(TimerEvent.TIMER, timeListener);
                           
                            timer.start();
                           
                        }
                       
                        public function timeListener(e:TimerEvent):void
                        {
                           
                        }

             

                    ]]>
                </fx:Script>
               
                <fx:Declarations>
                    <!-- Platzieren Sie nichtvisuelle Elemente (z. B. Dienste, Wertobjekte) hier -->
                </fx:Declarations>
                <s:TextArea x="93" y="60" id="area1" text="Ich bin eine Text Area"/>
            </s:Application>

             

             

            Have a nice Day!

            • 3. Re: Moving an Textarea via Keyboard Event
              Flex harUI Adobe Employee

              Did you click in the TextArea before hitting the escape key?

              • 4. Re: Moving an Textarea via Keyboard Event
                noobStar Level 1

                Yes i did.

                 

                Surely it is not the best way to do all this but it works for the moment.

                 

                Problem ist, i can do the same with a button, but not with an image.

                And finally want to work with an image.

                 

                Edit: Oh sorry, i responded with my "newest" Code in mind, i don't know , i think i haven't touched it. Shame on me.

                • 5. Re: Moving an Textarea via Keyboard Event
                  Flex harUI Adobe Employee

                  Image doesn't get focus so keystrokes are not dispatched within the

                  Application.  Try listening via systemManager.stage.addEventListener