intense creativity » Tutorial - Multi Touch in AS3 / Flash Player 10.1

Hi Everyone,

I had the pleasure, although it was a strenuous experience, to work on Adobe Post. It is still a private project; undertaken by 80/20 Studio in NYC on behalf of Adobe. It was demonstrated (shortly) by Kevin Lynch at the Adobe MAX conference on Oct 14th, 2009. It implements one of the nicest new features of Flash Player 10.1: Multi-Touch.

Theoretical Information
There are a few multi-touch information pages on the internet about flash out there. Some are relevant, some were of third party software that enabled multi-touch in Flash or AIR prior to FP10.1 or Air 2.0. This article is very good however. It will give you a more theoretical overview than I can offer, I am a hands on person; not much of an intellectual.

Choosing your Hardware
First, to use multi-touch you need to have multi-touch enabled hardware; and a multi-touch enabled OS. For the purpose of development (and it proved to be the most stable platform) I used a HP TouchSmart TX2 which quite honestly is nothing impressive except for its resistive Touch Screen that is developed by nTrig. This touchscreen reportedly supports 4 simultaneous touch points.

The Adobe demo took place on a HP TouchSmart PC. This PC reportedly supports 2 simultaneous touch points through its NextWindow technology.

From my observations, the number of simultaneous touch points supported by hardware is corresponds to this formula: (Reported simultaneous touch points supported) - 1. By this I mean that the TX2 behaves very well with 3 fingers, but goes completely bezerk with 4 fingers. The TouchSmart PC behaves great with 1 finger, and a little oddly with 2 fingers down. Meaning that... you can't really do multi-touch on a TouchSmart PC.

What will happen? When you are rotating objects with 2 fingers on the TouchSmart PC it will screw up and start rotating them backwards, it will inverse touch points, and so on. Making it less than usable for the use we had in mind.

I am coming from a PC standpoint, and I heard that certain Wacom tablets did work as well. Take into consideration you need proper drivers, most of the time updated drivers downloaded fresh from the manufacturer's website.

As far as Mac computers are concerned, I have no information on the subject. If anyone does, please leave comments or contact me!

The Right OS
Windows 7 supports multi-touch (really!). It also supports gestures, which are rather slow. During the development phase, while Flash Player 10.1 was not yet in public beta it would crash regularly on the 32 bit version of Windows 7. Meaning you needed 64 Bit Win 7 to get it going.

The Right Drivers
For NextWindow driven hardware (HP TouchSmart PC, Dell Studio One), the drivers are available here.
For nTrig driven hardware (Dell Latitude XT(2), HP TouchSmart tx2), the drivers are here.

I don't know about the WACOM downloads.. You'll need to search.

Getting Started
This demonstration will use FlashDevelop, the Flex SDK 3.4 & Adobe Flash Player 10.1 Pre-release.

For Flash Player 10.1 pre-release you will need to download the Player Global SWC found at the bottom of the page.

Simple steps to get started, assuming you have Flex SDK installed somewhere, FlashDevelop running, and installed both the ActiveX and Plug-in versions of Flash Player 10.1; and that you have configured FlashDevelop to point to the proper FlexSDK directory:

Create a new AS3 Project with Preloader in FlashDevelop; I called it simply MultiTouch
Configure your project to target Flash Player 10
Copy the contents of the Player Global SWC Zip -- the file you want is playerglobal.swc at 296,145 bytes -- into your {project_root}/libs folder. This will give you auto-completion on the new objects.
Copy the same file playerglobal.swc to your {flex_sdk_home}/frameworks/libs/player/10 directory -- I am not sure if this is needed.. but it works

Testing Your Setup
The first, and most important step, to confirm you have installed everything correctly (drivers, OS, flash player, playerglobal.swc) is to check if the flash.ui.MultiTouch object is available, and then to see if you can specify your inputMode (either gestures or touchPoints) and finally to see how much simultaneous touchpoints your hardware has to offer.

Since tracing in FlashDevelop only works in debug mode, I created a TextField and added to the stage and printed out the information I wanted directly in that TextField... Here is the source:

PLAIN TEXT

Actionscript:

package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.text.TextField;
import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;
/**
* ...
* @author Martin Legris ( http://blog.martinlegris.com )
*/
public class Main extends Sprite
{
protected var _tf:TextField;
public function Main():void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}
private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
// entry point
_tf = new TextField();
_tf.width = stage.stageWidth;
_tf.height = stage.stageHeight;
_tf.mouseEnabled = false;
addChild(_tf);
Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
_tf.text = "Input Mode: " + Multitouch.inputMode + "\n";
_tf.appendText("Touch Points: " + Multitouch.maxTouchPoints + "\n");
_tf.appendText("Supports Touch Events: " + Multitouch.supportsTouchEvents + "\n");
}
}
}

