1 Reply Latest reply on May 28, 2011 2:30 PM by Shongrunden

    Touch events conundrum/problem

    pauland Level 4

      I'm having a problem with touch events on the IOS platform with Flash CS5.5. I don't have an android device to try and see if it exists and I don't think FB4.5 supports IOS yet. Any Flex users out there seen the problem below? I have included my flash code - it's easily adabtable to Flex if you want to give it a whirl. I would expect Flex users to also potentially see this issue ultimately.

       

      Paul

       

      I've been using Flash CS5.5 targeting the IOS platform (iPad).

      I have been writing a small application that relies on things being  dragged around - can't really say much more right now.

      I need to know when dragging starts, so on the thing that's being  dragged I add a listener for TouchEvent.TOUCH_BEGIN.

      I need to know when it's being moved, so the widget also has a listener  for TouchEvent.TOUCH_MOVE.

      And finally, I need to know when dragging stops, so the widget listens  for TouchEvent.TOUCH_END.

      Now mostly, everything goes OK, I get:

      TOUCH_BEGIN, followed by one or more TOUCH_MOVE, and finally a  TOUCH_END. Happiness.

      I  have noticed that sometimes if I drag too fast and/or gently do a   swipe motion lifting my finger gently, the TOUCH_END doesn't seem to   happen, so the app doesn't know that the user has stopped dragging. For   the app, this is a problem because the user is allowed to position the   widget roughly and on TOUCH_END it should snap into place.

      Anyone else seen this?

      I can imagine a workaround using a timer to catch missing TOUCH_END  events, but it's a bit of a kludge.

      Paul

       

      Test  case: I have created a very simple app with a symbol instance "square"  which is simply a MovieClip containing a box shape and also on the stage  I have a text field "countText". Dragging the square around gently  means the numbers show multiple moves and matching begins and ends.  Start dragging quickly and gently lifting the finger then the begin  events then outnumber the end ones.

       

      On frame 1 I have the following code:

       

      stop();
      import flash.ui.*;
      import flash.events.TouchEvent;

       

      Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
      square.addEventListener(TouchEvent.TOUCH_BEGIN, onTouchEvent);
      square.addEventListener(TouchEvent.TOUCH_MOVE, onTouchEvent);
      square.addEventListener(TouchEvent.TOUCH_END, onTouchEvent);
      var beginCount:uint=0;
      var moveCount:uint=0;
      var endCount:uint=0;

       

      function onTouchEvent(event:TouchEvent):void{
          switch (event.type){
              case TouchEvent.TOUCH_BEGIN:
                          beginCount++;
                          square.startTouchDrag(event.touchPointID);
                          break;
              case TouchEvent.TOUCH_MOVE:
                          moveCount++;
                          break;
              case TouchEvent.TOUCH_END:
                          endCount++;
                          square.stopTouchDrag(event.touchPointID);
                          break;
          }
          countText.text = "begin: "+beginCount+" move: "+moveCount+" end: "+endCount;
      }

        • 1. Re: Touch events conundrum/problem
          Shongrunden Adobe Employee

          It looks like you are listening for touch end on the square object, but you might need to listen to something larger in case that object isn't under your finger when you lift it.

           

          There is also an iOS bug where touch end isn't fired if you drag off of the screen near the top of the application.

           

          This is the application I used that seems to work for me:

           

          package

          {

              import flash.display.Sprite;

              import flash.display.StageAlign;

              import flash.display.StageScaleMode;

              import flash.events.Event;

              import flash.events.MouseEvent;

              import flash.events.TouchEvent;

              import flash.text.TextField;

              import flash.text.TextFieldAutoSize;

              import flash.text.TextFormat;

              import flash.ui.*;

           

              public class ForForumsActionScript extends Sprite

              {

                  private var touchOutput:TextField;

                  private var mouseOutput:TextField;

           

                  private var target:Sprite;

           

                  public function ForForumsActionScript()

                  {

                      super();

           

                      // support autoOrients

                      stage.align = StageAlign.TOP_LEFT;

                      stage.scaleMode = StageScaleMode.NO_SCALE;

           

                      Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;

           

                      target = new Sprite();

                      target.graphics.beginFill(0xe3e3e3);

                      target.graphics.drawRect(0, 0, 1100, 1100);

                      target.graphics.endFill();

           

                      addEventListener(TouchEvent.TOUCH_BEGIN, onTouchEvent);

                      addEventListener(TouchEvent.TOUCH_MOVE, onTouchEvent);

                      addEventListener(TouchEvent.TOUCH_END, onTouchEvent);

           

                      addEventListener(MouseEvent.MOUSE_DOWN, onMouseEvent);

                      addEventListener(MouseEvent.MOUSE_MOVE, onMouseEvent);

                      addEventListener(MouseEvent.MOUSE_UP, onMouseEvent);

                      target.addEventListener(Event.MOUSE_LEAVE, onMouseEvent);

           

                      addChild(target);

           

                      // setup the touch output

                      touchOutput = new TextField();

                      touchOutput.y = 40;

                      touchOutput.selectable = false;

                      touchOutput.autoSize = TextFieldAutoSize.LEFT;

                      touchOutput.text = "Touch";

                      addChild(touchOutput);

           

                      // setup the mouse output

                      mouseOutput = new TextField();

                      mouseOutput.y = 40;

                      mouseOutput.x = 100;

                      mouseOutput.selectable = false;

                      mouseOutput.autoSize = TextFieldAutoSize.LEFT;

                      mouseOutput.text = "Mouse";

                      addChild(mouseOutput);

                  }

           

                  private function onTouchEvent(event:Event):void

                  {

                      // truncate if too much text

                      if (touchOutput.length > 700)

                          touchOutput.text = '';

           

                      touchOutput.text = event.type + "\n" + touchOutput.text;

                  }

           

                  private function onMouseEvent(event:Event):void

                  {

                      // truncate if too much text

                      if (mouseOutput.length > 700)

                          mouseOutput.text = '';

           

                      mouseOutput.text = event.type + "\n" + mouseOutput.text;

                  }

              }

          }