SlideShare una empresa de Scribd logo
1 de 19
Michaël CHAIZE |  Platform Evangelist Flex and Multi-touch applications
About Me 2 http://codemoiunmouton.wordpress.com http://twitter.com/mchaize
Multi-touch facts 3   	First Multi-touch display developed by Nimish Mehta.  	Murray Hill’s paper on touch-screen based interfaces. 1991	Pierre Wellner’s paper on multi-finger and pinching motions. 2006	Jeff Han presents multi-touch sensing at TED. 2007	Apple annouces the iPhone. 2007	MSFT announces Surface. 2009	Windows 7 launches with full multi-touch support. 2009	Apple adds multi-touch gestures to MacBooks. 2009	Adobe adds multi-touch and Gestures to Flash/AIR.
Two modes in Flash : 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 Android support Multi-touch 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_MOVEThe user is moving his finger across the screen TouchEvent.TOUCH_OUTA touch point has left an InteractiveObject(fire for each child of the InteractiveObject) TouchEvent.TOUCH_OVER TouchEvent.TOUCH_ROLL_OUTA touch point has left an InteractiveObject(don’t fire for each child, act as a container) TouchEvent.TOUCH_ROLL_OVER TouchEvent.TOUCH_TAPA quick TOUCH_BEGIN and TOUCH_END has occured 10
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 11
New Flash touch API’s Touch event properties touchPointID: A unique identification number assigned to the touch point. isPrimaryTouchPoint: Indicates whether the first 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 (platform and device specific). sizeX: The width of the contact area. sizeY: The height of the contact area. New touch functions on Sprite startTouchDrag: Drags the specified sprite on a touch-enabled device. stopTouchDrag: Ends the startTouchDrag() method. 12
13 GESTURE EVENTS
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 14
Gesture events properties TransformGestureEvent: offsetXand offsetYindicate the horizontal or vertical translation of the display object since the previous gesture event. scaleXand scaleYindicate 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: tapLocalXand tapLocalYindicating the horizontal or vertical coordinate at which the event occurred relative to the containing interactive object. tapStageXand tapStageYindicate the horizontal or vertical coordinate at which the tap touch occurred in global Stage coordinates. 15
16 DEMO Gestures with Flex on MAC Touch Events with Flex on Windows 7 Gestures with Flash CSx and Device Central CSx
Credits and Links Credits to Ryan Lee for letting me use icons from http://gesturecons.com Christian Cantrell’s article on:http://www.adobe.com/devnet/flash/articles/multitouch_gestures.html ASDocs:http://help.adobe.com/en_US/FlashPlatform/beta/reference/actionscript/3/flash/ui/Multitouch.html 17
18 Q&A
Flex et le développement d'applications Multi-Touch

Más contenido relacionado

Destacado

NxTop Radio Episode 1
NxTop Radio Episode 1NxTop Radio Episode 1
NxTop Radio Episode 1
Lexumo
 
Own it: working with a changing open source community
Own it: working with a changing open source communityOwn it: working with a changing open source community
Own it: working with a changing open source community
Selena Deckelmann
 
La5 Programming688
La5 Programming688La5 Programming688
La5 Programming688
Cma Mohd
 
Michael
MichaelMichael
Michael
eka
 
Mistakes were made - LCA 2012
Mistakes were made - LCA 2012Mistakes were made - LCA 2012
Mistakes were made - LCA 2012
Selena Deckelmann
 
Harder, better, faster, stronger: PostgreSQL 9.1
Harder, better, faster, stronger: PostgreSQL 9.1Harder, better, faster, stronger: PostgreSQL 9.1
Harder, better, faster, stronger: PostgreSQL 9.1
Selena Deckelmann
 
Nezavisimost
NezavisimostNezavisimost
Nezavisimost
ritari68
 
Martin karlssons vykortssamling munken och prästgatan
Martin karlssons vykortssamling   munken och prästgatanMartin karlssons vykortssamling   munken och prästgatan
Martin karlssons vykortssamling munken och prästgatan
hembygdsigtuna
 

Destacado (17)

Afghanistan Powerpoint Country
Afghanistan Powerpoint CountryAfghanistan Powerpoint Country
Afghanistan Powerpoint Country
 
NxTop Radio Episode 1
NxTop Radio Episode 1NxTop Radio Episode 1
NxTop Radio Episode 1
 
Gran Hotel
Gran HotelGran Hotel
Gran Hotel
 
PLC-2007_Intro
PLC-2007_IntroPLC-2007_Intro
PLC-2007_Intro
 
Own it: working with a changing open source community
Own it: working with a changing open source communityOwn it: working with a changing open source community
Own it: working with a changing open source community
 
Adobe flex at jax london 2011
Adobe flex at  jax london 2011Adobe flex at  jax london 2011
Adobe flex at jax london 2011
 
