Wednesday, 1 August 2012

Multitouch API for Air Android

Android apps can handle multi-touch events such a finger gestures, finger presses and finger swipes. There are two main events for Multitouch API: touch and gesture. Firstly, touch events are dispatched when one or more fingers touch the screen. You can think of touch events as the same as mouse events, but for mobile applications instead. The available events include: touch_begin, touch_end, touch_move, touch_out, touch_over, touch_roll_out, touch_roll_over and touch_tap.

Here is an example of the touch event. I have used three different colour sprite to demonstrate the uses of the touch begin, end and move. Open up a new AIR for Android document and save the file with the name: ‘MultiTouch’. Then in the document class give the name: ‘MultiTouch’ and open an AS3 class file and enter the following code.

package  {
 
 import flash.display.MovieClip;
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.events.TouchEvent;
 import flash.ui.Multitouch;
 import flash.ui.MultitouchInputMode;
 
 public class MultiTouch extends MovieClip {
  
  private var s1,s2,s3:Sprite;
  
  public function MultiTouch () {
   
   //Creates three sprites
   s1 = drawRect(0xff0000, 197, 200);
   addChild(s1);
   
   s2 = drawRect(0x0000ff, 197, 358);
   addChild(s2);
   
   s3 = drawRect(0x00ff00, 197, 510);
   addChild(s3);
   
   //Firstly checks if multitouch is supported. Then sets the inputMode to MultitouchInputMode.TOUCH_POINT
   //which is used to detects touch events. The touch move and touch end events are added to the stage, and
   //the three sprites have the touch begin event added.
   if (Multitouch.supportsTouchEvents)
   {
    Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
    
    addEventListener(TouchEvent.TOUCH_MOVE, moveHandler);
    addEventListener(TouchEvent.TOUCH_END, endHandler);
    
    s1.addEventListener(TouchEvent.TOUCH_BEGIN, beginHandler);
    s2.addEventListener(TouchEvent.TOUCH_BEGIN, beginHandler);
    s3.addEventListener(TouchEvent.TOUCH_BEGIN, beginHandler);
   }
   
  }
  
  //This function detects when the sprites have been touched and moves
  //the sprite to the top of the display list. The startTouchDrag() method
  //starts the drag and drop. The touchPointID property is used to check
  //where sprite was touched.
  private function beginHandler(e:TouchEvent):void 
  {
   setChildIndex(e.target, numChildren - 1);
   e.target.startTouchDrag(e.touchPointID);
  }
  
  //This function set the alpha of the sprite to 1 when the touch is released. 
  //The stopTouchdrag() method is used to stop the dragging. It also get passed the
  //touchPointID property as an parameter. 
  private function endHandler(e:TouchEvent):void 
  {
   e.target.alpha = 1;
   e.target.stopTouchdrag(e.touchPointID);
  }
  
  //This function sets the alpha of sprite to 0.5 when the sprite is moving.
  private function moveHandler(e:TouchEvent):void 
  {
   e.target.alpha = 0.5;
  }
  
  //Helper function to create rectangle sprites. 
  private function drawRect(colour:uint, xpos:uint, ypos:uint, w:uint = 100, h:uint = 100):Sprite
  {
   var s:Sprite = new Sprite();
   s.graphics.beginFill(colour);
   s.graphics.drawRect(0, 0, w, h);
   s.graphics.endFill();
   s.x = xpos;
   s.y = ypos
   return s;
  }
 }
} 


Gesture events are dispatched when the fingers perform a combination of the touch events. For example, swiping, rotating and scaling. The gesture event normally occurs when more than one finger is on the screen. The gesture events include: gesture_pan, gesture_rotate, gesture_swipe, gesture_zoom, gesture_press_and_tap and gesture_two_finger_tap.

Here is an example of the gesture swipe. I have displayed a message for the direction of the swipe. Open up a new AIR for Android document and save the file with the name: ‘SwipeGesture’. Then in the document class give the name: ‘SwipeGesture’ and open an AS3 class file and enter the following code.
package  {
 
 import flash.display.MovieClip;
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.events.TransformGestureEvent;
 import flash.ui.Multitouch;
 import flash.ui.MultitouchInputMode;
 import flash.text.TextField;

 public class SwipeGesture extends MovieClip {
  
  private var tf:TextField;
  
  public function SwipeGesture() {
   
   //This adds a textfield to the centre of the screen.
   tf = new TextField();
   tf.x = stage.stageWidth / 2 - tf.width / 2;
   tf.y = stage.stageHeight / 2 - tf.height / 2; 
   tf.text = 'Have a swipe';
   addChild(tf);
   
   //Checks if multitouch is supported. 
   //Then sets the inputMode to MultitouchInputMode.GESTURE and adds
   //gesture swipe onto the stage.
   if (Multitouch.supportsTouchEvents)
   {
    Multitouch.inputMode = MultitouchInputMode.GESTURE;
    addEventListener(TransformGestureEvent.GESTURE_SWIPE, swipeHandler);
   }
  }
  
  //This function display a message depending on the direction of the swipe.
  private function swipeHandler(e:TransformGestureEvent):void
  {
   if(e.offsetX == 1){
    tf.text = 'Left swipe';
   }
   else if(e.offsetX == -1){
    tf.text = 'Right swipe';
   }
  }
 }
 
}

Notes, the touch event example uses the ‘Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;’ which listens for a single touch. Whereas the gesture event example uses the ‘Multitouch.inputMode = MultitouchInputMode.GESTURE;’ which listens for gestures/multitouch.

0 comments:

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP