Introducing the MultiDraggable Touch API

Updates: I changed the name of the post as technically this is not a gesture API. It is a way to achieve gesture-like effects using touch data. Also the code below was missing an important line. You have to set the input mode to touch point in order for any of this to work.

As part of my multi-touch session at Flashbelt I introduced a new API for getting true multi-touch gestures in Flash. Windows 7 has a pretty big limitation when it comes to gestures as it is only capable of doing one at a time. Since Flash listens for these native events, we also get that limitation when doing multi-touch in Flash.

Tim Kukulski, who is a member of the Adobe XD team, has written a great set of classes that listens for raw touch events instead of the built-in gestures. The main class, called MultiDraggable, does all of the work for you and allows you to quickly add zoom, rotate, and drag gesture effects to any DisplayObject. See the video below for an example.

The code needed to implement the gesture effects is extremely simple. Below is a code snippet of how to do it. You simply add your DisplayObject to the display list of a MultiDraggable instance. Then add the MultiDraggable instance to the main display list.

1
2
3
4
5
6
7
8
9
10
import xd.parts.MultiDraggable;

Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;

// box is a MovieClip in the library
var b:MovieClip = new box();

var dragme:MultiDraggable = new MultiDraggable();
dragme.addChild(b);
addChild(dragme);

Big thanks to Tim for releasing this code. Photos and artwork in the video are from Ralph and Mario. Go ahead and download the files and have fun spawning multiple gestures!

Lee

Show Comments

Hide Comments

Comments are closed.