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!
wow.. this is great! very smooth and no sluggish at all.
YESSSS!!! go flashh!!!
This is awesome!! Looking forward to playing with it!
nice =) so sad in wont work on macbook trackpad =(
Thanks for the post and sharing Lee!
I’m hoping to see the API developed further in the future.
Exactly what I needed, and I’m certainly not the only one.
Thank you guys!
Fantastic!
Can I use MultiDraggable Gestures on MacBook Pro trackpad?
Ocho
For whom the bells tool…
Wow….I can’t believe Microsoft were happy with that – that first video is painful to watch even for just a few seconds. Great job to Tim for making the second demo amazing.
Nice stuff Tim. thnaks for the post lee.
Yeay for Flash! Yeay for Multi-Touch! Yeay for Metallica!
Nice! I am looking for Flash Player 10.1 Standalone for Mac to test it (currently only work with AIR). There’s also another open-source project that seems to support multi draggable gestures – haven’t tested it yet though, but it looks interesting.
http://gestureworks.com/about/open-source-gesture-library/
Very nice!
This class bypass the Windows 7 OS limitations, but will it also bypass hardware limitations (ie: touch screens / devices) that only allow one touch point?
Thanks Lee, go Team Adobe!
This is brilliant! Thank you for sharing this. =)
Woohoo! Awesome! Is it optimized only for Windows 7 or it’s that smooth on other platform such as android and … !?
Looks sweet, hope I can implement at my touchscreen company soon.
Wish to never ever see that pic with you and the meatball again
This is really awesome!
smooooooth
nice choice for bg music.
yeah!! I can’t believe that MS built in such limitation into the native multitouch supportof win 7. this is the prerequisite for real multi-user input on big devices like tabletops! Thanks a lot for sharing this..
That was HUGE!!!
And the sound track you’ve picked up hahaha
You get an A for this one
Thanks for sharing. And thank Tim – I was just researching to see if anyone had done an custom gesture gesture api yet. Glad to see you guys have got the ball rolling.
Excellent! Thanks Tim and Lee! Much needed. The native gestures of Air 2 were a bit sluggish and they didn’t support true multi-user, multi-touch.
Great stuff!
Don Kerr
Manager, Space City Adobe User Group
http://www.spacecityaug.com
Looks really nice! I have a multi-touch monitor on the way that I’m excited about. Seems odd though that the built-in multi-touch events in Windows 7 are so horrible. I have never used any of it, but I have extensive experience with Microsoft Surface and those multi-touch events are absolutely great, and that was back before Windows 7 even came out.
Lee – Can you do a little write up on best practices (or maybe capabilities) for testing multitouch. I develop on both a PC and a Mac and I realize that to date, it seems that multitouch devices fit into one of these categories…
1. Mobile devices: Android OS, iOS.
2. Windows 7 systems.
What I am curious about is if there might be a workflow for adding a component like…
- Wacom bamboo touch –
http://www.wacom.com/bamboo/bamboo_touch.php
… and will flash respond to raw multitouch data from that type of device so one could test their efforts on a mac or pc?
WHY!!! the best multitouch screen is SOO DAMN expensive!!
Lee: what do you think about dell’s multitouch display:
SX2210T in relation to flash player new multitouch capabilities
OR: what should I look for in order to choose a good multi touch display
in relaltion with the reaction speed, touch point etc?!
http://accessories.us.dell.com/sna/products/Displays/productdetail.aspx?c=us&l=en&cs=19&sku=320-1172
a LOT better!
Very nice.
Can this be tested using Device Central’s multitouch emulator?
Where do you get: flash.events.TouchEvent
I can’t compile without it and you make no mention of it…
(found the answer to my question) http://abiamy.com/abiyasablogs/2010/06/12/flash-player-10-1-multi-touch-and-hp-tm2/
I tried testing this through Device Central and it does seem to work except that after a handful of interactions I get this error.
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at xd.touch::MultiTouchTracker/dispatch()
at xd.touch::MultiTouchTracker/touchEnd()
Also, I couldn’t get this to work simply using the code you site in your post. I also had to use one of the classes in the “touch” package. So after line 6 in your code I added:
import xd.touch.GestureRecognizer;
var gestureRecognizer:GestureRecognizer = new GestureRecognizer(dragme);
Any plans to document this API or do a more thorough tutorial?
Don’t mean to be bashing Microsoft (*looks around for Silverlight fans*), but I didn’t realize their Win 7 gesture support was so bad! Especially compared to how good and somewhat ground breaking Microsoft Surface was. I just got a Win 7 machine, I sincerely hope they release an update which improves gesture support, I’d hate to have to wait for the next Windows OS to get multiple gestures at once natively.
Nice info, thanks for the post!
This looks great. A big improvement. Now all I need is a touch screen
@jt I updated the code in my post. Sorry I left out an important line.
Hi,
Does someone noticed the issue with TouchEvent.stageX or stageY when touching an FLV file ? It’s like touch points are following a kind of grid.
Here’s an illustration of what I wrote just before:
http://dl.dropbox.com/u/1056083/drawing.jpg
The red line comes from a TouchEvent.
As you can see on an FLV, the point follows a grid, when there’s no problem when drawing on (or touching) something else.
Does anyone knows?
@Flo wow that is really strange. Let me try to find out what is happening. What if you draw on a MovieClip that contains an FLV? Same thing?
Could you put a few more palm mutes into the music there?
Wow! Great Job. It is amazing you can get passed a Windows limitation like this with so little code.
Wow, really great!!!
One question… is there a simple way to limit the scale of the Movieclip / Bitmap ?
I have a big image 2500×800 I wil like to limit his dimensions to 4095×4095. If the dimensions get bigger the image is hidden. Flash limits of image dimensions is the problem… I imagine.
Slightly off topic but I think if Cliff Burton wouldn’t have died he either would have left the band because the rest of them became such douche bags or maybe his sheer presence would have kept them from becoming one.. just my 2 cent.. anyways – this is the best version /watch?v=rTz0xQomNFg
@lee yep that’s really strange as you said. The Video instance is embedded in a MovieClip. Same thing.
Thanks for the post Lee, and thanks for the code Time.
Awesome, this works on my Droid. Waaaay easy!
Will it work on Android phones ?
Hi
how can I drag without leaving the stage?
tks
It does work on android phones, tested here!
That is really really awesome. I didn’t know that this is even possible.
Does anyone know which hardware this is running on? we have a huge project for touchscreens and the devices we were given are crap, we need to give them a hardware example that can truly show off flash multitouch,
thanks
Nice quick implementation. Thanks! I tried the Gestureworks library, it’s nice.. but this one is just so easy and less complicated.. plus it’s free.