Confirmed: Apple’s “Magic” Trackpad works with AIR 2.0

Yesterday I saw a Tweet from Ralph Hauwert who was wondering if Apple’s Magic Trackpad would work with AIR 2.0. You probably already know that AIR 2.0 supports multitouch and gestures. The trackpad on a recent MacBook Pro supports gestures and these work nicely in AIR 2.0. So… My hunch was that the “Magic” Trackpad… [...]

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

Introducing the MultiDraggable Gesture API

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 gestures 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
import xd.parts.MultiDraggable;

// 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

Multi-Touch Water Simulation Example

Microsoft Surface has a cool simulation that allows you to drag your fingers across the table to create a water simulation. That got me to thinking about doing it in Flash. Thanks to David Lenaerts’ excellent Ripple class, it took me about 10 minutes to create the example below.

As you can see the performance is very nice. The code that I used to create this is below. Again, all of the cool stuff comes from David’s code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import be.nascom.flash.graphics.Rippler;
import flash.events.TouchEvent;
import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;

Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

var t:Bitmap;
var r:Rippler;

t = new Bitmap(new bmap());
addChild(t);

r = new Rippler(t, 60, 6);

stage.addEventListener(TouchEvent.TOUCH_MOVE, handleMouseMove);

function handleMouseMove(e:TouchEvent):void
{
    r.drawRipple(e.stageX, e.stageY, 20, 1);
}

Lee

Flash Works On Touch-Based Devices (Video)

Several people have been making assertions that most Flash sites will not work properly on touch-based devices because these sites use rollovers or hovers for things like effects and navigation. Well I put together this little video together showing that Flash sites do indeed work the way you would expect since the Flash Player dispatches rollover events even on a touch screen.

This video is aimed at clearing up the misinformation surrounding Flash rollover events and touch devices. The assertion that most Flash sites need to be rewritten is absolutely false. But please grab a tablet and see for yourself. I tried every FWA Site of the Month and they all worked fine.

Lee

Watch My Sessions From Flash Camp SF

Advanced Text Layout With Flash CS5
Flash Player 10.1 introduces a full, native multi-touch API that allows you to create some amazing applications. In this session I demonstrate how to build applications using native multi-touch feedback as well as how to use the built-in gesture support for things like scaling and rotating.

Introduction to Multi-Touch in Flash Player 10.1
I give an introduction to some of the new Text Layout features and functionality in Flash CS5.

Lee

The power of the Flash Platform part 5 – Multi-touch

Multi-touch is only just gaining grounds in the tech world. While it’s pretty common on mobile devices these days, you don’t yet see a lot of multi-touch devices in people’s homes. Sure… A lot of trackpads on laptops also support multi-touch these days but they usually only support the common gestures for zoom and rotate.
One [...]

Flash Is Not Designed For Touch?

Everyone who actually programs in Flash knows that there is now full multi-touch and gesture support available. Unfortunately, some people still like to make claims to the contrary in an effort to make Flash appear behind the times. It is fortunately very easy to prove them wrong. Below is a great example built by StruckAxiom that showcases the new APIs that we have made available in Flash Player 10.1.

You can also read this great blog post that talks about some of the techniques used to create this touch experience.

Lee

Multi-touch development with Flash and Flex e-seminar materials

Below you will find links to my e-seminar recording, presentation slides and projects with source code of demo applications:

Recording on Adobe Connect:

http://my.adobe.acrobat.com/p84912063/

Presentation on SlideShare:

Gesture events demo application source code (Flex/AIR):

http://www.riaspace.net/wp-content/uploads/2010/03/GesturesFlexDemo.zip

Touch events demo application source code (Flash/AIR/Apple Phone):
http://www.riaspace.net/wp-content/uploads/2010/03/TouchFlashDemo.zip