Lee Brimelow just posted a great tutorial illustrating how easy it is to make multitouch applications with both Flash CS5, AIR 2.0, and Flash 10.1. But what it you’re a Flex guy and don’t play well with (or have) Flash? And what if you don’t have a touch interface that supports gesutures? Well if you have an iPhone or iPod touch here’s a workaround that will allow you to test your gesture based air apps.
Here’s what you need:
- Apple iPhone/Ipod Touch
- iTap ($3.99 iTunes App store) There are plenty of mouse apps out there but this one was the only one I could find that supports gestures which is indeed different than multitouch. Just having multitouch won’t do it.
As I said, in my example we’re using Flex. Open it up and create a new AIR project. Now since we’re doing this all in Actionscript we’re going to create a new Actionscript file in our project and give it the same name as the project/MXML file that was created as our default application file. Now, right click this new Actionscript file and make it the the default application and delete your default MXML file. Now you’re ready to code.
The code from Lee’s Flash version ported over pretty cleanly so I’ll only outline the differences, please see Lee’s tutorial for the breakdown of how the gesture listeners work. The main difference in Lee’s version and mine are the squares and the the way we setup the stage parameters.
The reference to stage is a bit different since Flex doesn’t pass the NativeWindow class to AIR automatically the way it does with Flash. If you don’t use NativeWindow your app will be blank and you won’t see anything. We set up the window this way.
//Set up fullscreen, need Native Window for Air using Flex Actionscript Project var mainWindow : NativeWindow = new NativeWindow( new NativeWindowInitOptions() ); mainWindow.activate(); mainWindow.stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE; mainWindow.stage.scaleMode = StageScaleMode.NO_SCALE; mainWindow.stage.align = StageAlign.TOP_LEFT;
The squares are simple, a quick drawing API snippet to draw them instead of using a MovieClip from the library in Flash.
//Draw a blue square with white stroke var square:Sprite = new Sprite(); square.graphics.lineStyle(8, 0xFFFFFF, 1, false, CapsStyle.SQUARE, JointStyle.MITER); square.graphics.beginFill(0x0000FF, .5); square.graphics.drawRect(0,0,200,200); square.graphics.endFill();
Now when your app is complete, you’ll want to test it. Load up the iTap app on your iPhone and free server software on your PC/Mac to use the multi-touch functionality like my son Bob is demonstrating at the top of this post (he’s pretty sharp for 10, already know how to compile apps in Flex.)
With AIR for mobile on the horizon for touch devices it’s pretty exciting how Adobe has embraced multitouch and gestures. Thanks to Lee for the inspiration and code for poor-man’s touch gestures testing. 😉
RobToole.com 