Design, Development, Interaction

Thursday, January 21, 2010

Get Tablet Pressure & Gestures into Flash via Bamboo Dock

Multi-touch, gestures and pressure are becoming the standard input mechanism for the average user and creatives alike. But for creative tools, pen pressure is often more of a necessity. And as far as I know, Wacom tablets are the only device capable of providing this data. So to get the ball rolling, I worked with Wacom to add pressure support to Livebrush. (Actually, they were invaluable. I couldn't have done it without their support.)

The most exciting part of including pressure is how it can be combined with velocity. You can have the precision of pressure while drawing, and then simply release the brush to have it use your gesture to elegantly complete the line. Here's a quick video demo.All the details, code and sample files are below.

Using Wacom tablets, pressure and gesture events are passed into Flash via their Bamboo Dock (download & install). Then, using their extensions you can test your apps within your Flash/Flash Builder workflow. Once installed, the Bamboo Dock automatically launches when you're testing SWF's within Flash or running/testing AIR applications. So, if you haven't already, download the Bamboo Dock and extension.

This example shows how to initialize the tablet connection and register for events. The interface traces the events on screen. Download

This example uses the same gesture events from the previous example to manipulate an image. Download

Tablet class
I've simplified the tablet connection with a custom class. It abstracts as much of the tablet implementation as possible. It's also the same class I use in Livebrush (so it may be a little rough around the edges). Simply call Tablet.init(this) to initialize the tablet connection and associate it to the main stage. Then listen for TabletEvent's and TabletGestureEvent's on any display object. You could also create your own implementation using the classes provided by Wacom.

Play with pressure
Click here to download Livebrush with pressure. Or if you already have the Bamboo Dock installed, you can install Livebrush as a Mini!

Additional Links

Tuesday, January 19, 2010

FlashInTO Presentation

On November 25th, 2009 FlashInTO invited me do a little presentation on Livebrush. These are the slides from that presentation. Sorry they took so long to post :)

Frameworks & Libraries
Adobe Core Lib
HYPE Framework