You should get something like this:
Output of first MultiTouch SWF

It should read:
- inputMode: touchPoint - Touch Points: 4 -- can be 2 depending on hardware - Supports Touch Events: true

If you have something similar, this means success! You can now start coding!

Related posts (automatically generated):

Tutorial - Multi Touch in AS3 / Flash Player 10.1 - Part 2. TouchEvent & MouseEvent Sequences

Filed under: actionscript, as3, as3 tutorials, flash player 10.1, flashdevelop, flex sdk, multi-touch, touchscreen

11 Responses to “Tutorial - Multi Touch in AS3 / Flash Player 10.1 - Part 1. Setting Up”

Andre Dickson says:
This is exactly the tutorial I was looking for. I’m running a very similar setup: Windows 7 Home Premium 64-bit, and a Dell SX2210T Monitor. I’ve updated my drivers, have both the plugin and active X 10.1 Flash Players installed, and have copied the 10.1 playerglobal.swc as mentioned above. I’m also using FlashDevelop, however I’m using the 3.5 milestone release of the Flex SDK. Are you using the 3.4.1 stable build? The compiler is ok with using the Multitouch class but any code after the ‘Multitouch’ class reference does not run (runtime error, right?).

December 14th, 2009 at 11:57 pm
Martin Legris says:
@Andre,

Make sure you are running it in the right version of the player. When you install Flash Player 10.1 pre-release it doesn’t give you the stand-alone player. I have the stand-alone 10.1 player but an older version and I am not sure I am allowed to give it to anybody.

So make sure that your example is running inside of FlashDevelop and not in it’s own window, and that it is running on 10.1. Otherwise it will break when trying to execute anything that has to do with multi-touch. If you can’t figure it out email me. We can talk. I am open to helping you out; I don’t have much work right now..

December 15th, 2009 at 12:52 am
Andre Dickson says:
Thanks for the quick reply Martin. I now have everything working (at 4am, with work starting in 5 hours, wahoo!). I was originally using the standalone player, which I realized wasn’t right when it was showing ‘Flash Player 9′ in the title bar (doh!). Thanks for the tip. I attempted to set the project to ‘open in a tab’ within FlashDevelop earlier but wasn’t having any luck. To get the right results I wiped-out every instance of Flash Player, uninstalled the dead Flash Professional CS3 trial and FlashDevelop and started over clean. I’m a little disappointed that my new Dell multitouch monitor only supports 2 touch points. They should call it dual-touch. Thanks again for the article, and being so helpful.

December 15th, 2009 at 2:16 am
Felipe Botero says:
Well… i have tested it with the bamboo touch and pen, and it seems it doesnt work

December 20th, 2009 at 10:42 pm
Ken says:
Hi Martin,

Please help Felipe, he really need your help.

January 4th, 2010 at 10:57 pm
Stan says:
Thanks for this Martin!

January 21st, 2010 at 5:19 pm
JC says:
@Felipe

Maybe you already know this but for anybody who is wondering, it seems the Bamboo touch and pen is not supported.

http://theflashblog.com/?p=1678

February 2nd, 2010 at 12:56 pm
David says:
Help please! It’s 2:42 am and I’m still @ work, trying to setup my FlashDevelop project, but I still can’t access the flash.ui.Multitouch nor flash.ui.MultitouchInputMode object
Running Win7 64-bit Ultimate @ Dell SX2210T monitor with both Flash 10.1 plug-in/active x, Flex SDK 3.5 milestone release and globalplayer.swc in my project lib folder and Flex SDK/framework/libs/player/10 folder.
FlashDevelop is pointing to the directory where I unzipped the Flex SDK and my project is targetting Flash Player 10. What am I doing wrong?

February 15th, 2010 at 6:47 pm
Daniel says:
Hey, I know that this is for windows, and you say you don’t know anything about Mac, but I’m trying to get this to work on my MacBookPro, but I get the textfield saying: Supports Touch Events: false.

I’m using a multitouch macbookpro with snow leopard, and I was wondering if anyone knew if I needed to do anything different for OSX to make this work.

Thanks

February 22nd, 2010 at 12:32 pm
Og2t says:
@Daniel, are you targeting AIR2.0? I think it will only work there as Flash plug-in can’t yet receive touch events.

June 3rd, 2010 at 2:35 am
Raju says:
I can confirm that it worked for me with the AIR 2.0 beta on OS X Snow Leopard.

June 16th, 2010 at 4:07 am

Categories

Meta

Archives

martin's world

Ads by Google

12.13Tutorial - Multi Touch in AS3 / Flash Player 10.1 - Part 1. Setting Up

11 Responses to “Tutorial - Multi Touch in AS3 / Flash Player 10.1 - Part 1. Setting Up”

Leave a Reply