多點觸控與手勢輸入 (Multitouch and Gestures)

在Adobe AIR 多點觸控輸入, 可以簡單使用TransformGestureEvent, 在iOS 及Android 平台能有效操作. 作者製作一個照片瀏覽App 範例, 由Starling 圖像引擎處理照片顯示, 以TweenLite 處理放大和旋轉等動作, 展示以下四種手勢控制:

• 縮放手勢 - TransformGestureEvent.GESTURE_ZOOM

  放大照片

  >>

• 旋轉手勢 - TransformGestureEvent.GESTURE_ROTATE

  旋轉照片

  >>

• 平移手勢 - TransformGestureEvent.GESTURE_PAN

  平移改變照片透明度

  >>

• 揮動手勢 - TransformGestureEvent.GESTURE_SWIPE

  向上推, 將照片模糊

  >>

照片瀏覽App 範例, 由三部分構成:

在介面層面: (MXML)

• 初次化Starling 圖像引擎, 然後加入手勢事件:
  

  // <----- set Multitouch mode
  Multitouch.inputMode = MultitouchInputMode.GESTURE;
  
  // <----- add listener
  this.stage.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoomHandler);
  this.stage.addEventListener(TransformGestureEvent.GESTURE_ROTATE, onRotateHandler);
  this.stage.addEventListener(TransformGestureEvent.GESTURE_PAN, onPanHandler);
  this.stage.addEventListener(TransformGestureEvent.GESTURE_SWIPE, onSwipeHandler);
  

• 收集手勢事件, 呼叫MyGame 處理:

private function onZoomHandler(e:TransformGestureEvent):void{
  _myPhoto.zoom(e.scaleX, e.scaleY);
}
private function onRotateHandler(e:TransformGestureEvent):void{
  _myPhoto.rotate(e.rotation/45);
}
private function onPanHandler(e:TransformGestureEvent):void{
  _myPhoto.transparent(e.offsetX/100);
}
private function onSwipeHandler(e:TransformGestureEvent):void{
  if(e.offsetY<0 && e.offsetX==0)
    _myPhoto.filter();
}

在MyGame 層面: (Starling 的關聯物件)

• 初次化Starling 圖像引擎後, 產生Photo 物件:
  

  // <----- create Photo
  _photo = new Photo();
  _photo.x = this.stage.stageWidth/2;
  _photo.y = this.stage.stageHeight/2;
  this.addChild(_photo);
  
  // <----- the first reset
  reset();
  

• 收到介面呼叫, 利用TweenLite 改變Photo 的屬性狀態, 產生動作效果:
  

  public function zoom(scaleX:Number, scaleY:Number):void{
    _photo.tScaleX *= scaleX;
    _photo.tScaleY *= scaleY;
    TweenLite.to(_photo, 0.2, {scaleX:_photo.tScaleX, scaleY:_photo.tScaleY});
  }
  public function rotate(rotation:Number):void{
    _photo.tRotation = (_photo.tRotation+rotation)%(Math.PI*2);
    TweenLite.to(_photo, 0.2, {rotation:_photo.tRotation});
  }
  public function transparent(alpha:Number):void{
    _photo.tAlpha = _photo.tAlpha+alpha;
    if(_photo.tAlpha>1) _photo.tAlpha = 1;
    if(_photo.tAlpha<0) _photo.tAlpha = 0;
    TweenLite.to(_photo, 0.2, {alpha:_photo.tAlpha});
  }
  public function filter():void{
    _photo.filter(!_photo.isBlur());
  }
  

在Photo 物件層面: (Starling 產生的照片實體)

• 被初次化時, 準備一張正常照片和一張模糊照片:
  

  // <----- add image
  _image1 = Image.fromBitmap(new _baseClass());
  _image1.x = -_image1.width/2;
  _image1.y = -_image1.height/2;
  _image1.smoothing = TextureSmoothing.TRILINEAR;
  _image1.visible = true;
  addChild(_image1);
  
  // <----- add blur image
  var bitmap:Bitmap = (new _baseClass()) as Bitmap;
  bitmap.bitmapData.applyFilter(bitmap.bitmapData, bitmap.bitmapData.rect, new Point(), new BlurFilter(20, 20, 3));
  _image2 = Image.fromBitmap(bitmap);
  _image2.x = -_image2.width/2;
  _image2.y = -_image2.height/2;
  _image2.smoothing = TextureSmoothing.TRILINEAR;
  _image2.visible = false;
  addChild(_image2);
  

• 處理MyGame 呼叫的模糊功能, 以visible 屬性來控制是否顯示:
  

  public function filter(blurFlag:Boolean):void{
    _image1.visible = !blurFlag;
    _image2.visible = blurFlag;
  }
  public function isBlur():Boolean{
    return _image2.visible;
  }
  

手勢輸入在電話或平版電腦, 控制效率十分明顯, 手指在屏幕上劃一劃, 可以改變很多屬性, 對比傳統的滾動條(Scroll Bar) 更為方便.

大家可以 [下載] 範例試試看.

參考資料: http://www.adobe.com/devnet/flash/articles/multitouch_gestures.html