multi-touch development with flash and flex

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

Piotr Walczyszyn | Platform Evangelist Multi-touch development in Flash and Flex


About Me

2

h"p://riaspace.net

h"p://twi"er.com/pwalczyszyn


Agenda

  Touch events vs. gestures

  Supported platforms and hardware

  New Flash touch API’s

  New Flash gesture API’s

  Demo

  Q&A

3


Touch events vs. gestures

  Touch events are raw inputs

  Gestures are combinations of multiple touch events

4


Supported platforms and hardware

  Supported by Flash Player 10.1 and AIR 2.0

  Touch

  Windows 7 and later

  iPhone OS 3.0 and later

  Gestures

  Windows 7 and later

  Macs running Mac OS X 10.5.3 and later (with multi-touch trackpads)

  At this time only AIR applications (not swf content in the browsers)

  iPhone OS 3.0 and later

5


WHAT’S NEW?

6


What do we get with FP10.1 and AIR 2.0?

  flash.ui.Multitouch  flash.ui.MultitouchInputMode  flash.events.TouchEvent  flash.events.GestureEvent  flash.events.GesturePhase  flash.events.TransformGestureEvent  flash.events.PressAndTapGestureEvent

7


Multitouch API

  Multitouch.inputMode  MultitouchInputMode.GESTURE: Use this mode if you want multi-touch

events synthesized into gesture events.

  MultitouchInputMode.TOUCH_POINT: Use this mode if you are interested only in touch events and no mouse or gesture events.

  MultitouchInputMode.NONE: Use this mode if you want to handle all touches as mouse events.

  Multitouch.maxTouchPoints  Multitouch.supportedGestures

  Returns Vector.<String>  Multitouch.supportsGestureEvents  Multitouch.supportsTouchEvents

8


TOUCH EVENTS

9


New Flash touch API’s

  TouchEvent.TOUCH_BEGIN  TouchEvent.TOUCH_END  TouchEvent.TOUCH_MOVE  TouchEvent.TOUCH_OUT  TouchEvent.TOUCH_OVER  TouchEvent.TOUCH_ROLL_OUT  TouchEvent.TOUCH_ROLL_OVER  TouchEvent.TOUCH_TAP

10


New Flash touch API’s

  Touch event properties

  touchPointID: A unique identi!cation number assigned to the touch point.

  isPrimaryTouchPoint: Indicates whether the !rst point of contact is mapped to mouse events.

  pressure: A value between 0.0 and 1.0 indicating force of the contact with the device.

  sizeX: #e width of the contact area.

  sizeY: #e height of the contact area.

  New touch functions on Sprite  startTouchDrag: Drags the speci!ed sprite on a touch-enabled device.

  stopTouchDrag: Ends the startTouchDrag() method.

11


New Flash gesture API’s

  GestureEvent.GESTURE_TWO_FINGER_TAP

  PressAndTapGestureEvent.GESTURE_PRESS_AND_TAP

  TransformGestureEvent.GESTURE_PAN

  TransformGestureEvent.GESTURE_ROTATE

  TransformGestureEvent.GESTURE_SWIPE

  TransformGestureEvent.GESTURE_ZOOM

13


Gesture events properties

  TransformGestureEvent:

  offsetX and offsetY indicate the horizontal or vertical translation of the display object since the previous gesture event.

  scaleX and scaleY indicate the horizontal or vertical scale of the display object since the previous gesture event.

  rotation indicates the current rotation angle, in degrees, of the display object along the z-axis since the previous gesture event.

  PressAndTapGestureEvent:

  tapLocalX and tapLocalY indicating the horizontal or vertical coordinate at which the event occurred relative to the containing interactive object.

  tapStageX and tapStageY indicate the horizontal or vertical coordinate at which the tap touch occurred in global Stage coordinates.

14


DEMO


Credits and Links

  Credits to Ryan Lee for le"ing me use icons from h"p://gesturecons.com

  Christian Cantrell’s article on:h"p://www.adobe.com/devnet/$ash/articles/multitouch_gestures.html

  ASDocs:h"p://help.adobe.com/en_US/FlashPlatform/beta/reference/actionscript/3/$ash/ui/Multitouch.html

16


Q&A

multi-touch development with flash and flex

Technology