2012年5月3日 星期四

多點觸控與手勢輸入 (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

2 則留言:

匿名 提到...

請問下再下來的資料夾和檔案要放到FLASH的哪裡來執行?不太會flash不好意思> <

Turtler 提到...

關於Multitouch and Gestures 這個範例,是需要使用Adobe Flash Builder 4.5 或以上開啟。在File -> Import Flash Builder Project -> 選擇下載回來的.zip 檔,便可以完成設定,然後按Run -> Run 運行便可。

** 這個範例不能使用Adobe Flash 來開啟,Adobe Flash Builder(灰色Icon) 與Adobe Flash(紅色Icon) 是兩個不同的軟件。