今回は、Flash Player 10.1 のサポートするジェスチャーの種類と使い方について、簡単に説明してみます。
ジェスチャーイベントの種類
Flash Player 10.1 が提供するジェスチャーイベントクラスは 3 種類存在します。基本になるのは GestureEvent クラスです。MouseEvent クラスとは近からず遠からずという感じのクラスです。
GestureEvent クラスのサブクラスとして、更に PressAndTapGestureEvent と TransformGestureEvent の 2 つのクラスがあります。
flash.events.GestureEvent flash.events.PressAndTapGestureEvent flash.events.TransformGestureEvent
これらのうち TransformGestureEvent だけは 4 種類のイベントがあるため （他は 1 つだけ）、利用できるジェスチャーイベントは全部で 6 種類になります。ただし、OS によって利用できるイベントが異なります （6 種類全てが利用できる OS は今のところ無い）。
以下は各イベントの簡単な説明です。
- GestureEvent.GESTURE_TWO_FINGER_TAP: （Windows7 のみ）
操作： 2つの指を同時にタップ
用途例： ダブルクリックの代わり - PressAndTapGestureEvent.GESTURE_PRESS_AND_TAP: （Windows7 のみ）
操作： 1つ目の指が触れた状態で2つめの指をタップ
用途例： メニューを開いてからアイテムを選択 - TransformGestureEvent.GESTURE_SWIPE:（Mac OS X, iPhone OS のみ）
操作： 複数の指が触れた状態で全ての指を平行に動かす
注： Mac OS X では 4 本指のスワイプが利用できるが、Flash ランタイムは 3 本指まで
用途例： アイテムの削除、画面の切り替え - TransformGestureEvent.GESTURE_PAN:
操作： 指を触れたまま移動させる（例えば左から右）
用途例： スクロール、ドラッグ - TransformGestureEvent.GESTURE_ROTATE:
操作： オブジェクト上で2つの指を円を書くように動かす
用途例： オブジェクトを回転 - TransformGestureEvent.GESTURE_ZOOM:
操作： 2つの指が触れた状態で指をそれぞれ遠ざかる （または近づく） 方向に移動
用途例： 表示を拡大 （縮小）
Windows 7 では、複数のジェスチャーを行う場合、いったん指 （またはポインティングデバイス） を離す必要があります。例えば、回転してから拡大する場合は、ROTATE のジェスチャーの後、全ての指を離してから改めて ZOOM のジェスチャーを行います。
さて、全てのプラットフォームに共通して利用できるのは、4 ～ 6 の 3 つだけです。ちょっと少ない気もしますが、今のスマートフォンでは殆どの操作が PAN (指をいずれかの方向に動かす)、ROTATE （2 本の指で円を描く）、ZOOM （2 本の指を離す／近づける） の 3 つに加えて TAP （これは Mouse イベントとして扱える） で足りているようにも思えるので、とりあえずは十分なのかもしれません。Macbook ユーザー的にはもっと種類が欲しいというところかもしれませんが。
ジェスチャーイベントを利用する場合 （Multitouch.inputMode = MultitouchInputMode.GESTURE の場合） には MouseEvent も発生します。なので、独自のジェスチャーイベントを MouseEvent を基に実装することは可能です。しかし、MouseEvent では複数のタッチポイント （指） を識別することができないため、マルチタッチのジェスチャーイベントを実装するためには使えません。マルチタッチのジェスチャーイベントを自由に実装したいときは TouchEvent を使うことになります。（Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT）
簡単なサンプル
最後に GestureEvent のごく簡単なサンプルです。
Multitouch.inputMode = MultitouchInputMode.GESTURE;
var mySprite = new Sprite();
mySprite.graphics.beginFill(0xFF6600);
mySprite.graphics.drawRect(0, 0, 80, 80);
addChild(mySprite);
mySprite.addEventListener(TransformGestureEvent.GESTURE_PAN, onGesturePan);
trace("ジェスチャーイベントのサポート:", Multitouch.supportsGestureEvents);
trace("利用できるジェスチャーイベント:", Multitouch.supportedGestures);
function onGesturePan(evt:TransformGestureEvent):void {
trace("Gesture Pan イベント発生");
}
1 行目で inputMode を設定しています。デフォルトが GESTURE のため、わざわざ設定し直さなくても良いはずですが、念のため。
また、途中で、ジェスチャーイベントがサポートされるか、それから、どのジェスチャーがサポートされるか、を出力しています。あとは見ての通り、ごく普通のイベント処理です。
タッチパネルが付いている Windows 7 または Mac OS X （OS X は AIR 限定） 上であれば、4 角形の上に指を動かすとジェスチャーイベントが発生すると思います。
コメントする