La5 Programming688
La5 Programming688La5 Programming688
La5 Programming688
 
Michael
MichaelMichael
Michael
 
Mistakes were made - LCA 2012
Mistakes were made - LCA 2012Mistakes were made - LCA 2012
Mistakes were made - LCA 2012
 
大家行03
大家行03大家行03
大家行03
 
Social Insights: Listen to the Voice of the Market
Social Insights: Listen to the Voice of the MarketSocial Insights: Listen to the Voice of the Market
Social Insights: Listen to the Voice of the Market
 
Harder, better, faster, stronger: PostgreSQL 9.1
Harder, better, faster, stronger: PostgreSQL 9.1Harder, better, faster, stronger: PostgreSQL 9.1
Harder, better, faster, stronger: PostgreSQL 9.1
 
UAE PowerPoint Content
UAE PowerPoint Content UAE PowerPoint Content
UAE PowerPoint Content
 
Arduino yun × apiで遊んでみる
Arduino yun × apiで遊んでみるArduino yun × apiで遊んでみる
Arduino yun × apiで遊んでみる
 
Nezavisimost
NezavisimostNezavisimost
Nezavisimost
 
Martin karlssons vykortssamling munken och prästgatan
Martin karlssons vykortssamling   munken och prästgatanMartin karlssons vykortssamling   munken och prästgatan
Martin karlssons vykortssamling munken och prästgatan
 
Jeffrey A Bourque
Jeffrey A BourqueJeffrey A Bourque
Jeffrey A Bourque
 

Más de Michael Chaize

Adobe gaming flash gamm michael
Adobe gaming flash gamm michaelAdobe gaming flash gamm michael
Adobe gaming flash gamm michael
Michael Chaize
 
Max2013 rejected apps presentation
Max2013   rejected apps presentationMax2013   rejected apps presentation
Max2013 rejected apps presentation
Michael Chaize
 
Back From MAX in London for CQ5 users
Back From MAX in London for CQ5 usersBack From MAX in London for CQ5 users
Back From MAX in London for CQ5 users
Michael Chaize
 
Pocket agile challenge adobe mobile v1.0.pptx
Pocket agile   challenge adobe mobile v1.0.pptxPocket agile   challenge adobe mobile v1.0.pptx
Pocket agile challenge adobe mobile v1.0.pptx
Michael Chaize
 

Más de Michael Chaize (20)

Typography on the Web - FITC Amsterdam 2015
Typography on the Web - FITC Amsterdam 2015Typography on the Web - FITC Amsterdam 2015
Typography on the Web - FITC Amsterdam 2015
 
FITC Amsterdam 2015 - keynote-adobe - We are mutants
FITC Amsterdam 2015 -  keynote-adobe - We are mutantsFITC Amsterdam 2015 -  keynote-adobe - We are mutants
FITC Amsterdam 2015 - keynote-adobe - We are mutants
 
Multimania - Web Design Trends
Multimania - Web Design TrendsMultimania - Web Design Trends
Multimania - Web Design Trends
 
Feweb - Adobe et le Web Design
Feweb - Adobe et le Web DesignFeweb - Adobe et le Web Design
Feweb - Adobe et le Web Design
 
FITC 2014 Amsterdam - Adobe Apps for Web Designers in 2014
FITC 2014 Amsterdam - Adobe Apps for Web Designers in 2014FITC 2014 Amsterdam - Adobe Apps for Web Designers in 2014
FITC 2014 Amsterdam - Adobe Apps for Web Designers in 2014
 
Adobe gaming flash gamm michael
Adobe gaming flash gamm michaelAdobe gaming flash gamm michael
Adobe gaming flash gamm michael
 
Max2013 rejected apps presentation
Max2013   rejected apps presentationMax2013   rejected apps presentation
Max2013 rejected apps presentation
 
Oop2012 mobile workshops
Oop2012 mobile workshopsOop2012 mobile workshops
Oop2012 mobile workshops
 
Oop2012 keynote Design Driven Development
Oop2012 keynote Design Driven DevelopmentOop2012 keynote Design Driven Development
Oop2012 keynote Design Driven Development
 
Montpellier - Flex UG
Montpellier - Flex UGMontpellier - Flex UG
Montpellier - Flex UG
 
Flex presentation for Paris Android User group PAUG
Flex presentation for Paris Android User group PAUGFlex presentation for Paris Android User group PAUG
Flex presentation for Paris Android User group PAUG
 
Xplatform mobile development
Xplatform mobile developmentXplatform mobile development
Xplatform mobile development
 
One backend multiple Screens
One backend multiple ScreensOne backend multiple Screens
One backend multiple Screens
 
Flash camp portugal - Let's talk about Flex baby
Flash camp portugal - Let's talk about Flex babyFlash camp portugal - Let's talk about Flex baby
Flash camp portugal - Let's talk about Flex baby
 
