Эта статья описывает новые multi-touch API, доступные в Flash Player 10.1 beta и Adobe AIR 2 beta. multi-touch становится доступным на все большем количестве платформ, и пользователи хотят иметь возможность взаимодействовать с устройствами с помощью прикоcновений. Flash платформа предоставит разработчикам простой и эффективный способ делать это.
Для запуска примеров из данной статьи требуется Adobe Flash Player 10.1 beta.
Архив с примерами: http://download.macromedia.com/pub/developer/flash/multitouch_gesture_examples.zip (ZIP, 44 KB)
Термин multi-touch подразумевает возможность определять не только физические прикосновения к экрану и движения по нему, но и множественные прикосновения и движения одновременно. Событие прикосновения сходно с мышиным, однако оно отличается тем, что вы можете работать с множеством таких событий одновременно, а так же тем, что событие прикосновения не поддерживает специфические для мышки концепты, например «наведение» (hovering).
Жесты(gestures) — это объединение нескольких multi-touch событий в одно. Например «сжимание» картинки для изменения ее масштаба или «зачеркивание» для удаления чего-либо из списка. Некоторые платформы прекрасно поддерживают концепцию жестов, уменьшая количество работы для определения жеста и реакции на него, а некоторые требуют от разработчика ручной захват событий прикосновения и объединение их в жест. Flash платформа автоматически распознает наиболее распространенные жесты на различных платформах, а так же предоставляет разработчикам возможность посредством API создавать свои собственные жесты.
Несмотря на то, что технология multi-touch известна на протяжении многих лет, только популярность Apple iPhone привела к массовому распространению этой технологии. Преимущества взаимодействия с устройством напрямую, а не через кнопки или посредством стилуса стали настолько очевидными, что данная технология начала распространятся и на десктоп. Windows 7 поддерживает multi-touch «из коробки», HP начали продавать TouchSmart computers начиная с 2007 года, Microsoft выпустили Microsoft Surface, ориентированный на жесты и прикосновения в 2008. Также Apple представили свой multi-touch трэкпад в MacBook Air, а затем включили эту технологию во всю свою линейку ноутбуков. Новая мышь Apple «Magic Mouse» так же имеет ограниченную поддержку жестов.
Прикосновения, multi-touch, жесты и тактильное взаимодействие (Haptic technology) становится настолько заметными, что все новые высокотехнологичные и устройства поддерживают хотя бы одну из этих технологий взаимодействия.
Flash платформа в данный момент поддерживает multi-touch и жесты в Flash Player 10.1 в браузере, в приложениях для iPhone или iPod touch и в Adobe AIR 2. Поддержка multi-touch зависит от возможности железа и от аппаратного обеспечения. Далее приводится список плафторм, поддерживающих multi-touch и жесты на момент написания данной статьи (17 ноября 2009):
Multi-touch
Жесты
Далее приводится список поддерживаемых жестов в различных платформах
Windows 7
Mac OS X 10.5.3 и более поздние
iPhone и iPod touch
Windows Mobile 6.5
Вся работа с multi-touch и жестами начинается с класса Multitouch. Он содержит некоторые свойства, необходимые для написания приложений, поддерживающих multi-touch и жесты.
Перед использованием multi-touch и жестов неплохо определить, возможно ли вообще их использование. Для этого есть свойства Multitouch.supportsGestureEvents и Multitouch.supportsTouchEvents, позволяющие определить, поддерживает ли устройство, на котором запущено ваше приложение, необходимые приложению возможности.
Если вы пишете приложение специально для iPhone, то нет необходимости использовать эти свойства. Но если же вы пишете приложение, предназначенное для запуска в различных местах, эти два свойства вам просто необходимы.
Установка свойства Multitouch.inputMode необходимо для того, что бы runtime знал, какие типы событий вам нужны. Это свойство может принимать одно из следующих значений:
Заметка: Свойство Multitouch.inputMode можно использовать для получения текущего режима взаимодействия.
При использовании режима MultitouchInputMode.GESTURE неплохо проверять, какие жесты доступны. Это можно сделать используя свойство Multitouch.supportedGestures. Свойство содержит Vector строк. Элементы вектора эквивалентны типам событий, описываемых классами GestureEvent, PressAndTapGestureEvent и TransformGestureEvent.
Если вы используете режим MultitouchInputMode.TOUCH_POINT, то будьте внимательны с количеством одновременно обрабатываемых прикосновений. Определить максимально доступное для обработки количество прикосновений можно воспользовавшись свойством Multitouch.maxTouchPoints. Попытка одновременно использовать количество точек большее, чем поддерживает устройство, может привести к неожиданному результату (например все активные точки исчезнут).
И события прикосновения, и жесты генерируются классом InteractiveObject. Это значит, что вы можете использовать их с любыми объектами, классы которых наследуют от InteractiveObject. Например с объектами классов SimpleButton, TextField, Loader, Sprite, Stage.
Следующие события могут быть зарегестрированы для экземпляра класса InteractiveObject или же любого его наследника:
Событие прикосновения имеет те же свойства, что и мышиное событие, но так же имеет некоторые новые свойства:
Также появились некоторые новые методы у класса Sprite, связанные с прикосновениями:
Есть следующие типы событий, срабатывающих при жестах: GestureEvent, PressAndTapGestureEvent и TransformGestureEvent.
Список типов таких событий:
Свойства имеют много общего с классом мышиного события. PressAndTapGestureEvent и TransformGestureEvent добавляют некоторые свойства в зависимости от жеста:
PressAndTapGestureEvent:
TransformGestureEvent:
Для запуска примеров из данной статьи требуется Adobe Flash Player 10.1 beta.
Архив с примерами: http://download.macromedia.com/pub/developer/flash/multitouch_gesture_examples.zip (ZIP, 44 KB)
Определение понятий multi-touch и жестов
Термин multi-touch подразумевает возможность определять не только физические прикосновения к экрану и движения по нему, но и множественные прикосновения и движения одновременно. Событие прикосновения сходно с мышиным, однако оно отличается тем, что вы можете работать с множеством таких событий одновременно, а так же тем, что событие прикосновения не поддерживает специфические для мышки концепты, например «наведение» (hovering).
Жесты(gestures) — это объединение нескольких multi-touch событий в одно. Например «сжимание» картинки для изменения ее масштаба или «зачеркивание» для удаления чего-либо из списка. Некоторые платформы прекрасно поддерживают концепцию жестов, уменьшая количество работы для определения жеста и реакции на него, а некоторые требуют от разработчика ручной захват событий прикосновения и объединение их в жест. Flash платформа автоматически распознает наиболее распространенные жесты на различных платформах, а так же предоставляет разработчикам возможность посредством API создавать свои собственные жесты.
Несмотря на то, что технология multi-touch известна на протяжении многих лет, только популярность Apple iPhone привела к массовому распространению этой технологии. Преимущества взаимодействия с устройством напрямую, а не через кнопки или посредством стилуса стали настолько очевидными, что данная технология начала распространятся и на десктоп. Windows 7 поддерживает multi-touch «из коробки», HP начали продавать TouchSmart computers начиная с 2007 года, Microsoft выпустили Microsoft Surface, ориентированный на жесты и прикосновения в 2008. Также Apple представили свой multi-touch трэкпад в MacBook Air, а затем включили эту технологию во всю свою линейку ноутбуков. Новая мышь Apple «Magic Mouse» так же имеет ограниченную поддержку жестов.
Прикосновения, multi-touch, жесты и тактильное взаимодействие (Haptic technology) становится настолько заметными, что все новые высокотехнологичные и устройства поддерживают хотя бы одну из этих технологий взаимодействия.
Поддержка multi-touch и жестов
Flash платформа в данный момент поддерживает multi-touch и жесты в Flash Player 10.1 в браузере, в приложениях для iPhone или iPod touch и в Adobe AIR 2. Поддержка multi-touch зависит от возможности железа и от аппаратного обеспечения. Далее приводится список плафторм, поддерживающих multi-touch и жесты на момент написания данной статьи (17 ноября 2009):
Multi-touch
- Windows 7 и более поздние (с программным обеспечением, поддерживающим multi-touch), включая Flash Player 10.1 и Adobe AIR 2 приложения.
- iPhone OS 3.0 и более поздние
Жесты
- Windows 7 и более поздние (с программным обеспечением, поддерживающим multi-touch), включая Flash Player 10.1 и Adobe AIR 2 приложения.
- Mac компьютеры с Mac OS X 10.5.3 и более поздними версиями (с mult-touch тракпадами).
- iPhone OS 3.0 и более поздние
Далее приводится список поддерживаемых жестов в различных платформах
Windows 7
- TransformGestureEvent.GESTURE_PAN
- TransformGestureEvent.GESTURE_ROTATE
- TransformGestureEvent.GESTURE_ZOOM
- GestureEvent.GESTURE_TWO_FINGER_TAP
- PressAndTapGestureEvent.GESTURE_PRESS_AND_TAP
Mac OS X 10.5.3 и более поздние
- TransformGestureEvent.GESTURE_PAN
- TransformGestureEvent.GESTURE_ROTATE
- TransformGestureEvent.GESTURE_SWIPE
- TransformGestureEvent.GESTURE_ZOOM
iPhone и iPod touch
- TransformGestureEvent.GESTURE_PAN
- TransformGestureEvent.GESTURE_ROTATE
- TransformGestureEvent.GESTURE_SWIPE
- TransformGestureEvent.GESTURE_ZOOM
Windows Mobile 6.5
- TransformGestureEvent.GESTURE_PAN
Класс Multitouch
Вся работа с multi-touch и жестами начинается с класса Multitouch. Он содержит некоторые свойства, необходимые для написания приложений, поддерживающих multi-touch и жесты.
Определяем поддержку multi-touch и жестов
Перед использованием multi-touch и жестов неплохо определить, возможно ли вообще их использование. Для этого есть свойства Multitouch.supportsGestureEvents и Multitouch.supportsTouchEvents, позволяющие определить, поддерживает ли устройство, на котором запущено ваше приложение, необходимые приложению возможности.
Если вы пишете приложение специально для iPhone, то нет необходимости использовать эти свойства. Но если же вы пишете приложение, предназначенное для запуска в различных местах, эти два свойства вам просто необходимы.
Установка input mode
Установка свойства Multitouch.inputMode необходимо для того, что бы runtime знал, какие типы событий вам нужны. Это свойство может принимать одно из следующих значений:
- MultitouchInputMode.GESTURE: Используйте этот режим для объединения multi-touch событий в жест. Простые события (такие как «нажатие») превратятся в мышиные.
- MultitouchInputMode.TOUCH_POINT: Используйте этот режим, если вам интересны только touch события. Вы можете использовать этот режим для создания своих собственных жестов или если вам необходима поддержка и multi-touch событий и жестов одновременно.
- MultitouchInputMode.NONE: Используйте этот режим, если вы хотите, что бы ваше приложение работало одинаково на устройствах как поддерживающих, так и не поддерживающих multi-touch, без написания дополнительного кода.
Заметка: Свойство Multitouch.inputMode можно использовать для получения текущего режима взаимодействия.
Определение поддерживаемых жестов
При использовании режима MultitouchInputMode.GESTURE неплохо проверять, какие жесты доступны. Это можно сделать используя свойство Multitouch.supportedGestures. Свойство содержит Vector строк. Элементы вектора эквивалентны типам событий, описываемых классами GestureEvent, PressAndTapGestureEvent и TransformGestureEvent.
Определение максимального количества точек прикосновения (touch point)
Если вы используете режим MultitouchInputMode.TOUCH_POINT, то будьте внимательны с количеством одновременно обрабатываемых прикосновений. Определить максимально доступное для обработки количество прикосновений можно воспользовавшись свойством Multitouch.maxTouchPoints. Попытка одновременно использовать количество точек большее, чем поддерживает устройство, может привести к неожиданному результату (например все активные точки исчезнут).
Регистрирование событий
И события прикосновения, и жесты генерируются классом InteractiveObject. Это значит, что вы можете использовать их с любыми объектами, классы которых наследуют от InteractiveObject. Например с объектами классов SimpleButton, TextField, Loader, Sprite, Stage.
Обработка multi-touch событий
Следующие события могут быть зарегестрированы для экземпляра класса InteractiveObject или же любого его наследника:
- TOUCH_BEGIN: Начало touch события (прикосновение)
- TOUCH_END: Конец touch события
- TOUCH_MOVE: Перемещение точки прикосновения (другими словами, пользователь водит пальцем по экрану или тачпаду).
- TOUCH_OVER: Точка прикосновения переместилась в пределы InteractiveObject. В отличии от TOUCH_ROLL_OVER, данное событие распространяется на все дочерние элементы InteractiveObject-а.
- TOUCH_OUT: Точка прикосновения переместилась за пределы InteractiveObject. В отличии от TOUCH_ROLL_OUT, данное событие распространяется на все дочерние элементы InteractiveObject-а.
- TOUCH_ROLL_OVER
- TOUCH_ROLL_OUT
- TOUCH_TAP: Быстрый «щелчек»
Свойства события прикосновения
Событие прикосновения имеет те же свойства, что и мышиное событие, но так же имеет некоторые новые свойства:
- isPrimaryTouchPoint: определяет, является ли первая точка прикосновения отображаемой в мышиное событие.
- pressure: Значение между 0.0 и 1.0. Определяет силу нажатия. Наличие данного свойства зависит от аппаратной возможности узнать его. То есть оно поддерживается только на некоторых multi-touch устройствах.
- sizeX: Ширина области контакта. Поддерживается только на некоторых multi-touch устройствах.
- sizeY: Высота области контакта. Поддерживается только на некоторых multi-touch устройствах.
- touchPointID: Уникальный итендификатор точки прикосновения. Удобен для отслеживания одновременных прикосновений.
Новые touch методы класса Sprite
Также появились некоторые новые методы у класса Sprite, связанные с прикосновениями:
- startTouchDrag: Позволяет пользователю «таскать» спрайт пальцами.
- stopTouchDrag: Прекращает таскание спрайта.
Пример использования
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.Обработка жестов
Есть следующие типы событий, срабатывающих при жестах: GestureEvent, PressAndTapGestureEvent и TransformGestureEvent.
Список типов таких событий:
- GestureEvent.GESTURE_TWO_FINGER_TAP: Щелчек двумя пальцами
GesturePressAndTap.GESTURE_PRESS_AND_TAP: Пользователь, удерживая один палец, щелкнул вторым. - TransformGestureEvent.GESTURE_PAN
- TransformGestureEvent.GESTURE_ROTATE: Пользователь «вращает» что-либо на экране двумя пальцами (либо на тачпаде).
- TransformGestureEvent.GESTURE_SWIPE: Быстрое перемещение точки касания. Например «зачеркивание» элемента списка или скролл.
- TransformGestureEvent.GESTURE_ZOOM: Пользователь двумя пальцами «растягивает» изображение.
Свойства события жеста
Свойства имеют много общего с классом мышиного события. PressAndTapGestureEvent и TransformGestureEvent добавляют некоторые свойства в зависимости от жеста:
PressAndTapGestureEvent:
- tapLocalX, tapLocalY — горизонтальные и вертикальные координаты точки касания относительно объекта
- tapStageX, tapStageY — глобальные горизонтальные и вертикальные координаты
TransformGestureEvent:
- offsetX, offsetY — горизонтальное и вертикальное смещение.
- scaleX, scaleY — горизонтальное и вертикальное изменение масштаба.
- rotation — вращение в градусах.
Пример использования
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.