Beispiel: Gestures und Multitouch im Flash Player 10.1 und AIR 2

Mit Flash Player 10.1 und Adobe AIR 2 wurden die neuen Multitouch-APIs eingeführt. Einsatzgebiete sind neben mobilen Geräte (z.B. für Flash-Apps auf dem iPhone) auch Rechner mit Windows 7 oder Mac OS X, die über ein geeignetes Eingabegerät verfügen (z.B. das Trackpad am Macbook).

Im Folgenden eine kurze Einführung in die neuen Fähigkeiten, die in der Klasse flash.ui.Multitouch angesiedelt sind. Mit einem Macbook und dem Trackpack lässt sich dies problemlos auch ohne Mobilgerät ausprobieren.

Multitouch und Gestures

Zum Verständnis ist es wichtig, kurz auf den Unterschied zwischen Multitouch und Gestures (Gesten) einzugehen.

Multitouch ist — wie der Name schon sagt — wenn mehrere Berührungen gleichzeitig erfasst werden können.

The term multi-touch refers to the ability not only to detect physical touches and movements on a screen, but to detect and track multiple touches and movements simultaneously.

Bei mehreren solcher Touchevents, die in einer bestimmten Abfolge auftreten, spricht man dann von einer Geste. Dies kann z.B. das Scrollen mit 3 Fingern (=Swipe) oder die Rotierbewegung mit Daumen und Zeigefinger sein (=Rotate).

Gestures are the synthesis of multiple touch events into a single event. Examples of gestures include „pinching“ an image to scale it, or „swiping“ to delete something from a list.

Werden Multitouch und Gesten unterstützt?

Grundsätzlich ist es sinnvoll, zuerst einmal zu überprüfen, ob und in welcher Form Multitouch und Gesten von der Abspielplattform unterstützt werden. Dies geschieht mit den Eigenschaften Multitouch.supportsTouchEvents und Multitouch.supportsGestureEvents.

Am Macbook (siehe Screenshot) werden Gesten unterstützt, TouchEvents jedoch nicht. Deshalb werde ich im weiteren Verlauf näher auf die Gesten eingehen.

Auflistung der unterstützte Gesten

Wie man dem nächsten Screenshot entnehmen kann, unterstützt mein Rechner im Detail folgende Gesten:

• TransformGestureEvent.GESTURE_PAN (Scrollen mit zwei Fingern)
• TransformGestureEvent.GESTURE_ROTATE (Drehen/Rotieren)
• TransformGestureEvent.GESTURE_SWIPE (Scrollen mit drei Fingern)
• TransformGestureEvent.GESTURE_ZOOM (kleiner/größer ziehen)

Herausfinden lässt sich dies über die Eigenschaft Multitouch.supportedGestures, die ein Vector-Object mit Strings der unterstützten Gesten liefert.

[xml]



= Multitouch.supportedGestures; supGesturesTxt.text = „Supported Gestures: “ + supGestures.toString(); } ]]>




[/xml]

Multitouch.inputMode

Über Multitouch.inputMode = MultitouchInputMode.GESTURE wird festgelegt, dass Gesten ausgewertet werden sollen.

Hier eine Beschreibung der verschiedenen InputModes:

MultitouchInputMode.GESTURE: Use this mode if you want multi-touch events synthesized into gesture events. Simple events (like taps) are interpreted as mouse events.

MultitouchInputMode.TOUCH_POINT: Use this mode if you are interested only in touch events and no mouse or gesture events. You can use this mode to synthesize your own gestures if you want to support gestures that are not supported by the runtime, or if you need to support both multi-touch and gestures.

MultitouchInputMode.NONE: Use this mode if you want to handle all touches as mouse events. This is appropriate for content that you want to run on touch-enabled and non-touch-enabled devices without having to branch your code.

Beispiel: Gesten für Zoom, Rotation und Swipe

Im folgenden Screencast (ohne Ton) sieht man die Gesten in Aktion. Es handelt sich um das untenstehende AIR-Beispiel, dass direkt über das Trackpad am Macbook gesteuert wurde.

Ein Bild wird geladen und kann über die Zoom-Geste vergrößert und verkleinert werden. Die Rotationsgeste dreht das Bild. Swipe („3-Finger-Scrollen”) wechselt zum nächsten Bild.

Man registriert einfach Eventlistener für das TransformGestureEvent an einem beliebigen Objekt, das von InteractiveObject erbt (z.B. Stage, Sprite, etc.). Das TransformGestureEvent liefert einige Informationen über die Geste.

[xml]



2) counter = 0; } ]]>



[/xml]

Link: Multi-touch and gesture support on the Flash Platform
Link: TransformGestureEvent
Link: Multitouch

[ad]