ジェスチャイベント処理

Flash Player 10.1 以降、Adobe AIR 2 以降

ジェスチャは基本タッチイベントと同じ方法で処理します。TransformGestureEvent クラス、GestureEvent クラスおよび PressAndTapGestureEvent クラスのイベントタイプ定数で定義された一連のジェスチャイベントを監視できます。

ジェスチャタッチイベントを処理するには：

  1. flash.ui.Multitouch.inputMode プロパティを MultitouchInputMode.GESTURE に設定し、アプリケーションでジェスチャ入力を処理するように設定します。

  2. InteractiveObject クラスからプロパティを継承しているクラス（Sprite や TextField など）のインスタンスに、イベントリスナーをアタッチします。

  3. 処理対象のジェスチャイベントのタイプを指定します。

  4. イベントに応答して処理を行うには、イベントハンドラー関数を呼び出します。

例えば、次のコードは、タッチスクリーン上で mySprite に描画された四角形をスワイプしたときにメッセージを表示します。

Multitouch.inputMode=MultitouchInputMode.GESTURE; 
 
var mySprite:Sprite = new Sprite(); 
var myTextField:TextField = new TextField(); 
 
mySprite.graphics.beginFill(0x336699); 
mySprite.graphics.drawRect(0,0,40,40); 
addChild(mySprite); 
 
mySprite.addEventListener(TransformGestureEvent.GESTURE_SWIPE, swipehandler); 
 
function swipehandler(evt:TransformGestureEvent): void { 
myTextField.text = "I've been swiped"; 
myTextField.y = 50; 
addChild(myTextField); 
}

2 本指タップのイベントも同様に処理されますが、その場合は GestureEvent クラスを使用します。

Multitouch.inputMode=MultitouchInputMode.GESTURE; 
 
var mySprite:Sprite = new Sprite(); 
var myTextField:TextField = new TextField(); 
 
mySprite.graphics.beginFill(0x336699); 
mySprite.graphics.drawRect(0,0,40,40); 
addChild(mySprite); 
 
mySprite.addEventListener(GestureEvent.    GESTURE_TWO_FINGER_TAP, taphandler); 
 
function taphandler(evt:GestureEvent): void { 
myTextField.text = "I've been two-finger tapped"; 
myTextField.y = 50; 
addChild(myTextField); 
}

また、押しながらタップのイベントも同様に処理されますが、その場合は PressAndTapGestureEvent クラスを使用します。

Multitouch.inputMode=MultitouchInputMode.GESTURE; 
 
var mySprite:Sprite = new Sprite(); 
var myTextField:TextField = new TextField(); 
 
mySprite.graphics.beginFill(0x336699); 
mySprite.graphics.drawRect(0,0,40,40); 
addChild(mySprite); 
 
mySprite.addEventListener(PressAndTapGestureEvent.        GESTURE_PRESS_AND_TAP, taphandler); 
 
function taphandler(evt:PressAndTapGestureEvent): void { 
myTextField.text = "I've been press-and-tapped"; 
myTextField.y = 50; 
addChild(myTextField); 
}
注意： すべての GestureEvent、TransformGestureEvent および PressAndTapGestureEvent イベントタイプがすべてのランタイム環境でサポートされているわけではありません。例えば、一部のタッチ対応デバイスは、複数指のスワイプを検出できません。このようなデバイスでは、InteractiveObject の gestureSwipe イベントはサポートされません。アプリケーションが動作することを保証するには、特定のイベントのサポートを確認します。詳しくは、トラブルシューティングを参照してください。

ジェスチャイベントのプロパティ

ジェスチャイベントのイベントプロパティの範囲は、基本タッチイベントよりも狭くなっています。このプロパティには、イベントハンドラー関数の Event オブジェクトからアクセスできます。

例えば、次のコードは、ユーザーが mySprite 上で回転ジェスチャを実行したときに、このオブジェクトを回転させます。テキストフィールドには、前回のジェスチャからの回転量（度数）が表示されます（このコードをテストするときは、オブジェクトを何度か回転させて、値が変化するのを確認してください）。

Multitouch.inputMode=MultitouchInputMode.GESTURE; 
 
var mySprite:Sprite = new Sprite(); 
var mySpriteCon:Sprite = new Sprite(); 
var myTextField:TextField = new TextField(); 
myTextField.y = 50; 
addChild(myTextField); 
 