Back From MAX in London for CQ5 users
Back From MAX in London for CQ5 usersBack From MAX in London for CQ5 users
Back From MAX in London for CQ5 users
 
Flex mobile for JUG
Flex mobile for JUGFlex mobile for JUG
Flex mobile for JUG
 
Enterprise Flex applications on tablet devices
Enterprise Flex applications on tablet devicesEnterprise Flex applications on tablet devices
Enterprise Flex applications on tablet devices
 
Pocket agile challenge adobe mobile v1.0.pptx
Pocket agile   challenge adobe mobile v1.0.pptxPocket agile   challenge adobe mobile v1.0.pptx
Pocket agile challenge adobe mobile v1.0.pptx
 
Adobe et la stratégie multi-écrans
Adobe et la stratégie multi-écransAdobe et la stratégie multi-écrans
Adobe et la stratégie multi-écrans
 
Breizh camp adobe flex et les mobiles
Breizh camp   adobe flex et les mobilesBreizh camp   adobe flex et les mobiles
Breizh camp adobe flex et les mobiles
 

Último

Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Último (20)

Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 

Flex et le développement d'applications Multi-Touch

  • 1. Michaël CHAIZE | Platform Evangelist Flex and Multi-touch applications
  • 2. About Me 2 http://codemoiunmouton.wordpress.com http://twitter.com/mchaize
  • 3. Multi-touch facts 3 First Multi-touch display developed by Nimish Mehta. Murray Hill’s paper on touch-screen based interfaces. 1991 Pierre Wellner’s paper on multi-finger and pinching motions. 2006 Jeff Han presents multi-touch sensing at TED. 2007 Apple annouces the iPhone. 2007 MSFT announces Surface. 2009 Windows 7 launches with full multi-touch support. 2009 Apple adds multi-touch gestures to MacBooks. 2009 Adobe adds multi-touch and Gestures to Flash/AIR.
  • 4. Two modes in Flash : Touch events vs. gestures Touch events are raw inputs Gestures are combinations of multiple touch events 4
  • 5. 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 Android support Multi-touch 5
  • 7. 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
  • 8. 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
  • 10. New Flash touch API’s TouchEvent.TOUCH_BEGIN TouchEvent.TOUCH_END TouchEvent.TOUCH_MOVEThe user is moving his finger across the screen TouchEvent.TOUCH_OUTA touch point has left an InteractiveObject(fire for each child of the InteractiveObject) TouchEvent.TOUCH_OVER TouchEvent.TOUCH_ROLL_OUTA touch point has left an InteractiveObject(don’t fire for each child, act as a container) TouchEvent.TOUCH_ROLL_OVER TouchEvent.TOUCH_TAPA quick TOUCH_BEGIN and TOUCH_END has occured 10
  • 11. 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 11
  • 12. New Flash touch API’s Touch event properties touchPointID: A unique identification number assigned to the touch point. isPrimaryTouchPoint: Indicates whether the first 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 (platform and device specific). sizeX: The width of the contact area. sizeY: The height of the contact area. New touch functions on Sprite startTouchDrag: Drags the specified sprite on a touch-enabled device. stopTouchDrag: Ends the startTouchDrag() method. 12
  • 14. 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 14
  • 15. Gesture events properties TransformGestureEvent: offsetXand offsetYindicate the horizontal or vertical translation of the display object since the previous gesture event. scaleXand scaleYindicate 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: tapLocalXand tapLocalYindicating the horizontal or vertical coordinate at which the event occurred relative to the containing interactive object. tapStageXand tapStageYindicate the horizontal or vertical coordinate at which the tap touch occurred in global Stage coordinates. 15
  • 16. 16 DEMO Gestures with Flex on MAC Touch Events with Flex on Windows 7 Gestures with Flash CSx and Device Central CSx
  • 17. Credits and Links Credits to Ryan Lee for letting me use icons from http://gesturecons.com Christian Cantrell’s article on:http://www.adobe.com/devnet/flash/articles/multitouch_gestures.html ASDocs:http://help.adobe.com/en_US/FlashPlatform/beta/reference/actionscript/3/flash/ui/Multitouch.html 17

Notas del editor

  1. Touch events are similar to mouse events, except that you can receive and track more than one of them at once, and touch events do not support mouse-specific concepts such as hovering.Gestures are the synthesis of multiple touch events into a single event. Examples of gestures include &quot;pinching&quot; an image to scale it, or &quot;swiping&quot; to delete something from a list. Some platforms explicitly support the concept of gestures, reducing the amount of work that a developer needs to do in order to detect and react to them, and some platforms require developers to capture multiple touch events and synthesize them into gestures themselves. The Flash Platform automatically synthesizes the most common gestures across different platforms, but also provides developers with the APIs necessary to synthesize their own.