今回は、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 角形の上に指を動かすとジェスチャーイベントが発生すると思います。
コメントする