Andrew Trice
Real-World Rich Internet Applications
Tuesday October 13, 2009
MAX Recap: Multi-Touch Development with Flex
MAX Keynote
Another great Adobe MAX event has come and gone, and I am excited to share the content from my presentation this year. However, before I dig into the "meat" of the presentation content, I'd like to share the Cynergy multi-touch demo that was part of Keyin Lynch's keynote on day 1 of Adobe MAX. I was lucky enough to lead the implementation team, and it was an exciting project. Congratulations are in order to the entire team that made this possible, especially our talented user experience leads Peter Ruthenberg and Aaron Adams. It is exciting to see your own work in a keynote of this scale.
You can view the full MAX keynote online at http://max.adobe.com/online/keynote_monday/.
The multi-touch examples start at 53:39.
Kevin Lynch demos the Cynergy multitouch calendar
If you want to see an up close demo of the keynote Calendar application, check out Dave Wolf's blog post here. In a short video, Dave goes into detail about the application and the ideas behind the addition of multi touch gestures into everyday components.
My Presentation
My presentation is entited "Multi-touch Development with Adobe Flex".
Explore new techniques for interacting with software and devices with the latest capabilities of the Flash Platform. Multitouch experiences are taking the software world by storm, from the 2008 election night coverage to the latest bars and clubs. This session will explore the multitouch capabilities of Flash Player and demonstrate how you can take advantage of them within your own applications.
The presentation was recorded and is available in its entirety online from Adobe TV. Or, you can just watch it here:
You may also view this online at http://tv.adobe.com/watch/max-2009-develop/multitouch-development-with-flex
In my presentation, I focused on the new capabilities of Adobe Flash Player 10.1 and AIR 2.0 which enable you to build applications that respond to touch input directly through operating system events. While my examples are all written using Adobe Flex, the same events are avaialble to ActionScript-only projects. I simply decided to use Adobe Flex for ease of development. However, it should be noted that you must be using an OS which supports multi touch events (Windows 7 or mobile devices for direct multi touch, or a Macbook plus OSX 10.5 for track pad/indirect gesture events).
When working with the new multi-touch capabilities, there are two input modes: gesture and touch. Luckily, you can easily switch between the two at runtime.
Gesture mode enables you to use predefined/built in gestures using GestureEvent and TransformGesture event. This includes logic for pinch, zoom, rotate, pan, two finger tap, etc... The gestures enable you to quickly and easily add gestural logic to your applications.
Touch mode allows you to get access to low-level touch events using the TouchEvent class. This enables you to create custom gestures or actions which are beyond the capabilities of the pre-baked gestures.
The examples below demonstrate how to take advantage of upcoming touch capabilities in your own applications. However, I strongly suggest taking a moment to watch to my presentation to get the full details. There are definitely things I mention in there, which I have missed on this blog post.
Simple Gesture Events
My first example shows usage of simple gesture events. It demonstrates how to add event listeners and respond to touch events. The video below shows the application in action, which is followed by the source code. Each event has attributes that identify the type of event that was dispatched, and the transformation properties based on the gesture. The attributes of the events get dislayed in a text area as the events are dispatched.
Simple Touch Events
My next example shows how to access low-level touch events. Touch events mimic mouse events. You have TOUCH_BEGIN, TOUCH_MOVE, TOUCH_END, and TOUCH_TAP. Each roughly equates to MOUSE_DOWN, MOUSE_MOVE, MOUSE_UP, and MOUSE_CLICK. The major difference is that you can have multiple concurrent touch event streams (each with a unique id), whereas you will only have one mouse event. This example will draw an ellipse that identifies the touch points on screen, based on x/y position and touch point size.
Map with Gesture Events
The next example demonstrates the application of gestures to application components in order to enhance user interaction. In this example, a map is displayed, and you can manipulate the map through multi-touch gestures. This map example is based on openscales and modestmaps open source mapping components. You use GESTURE_ZOOM events (pinch/zoom) to zoom in and out of the map. You can also use a two finger swipe (GESUTRE_PAN) to the left or right to cycle through the map tilesets (map, satellite, hybrid). It is also important to notice that there are thresholds to prevent unintentional gestures.
Paint With Touch Events
The next example builds upon the basic touch events in the second example and demonstrates how to create a multi-touch paint application. The hardware that I am using only supports two touch points, so the example is limited to only suppport 2 drawing inputs. You can use mulitple fingers to draw, and the size of the rendered lines varies depending on the size of the touch points.
Scatterview with Gesture Events
This example aims to make a very primitive scatter view (multi-touch photo browser) using the built in gesture events. You'll notice that detecting a zoom or rotate event is very easy, however this example also identifies the limitations of using gesture mode. You cannot combine gestures (pan/zoom/rotate all in one gesture), and you cannot drag more than one item at a time. In this example, I also used mx:Rotate and mx:Zoom effect instances to correctly apply rotate and zoom transformations based on the object centerpoint, rather than the default top left corner.
Touchlib Scatterview with Touch Events
The last example shows how to enhance the scatter view using low-level touch events. In this example, you can drag more than one object at a time, and you can perform a zoom, pan, and scale all within the same gesture. In this example, I adapted the RotatableScalable class from the open source touchlib project to use native touch events within the flash player.
These code samples should help get you started in the right direction. In order to execute any of these examples, you must have AIR 2.0, or Adobe Flash Player 10.1, which are not publicly avaialble at the time of writing. However I expect that they should be available some time soon, since they were publicly annouced at Adobe MAX.
All Code Examples:
(click to launch in a new window)- Simple Gesture Events
- Simple Touch Events
- Map with Gesture Events
- Paint With Touch Events
- Scatterview with Gesture Events
- Scatterview with Touch Events
