Das Thema Gestures und Multitouch im Flash Player 10.1 und AIR 2 hatte ich bereits vorgestellt. Heute möchte ich im Speziellen auf die „Pan”-Geste eingehen, also das Scrollen mit zwei Fingern (TransformGestureEvent.GESTURE_PAN). Landläufig könnte man es auch als „Wischen” mit 2 Fingern bezeichnen (manchmal auch Swipe, obwohl Adobe darunter die 3-Fingergeste versteht).

Die folgenden Beispielklassen zeigen, wie es möglich, zu erkennen, ob der Nutzer nach rechts, links, oben oder unten gewischt hat.

Dazu habe ich mir eine kleine Hilfsklasse gebaut. Sie wird als Event Handler benutzt und erfasst die Geste. Eine Geste hat 3 Phasen: GesturePhase.BEGIN, GesturePhase.UPDATE und GesturePhase.END. Die Update-Phase wird mehrmals ausgelöst, so ca. 15-20x bei einem „Wisch”.

Zählt man nun, wie oft der Offset zwischen den Events in x- und y-Richtung ungleich 0 ist, erkennt man, in welche Richtung die Finger sich bewegt haben. So bedeutet zum Beispiel offsetX:-1.234 und offsetY:0 eine horizontale Bewegung. Sie wird als „1x horizontal” gespeichert.

Letztendlich kann dann nach Beenden der Geste (GesturePhase.END) ausgewertet werden. Es kommt z.B. 20x horizontal und 3x vertikal als Ergebnis für ein Wischen, woraus man schließen kann, dass der Nutzer horizontal gemeint hat (und die 3x vertikal lediglich eine Ungenauigkeit sind).

Summiert man sich die ganzen Offsets, kann man am Vorzeichen der Summe nun die Richtung erkennen (bei horizontal ob links/rechts, bei vertikal ob oben/unten).

Demo-Klasse

Hier die Demo-Anwendung.

PLAIN TEXT
Actionscript:

  1. span style="color: #ff0000;">"on left""on right""on up""on down";
  2.         }
  3.     }
  4. }

Klasse zum Erkennen der Pan-Richtung

PLAIN TEXT
Actionscript:

  1. span style="color: #808080; font-style: italic;">/**
  2.      * Detects the direction of the Pan gesture and dispatches a PanGestureDirectEvent
  3.      *
  4.      */// count horizontal and vertical gestures
  5. // sum up the offsets of the pan event
  6. /**
  7.          * Use this function as event handler for the 
  8.          * TransformGestureEvent of your object
  9.          *
  10.          * @param evt
  11.          *
  12.          *//**
  13.          * On every update event store the value and count the used direction
  14.          * @param offsetX
  15.          * @param offsetY
  16.          *
  17.          *//**
  18.          * Detect pan direction and dispatch event
  19.          *
  20.          */""// horizontal
  21. // vertical
  22. /**
  23.          * Reset the variables
  24.          *
  25.          */

Event

PLAIN TEXT
Actionscript:

  1. span style="color: #ff0000;">"panGestureUp""panGestureDown""panGestureRight""panGestureLeft"