Touch Gestures with Adobe Flex, Adobe Air, and the iPhone

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.

Adobe Flex

Air 2.0 Beta

Air 2.0 SDK

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. 😉

You can download the AIR project for use in Flex here!

Advertisement

Submit your mobile app to the MAX Awards

So your a mobile software developer/publisher working in Flash Lite and want to go to Adobe MAX, the leading conference in rich internet applications, creative and design solutions, and killer parties. But you live really far away and need a little help and incentive to get there. Well guess what? If you submit your mobile application you have a chance to be selected as a finalist and get a free conference pass!

I’m an industry judge for mobile and devices and expect to see some high-quality offerings like I have and years past. Please enter your app, all entries will be considered so don’t hold back, deadline is July 31st. I’ve heard on the Twitter-verse there are going to some game-changing announcements concerning mobile so this is not one to miss.

Don’t miss the party! Enter your app here.

Podcast: Live from 360|iDev

I recorded an onsite podcast from the 360|iDev conference with some great folks from the Flash Lite and mobile community. Emmanuelle Cipollini from Barefoot Software, James Eberhardt of Echo Mobile, and Dave Yang of swfoo joined me for a quick talk concerning this conference, Flash, and transitioning from Flash to the iPhone.

You can subscribe via iTunes here.

Download the audio file here.

I’ll be posting a rave review on the conference itself later.

Adobe Community Expert

Some great news. I’ve recently been designated as an Adobe Community Expert for Mobile and Devices. This is a real motivator and after holding the torch for Flash Lite for a number years and it really demonstrates Adobe’s willingness to reward and recognize folks who contribute to the community. There are some great perks that go along with this and I’d encourage any lurkers out there to contribute since it does reap rewards at times. One easy way to get started is go register yourself in the Adobe Groups section and look for stuff in your area. One thing to note, the community aspect of Adobe’s offerings is much improved thanks to the efforts of Rachel Luxemburg.

There’s some exciting things going on with Flash Lite these days at Mobile World Congress, I’ll be covering them with some future posts. But in general look for some spirited content coming from me focusing specifically on Flash Lite and Open Screen Project in the near future.

Aptana tools for Nokia Web Runtime on the money

Aptana has released a suite of plug-ins a few weeks ago supporting Nokia Web Runtime. I was able to load it into Eclipse on my Macbook easily enough and give it a whirl, though they offer their own IDE for those on PC. It’s a free donwload with a 30-day trial available here.

To set some expectations, this tool is not a substitute for the S60 Emulator which gives a more real scenario of how your widget will perform. But what it does do it give you a great idea of how all of your AJAX and DHtml will perform in real-time. I remember testing out some widgets recently both for business and for a talk I gave for Nokia back in October, and it was tedious using a browser for crude tests, let alone constant installs to the phone and S60 emulator. There were security issues as well as CSS formatting inconsistencies, not to mention certain Javascript functions that simply were not supported the same way you’d see it in a conventional browser. This tool really bridges the gap in those instances and I wish I had it months ago. Would have saved me loads of time.

As usual, your hardware will still give you the ultimate watermark of whether or not your code works in the runtime. Other things to note is that it supports a variety of Nokia handsets with different screen sizes, Flash Lite embeds, packaging and deployment to Bluetooth devices, as well as soft-key support. No 4-way navigation, though this is where the emulator comes in. Wonder how this will affect touch as more S60 5th Edition devices entire the product line.

Kudos to the Nokia WRT team for getting another useful tool out for widget developers

2008 Professional Laundry List

2008 is over, thank god. But along with an ailing economy and painful marketplace came a lot of good things. So anyways, here’s my year in review:

Launched a number of rich applications with my employer Fidelity that I’m very proud of. Look forward to doing that in 2009 as well, hope to continue to raise the bar.

I spoke at Harvard University, led a lively talk with staff and the user group organizers.

Was a speaker at a Forum Nokia event with several colleagues in the industry.

Created and produced a podcast series with friends from BAMaDUG to critical acclaim.

Made dozens of contacts in the mobile industry at meetups and conferences such as Mobile Internet World, Mobile Monday and MiTX.

Founded and launched a social venture (still in stealth mode bit will be public soon).

Participated in beta testing for several Adobe products, under NDA so no comment 🙂

Broke down and bought an iPhone… after the intimate talk I saw by Phil Schiller (who’s doing the final MacWorld keynote this week in place of Steve Jobs) I couldn’t help myself. The developer tools are fantastic and I’ve already hit the ground running in getting some apps built. Look for that in Q1 this year.

