Geekly Articles each Day
📜 ⬆️ ⬇️

Support for multi-touch and gestures in the Flash platform

This article describes the new multi-touch API available in Flash Player 10.1 beta and Adobe AIR 2 beta. Multi-touch is becoming available on more and more platforms, and users want to be able to interact with devices using touch. The Flash platform will provide developers with an easy and effective way to do this.

To run the examples in this article, you need Adobe Flash Player 10.1 beta.
Archive with examples: http://download.macromedia.com/pub/developer/flash/multitouch_gesture_examples.zip (ZIP, 44 KB)

Definition of multi-touch and gestures


The term multi-touch implies the ability to define not only physical touches to the screen and movements on it, but also multiple touches and movements at the same time. A touch event is similar to a mouse event, but it differs in that you can work with many such events at the same time, as well as in that the touch event does not support mouse-specific concepts, such as hovering.

Gestures (gestures) - is the union of several multi-touch events into one. For example, “compressing” the image to change its scale or “strikethrough” to remove something from the list. Some platforms perfectly support the concept of gestures, reducing the amount of work to define a gesture and react to it, and some require the developer to manually capture touch events and combine them into a gesture. Flash platform automatically recognizes the most common gestures on various platforms, as well as provides developers with the ability to create their own gestures through the API.
')
Despite the fact that multi-touch technology has been known for many years, only the popularity of the Apple iPhone has led to the mass distribution of this technology. The advantages of interacting with the device directly, and not through the buttons or through the stylus became so obvious that this technology began to spread to the desktop. Windows 7 supports out-of-the-box multi-touch, HP started selling TouchSmart computers since 2007, Microsoft released Microsoft Surface, which is focused on gestures and touches in 2008. Apple also introduced its multi-touch trackpad in MacBook Air, and then included this technology in its entire line of laptops. The new Apple Magic Mouse also has limited gesture support.
Touch, multi-touch, gestures and tactile interaction (Haptic technology) becomes so noticeable that all new high-tech devices support at least one of these interaction technologies.

Multi-touch and gestures support


The Flash platform currently supports multi-touch and gestures in Flash Player 10.1 in the browser, in applications for the iPhone or iPod touch and in Adobe AIR 2. Support for multi-touch depends on the hardware capability and on the hardware. The following is a list of platforms that support multi-touch and gestures at the time of this writing (November 17, 2009):

Multi-touch

Gestures

The following is a list of supported gestures in various platforms.

Windows 7

Mac OS X 10.5.3 and later

iPhone and iPod touch

Windows Mobile 6.5

Multitouch class


All work with multi-touch and gestures begins with the class Multitouch. It contains some of the properties required for writing applications that support multi-touch and gestures.

We define support for multi-touch and gestures.

Before using multi-touch and gestures, it's a good idea to determine if it is even possible to use them. To do this, there are properties Multitouch.supportsGestureEvents and Multitouch.supportsTouchEvents, which allow you to determine whether the device running your application supports the capabilities the application needs.
If you are writing an application specifically for the iPhone, then there is no need to use these properties. But if you are writing an application designed to run in different places, these two properties you simply need.

Installation input mode

Setting the Multitouch.inputMode property is necessary in order for the runtime to know which types of events you need. This property can be one of the following values:

Note: The Multitouch.inputMode property can be used to get the current interaction mode.

Definition of supported gestures

When using the MultitouchInputMode.GESTURE mode, it is nice to check which gestures are available. This can be done using the Multitouch.supportedGestures property. Property contains Vector lines. Vector elements are equivalent to the event types described by the GestureEvent, PressAndTapGestureEvent and TransformGestureEvent classes.

Determination of the maximum number of touch points

If you use the MultitouchInputMode.TOUCH_POINT mode, then be careful with the number of simultaneously processed touches. You can determine the maximum number of touches available for processing by using the Multitouch.maxTouchPoints property. Attempting to simultaneously use a number of points more than the device supports may lead to unexpected results (for example, all active points will disappear).

Event logging

Both touch events and gestures are generated by the InteractiveObject class. This means that you can use them with any objects whose classes inherit from InteractiveObject. For example with objects of classes SimpleButton, TextField, Loader, Sprite, Stage.

Handling multi-touch events


The following events can be registered for an instance of the InteractiveObject class or for any of its descendants:


Touch event properties

The touch event has the same properties as the mouse event, but also has some new properties:

New touch class methods Sprite

There are also some new methods in the Sprite class related to touches:


Usage example

Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
this .stage.addEventListener(TouchEvent.TOUCH_BEGIN, onTouchBegin);
this .stage.addEventListener(TouchEvent.TOUCH_MOVE, onTouchMove);
this .stage.addEventListener(TouchEvent.TOUCH_END, onTouchEnd);

private function onTouchBegin(e:TouchEvent): void {
var dot:Sprite = this .getCircle();
dot.x = e.stageX;
dot.y = e.stageY;
this .stage.addChild(dot);
dot.startTouchDrag(e.touchPointID, true );
this .dots[e.touchPointID] = dot;
}

private function onTouchEnd(e:TouchEvent): void {
var dot:Sprite = this .dots[e.touchPointID];
this .stage.removeChild(dot);
}

* This source code was highlighted with Source Code Highlighter .


Gesture processing


There are the following types of gestures events: GestureEvent, PressAndTapGestureEvent and TransformGestureEvent.

List of types of such events:


Gesture event properties

Properties have a lot in common with the mouse event class. PressAndTapGestureEvent and TransformGestureEvent add some properties depending on the gesture:

PressAndTapGestureEvent:


TransformGestureEvent:

Usage example

Multitouch.inputMode = MultitouchInputMode.GESTURE;
elephant.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);
elephant.addEventListener(TransformGestureEvent.GESTURE_ROTATE, onRotate);

private function onZoom(e:TransformGestureEvent): void
{
var elephant:Sprite = e.target as Sprite;
elephant.scaleX *= e.scaleX;
elephant.scaleY *= e.scaleY;
}

private function onRotate(e:TransformGestureEvent): void
{
var elephant:Sprite = e.target as Sprite;
elephant.rotation += e.rotation;
}

* This source code was highlighted with Source Code Highlighter .

Source: https://habr.com/ru/post/81241/

More articles:


All Articles