mySprite.graphics.beginFill(0x336699); 
mySprite.graphics.drawRect(-20,-20,40,40); 
mySpriteCon.addChild(mySprite); 
mySprite.x = 20; 
mySprite.y = 20; 
addChild(mySpriteCon); 
 
mySprite.addEventListener(TransformGestureEvent.GESTURE_ROTATE, rothandler); 
 
function rothandler(evt:TransformGestureEvent): void { 
evt.target.parent.rotationZ += evt.target.rotation; 
myTextField.text = evt.target.parent.rotation.toString(); 
}
注意： すべての TransformGestureEvent プロパティがすべてのランタイム環境でサポートされているわけではありません。例えば、一部のタッチ対応デバイスは、画面上の回転ジェスチャを検出できません。このようなデバイスでは、TransformGestureEvent.rotation プロパティはサポートされません。アプリケーションが動作することを保証するには、特定のプロパティのサポートを確認します。詳しくは、トラブルシューティングを参照してください。

ジェスチャのフェーズ

また、ジェスチャイベントは全フェーズを通して追跡できるので、ジェスチャの発生に従ってプロパティを追跡できます。例えば、スワイプジェスチャでオブジェクトを移動したときに、X 座標を追跡することができます。これらの値を使用して、スワイプの終了後に移動経路上のすべての点を通る線を描画してみましょう。また、パンジェスチャを使用して画面上で表示オブジェクトをドラッグ中に、表示オブジェクトを視覚的に変化させてみます。パンジェスチャが終了したら、オブジェクトを再度変化させます。
Multitouch.inputMode = MultitouchInputMode.GESTURE; 
var mySprite = new Sprite(); 
mySprite.addEventListener(TransformGestureEvent.GESTURE_PAN , onPan); 
mySprite.graphics.beginFill(0x336699); 
mySprite.graphics.drawRect(0, 0, 40, 40); 
var myTextField = new TextField(); 
myTextField.y = 200; 
addChild(mySprite); 
addChild(myTextField); 
 
function onPan(evt:TransformGestureEvent):void { 
 
    evt.target.localX++; 
 
if (evt.phase==GesturePhase.BEGIN) { 
    myTextField.text = "Begin"; 
    evt.target.scaleX *= 1.5; 
    evt.target.scaleY *= 1.5; 
} 
if (evt.phase==GesturePhase.UPDATE) { 
    myTextField.text = "Update"; 
    evt.target.alpha = 0.5; 
} 
if (evt.phase==GesturePhase.END) { 
    myTextField.text = "End"; 
    evt.target.width = 40; 
    evt.target.height = 40; 
    evt.target.alpha = 1; 
} 
}
注意： 更新フェーズの間隔は、ランタイム環境によって異なります。オペレーティングシステムとハードウェアの組み合わせによっては、更新が全く中継されない場合があります。

単純なジェスチャイベントのジェスチャフェーズ「all」

一部のジェスチャイベントオブジェクトでは、ジェスチャイベントの個々のフェーズを追跡しません。その代わりに、イベントオブジェクトの phase プロパティに「all」という値を設定します。スワイプや 2 本指タップなどの単純なジェスチャでは、イベントを複数フェーズで追跡しません。gestureSwipe イベントまたは gestureTwoFingerTap イベントを監視している InteractiveObject のイベントオブジェクトの phase プロパティは、イベントが一度送出されると必ず all に設定されます。

Multitouch.inputMode = MultitouchInputMode.GESTURE; 
var mySprite = new Sprite(); 
mySprite.addEventListener(TransformGestureEvent.GESTURE_SWIPE, onSwipe); 
mySprite.addEventListener(GestureEvent.GESTURE_TWO_FINGER_TAP, onTwoTap); 
mySprite.graphics.beginFill(0x336699); 
mySprite.graphics.drawRect(0, 0, 40, 40); 
var myTextField = new TextField(); 
myTextField.y = 200; 
addChild(mySprite); 
addChild(myTextField); 
 
function onSwipe(swipeEvt:TransformGestureEvent):void { 
    myTextField.text = swipeEvt.phase // Output is "all" 
} 
function onTwoTap(tapEvt:GestureEvent):void { 
    myTextField.text = tapEvt.phase // Output is "all" 
}