I’m looking forward to what 2009 brings and have a good head of steam for the coming year. I’m excited to be booked for Flash on the Beach in Miami as well Flash on Tap in Boston. I’ll continue finishing my studies at Suffolk and look forward to finishing my MBA and will be a regular at industry events as usual. Look forward to seeing you all.

BAMaDUG Episode 3 podcast available

Back again for more punishment, we recorded another podcast in Harvard Square the other night. Great conversation and good atmosphere. Here’s the low down:

Members Rob Toole, Max Antinori, Scott Janousek, Ira Hochman, and Alessandro Pace give a recap of the MAX conference, cover new CS4 features, and the release of the Nokia N97. Recorded on location at Cambridge 1 in Cambridge, MA.

Subscribe via iTunes here!

Download the audio file here!

BAMaDUG Podcast – Episode 2 available

Once again we have another interesting podcast with an all-star lineup recorded live from the Asgard Pub in Cambridge, MA. We went a little more guerilla style for this using my Nokia N-95 8GB but the quality is pretty good considering we were in a very loud and crowded bar.

Some Subjects Covered:

The recent Forum Nokia Tech Day
Nokia 5800 XpressMusic
S60 5th Edition and S60 Platform Services
Adobe CS4 and Flash Player 10 launch
Flash Lite/Mobile Sessions at MAX North America

Special thanks to Alessandro Pace from Biskero, James Talbot from Adobe, and Max Antoneri. Look for the next podcast coming live from MAX 2008 in San Francisco.

Get and subscribe to the podcast from iTunes here.

Download the .m4a file here.

Silverlight 2 and Flash 10 release has the fur flying

So they just happened to release Silverlight and Flash updates on the same day… just some sort of strange and mystical coincidence right? Wrong. And man, the gloves have been off on the Twitter front. Here’s a light sample of the back and forth from two high profile product owners Ted Patrick from Adobe and Scott Barnes from Microsoft on Twitter late last night:

Ted Patrick: @mossyblog I bet we get more installs of SL 1&2 in 5 Days; Check

Scott Barnes: @adobeted you don’t need installs remember, you’re on 98% of machines”, hahahaha 🙂

Ted Patrick: @mossyblog Flash 10 is crushing your head bro! WOOOOOOT

Scott Barnes: @adobeted Adobe is scared… looking to bolster their release on the back of Microsoft’s, smack talking like it’s an instant success? *sigh* newbies.

Ted Patrick: @mossyblog barnes you have no clue. Unleash the hounds.

And some more of this… you get the picture.

Granted you can say this is all in good fun, but believe me it isn’t. It’s as serious as it gets and it’s because of fear. On the Adobe side, it’s the fear of losing what they have, which is a huge marketshare. On the Microsoft side, it’s the fear of never getting there, which judging by things presently, they never will. That’s the only way to explain why two grown men will start smack talking publicy over their products in the wee hours of the night. And I have to say as a customer to both compaines, it kind of throws me off to some degree.

Frankly, Barnes can be right about a lot of things, in fact he’s clearly a sharp guy. But he’s mouthy and always on the defensive which chips away his credibility. He already had a Twitter spat with Michael Arrington this week and has spouted his righteuosness in the matter (accusing Robert Scoble as being responsibile as well? huh?) ever since. I guess I’m just surprised when Adobe folks allow themselves get drawn into the fight that he’s clearly always looking for.

So my advice here is you can argue this all you want while the market will determine who succeeds. Let’s put the smack talk away and let the numbers and products speak for themsleves.

Photoshop.com Mobile announced

What do you do when no one takes your mobile product platform and creates a truly useful, mass market focused, standalone application? Create your own and tie it into one of your own existing internet services like Photoshop.com! According to Bill Perry, the Flash Lite application will allow users to upload, share, and view photos via supported mobile supported devices. Read more about it here.

This is cool, no doubt , however far from a killer app. Especially since sharing your photos from a mobile phone to services such as Flickr, Ovi, insert your cloud based photo service here, has been around and easy for a while now. I think Nokia really has it right with integrating this with the camera application directly.

The other part of this story (and the real win in my opinion) is that they are releasing it first to non-typical Flash Lite devices such as Palm and Windows Mobile (instead of the old faithful S60 devices). Open Screen Project’s main initiative is to get on as many screens/devices as possible. And the fact that they’re adding Palm show’s they’re putting their money where their mouth is.

Now if the devices group can use this as a momentum piece and build some more tie-in’s to their own products or even third-party services, I think they can really go places. It’s an excellent strategy in creating a viable model that other companies can mimic.