20. Gestures in Flash
• Old Style
– Touchlib ‐‐ h?p://code.google.com/p/touchlib/
– Gestureworks ‐‐ h?p://gestureworks.com/ 2
Of
– Ideo ‐‐ 45
h?p://code.google.com/p/ideo‐mul>touch/
– Touche ‐‐ h?p://code.google.com/p/touche/
– (op>cal mul>‐touch)
21. Gestures in Flash
• New Style
– Build‐in support in Flash Player 10.1 and AIR 2
• For mul>‐touch gestures 3
Of
• Promising to be cross plaorm in future 45
– (provided that is possible!)
24. Gestures in Flash
• Capaci>ve –
– Insulator like glass covered with a conductor like
Indium Tin Oxide (ITO) 6
Of
– Human body is a good condutor 45
– On touch electrosta>c field is distorted, which is
recorded as a change in capacitance (ability of a
body to hold charge)
25. Gestures in Flash
• Op>cal Imaging –
– 2 or > image sensors placed around edges
– On the other side, in the camera’s field of view 7
Of
infrared light is placed 45
– touch translates to shadow
– Pair of cameras triangulated to locate a touch
26. Gestures in Flash
• Surface wave acous>cs –
– Ultrasonic waves pass over the surface
– Touch absorbs ultrasonic waves 8
Of
• Dispersive signal 45
– Sensors touch mechanical energy in the glass due
to touch
• Strain gauge
– Spring mounted on 4 corners
– Gauges determine deflec>on on touch
33. Gestures in Flash
• flash.ui.Mul>touchInputMode
– GESTURE – gestures recognized, simple touch
event = mouse event 15
Of
– NONE – everything is treated as a mouse event 45
– TOUCH_POINT – only the basic touch events, no
gestures
38. Gestures in Flash
• Proper>es the TouchEvent object has –
– touchPointID – unique ID a?ached to the touch
point 20
Of
– localX – x coordinate rela>ve to the sprite 45
– localY – y cordinate rela>ve to the sprite
– sizeX – width of the contact area
– sizeY – height of the contact area
45. Gestures in Flash
• GESTURE_SWIPE
27
Of
45
• h?p://regmedia.co.uk/2008/12/29/swipe_patent1.jpg
• (h?p://i.msdn.microsoY.com/Dd940543.gestures%28en‐
us,VS.85%29.png)
46. Gestures in Flash
• What about this?
28
Of
45
• One finger flick ‐‐ h?p://gestureworks.com/wp‐
content/themes/gestureWorks/images/
gesturePngs/one_finger_swipe.png
47. Gestures in Flash
• And this?
29
Of
45
• Two finger flick ‐‐ h?p://gestureworks.com/wp‐content/
themes/gestureWorks/images/gesturePngs/
two_finger_swipe.png
48. Gestures in Flash
• GESTURE_ZOOM
30
Of
45
• h?p://gestureworks.com/wp‐content/themes/
gestureWorks/images/gesturePngs/two_finger_zoom_in.png
• (h?p://i.msdn.microsoY.com/Dd940543.gestures%28en‐
us,VS.85%29.png)
49. Gestures in Flash
• What about this?
31
Of
45
• Mul> point zoom ‐‐ h?p://gestureworks.com/wp‐
content/themes/gestureWorks/images/gesturePngs/
two_hand_zoom_in.png
50. Gestures in Flash
• And this?
32
Of
45
• h?p://gestureworks.com/wp‐content/themes/
gestureWorks/images/gesturePngs/
pinch_zoom.png
52. Gestures in Flash
• GESTURE_TWO_FINGER_TAP
34
Of
45
• h?p://gestureworks.com/wp‐content/themes/
gestureWorks/images/gesturePngs/two_finger_tap.png
• h?p://i.msdn.microsoY.com/Dd940543.gestures
%28en‐us,VS.85%29.png
53. Gestures in Flash
• What about this?
35
Of
45
• Two finger double tap ‐‐ h?p://gestureworks.com/
wp‐content/themes/gestureWorks/images/
gesturePngs/two_finger_double_tap.png
61. Gestures in Flash
• Aggrega>on
• GESTURE_ZOOM + TAP
43
– <>.addEventListener(TransformGestureEvent.GEST Of
URE_ZOOM , onZoom); 45
– func>on onZoom
(evt:TransformGestureEvent):void {
if (evt.phase==GesturePhase.BEGIN) { add event
listener for tap – which is translated to a mouse click }
71. Where do I go from here?
• Explore
– Unistroke recognizer ‐‐
h?p://depts.washington.edu/aimgroup/proj/ 3
Of
dollar/ 4
– h?p://www.betriebsraum.de/projects/gestures/
• Gestureworks – Open source gesture library
– h?p://gestureworks.com/about/open‐source‐
gesture‐library/
72. Where do I go from here?
• Gesture recogni>on ‐‐
h?p://github.com/sqrtof5/
GestureRecogni>on 4
Of
• Touchlib source – 4
– h?p://code.google.com/p/touchlib/source/
browse/trunk/AS3/int/app/core/ac>on/gestures/
GestureNormalizer.as
73. This presenta>on & demos?
• h?p://shanky.org/publish‐and‐present/flex
• h?p://www.treasuryofideas.com/gestures/
touch/MediaSorter/MediaSorter.html
– I will tweet the exact links and when the updated
versions are ready – twi?er:tshanky
– Images for slides were downloaded from the web. The
copyrights is with their respec>ve owners
– References to material used between slides 4 and 18
is available at h?p://www.shanky.org/references/
simple_expressions_at_play_references.pdf.