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

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.

360|iDev – I’m totally there!

I’m really excited about attending a great community driven conference at Ebay’s headquarters in San Jose next month called 360|iDev. I really saw this as a tremendous opportunity to gain some business insight and network as well as well a pick up some general iPhone development skills in the red-hot iPhone developer market. The price is unbeatable when compared with some 3-day workshops I’ve seen recently at over $2000. Click the banner above or to the right for details and get registered before the price goes up.

Some other folks from Beantown will be out there as well, both Scott Janousek and Keith Peters will be presenting which means after hours mayhem for sure. See you at the hotel bar.

Race against Runkeeper and Sports Tracker

In starting to get acquainted with my new iPhone, I’ve been testing out some of the new location aware apps offered on the App store. One that caught my eye was Runkeeper. RunKeeper tracks workouts and tracks data such as time and location allowing you to build a diary and share your progress with your friends. I had been using Nokia Sports Tracker on and off for the last year and had been pretty happy with it so I decided to put my Nokia N95 in one pocket and my iPhone 3G in another and see how they matched up. Let the battle begin 🙂

RunKeeper – My Tracked Workout

Newcomer first…. RunKeeper is pretty sweet. It does a great job allowing you to see your stored workouts on the device itself and even will leverage maps so you can see your mile markers and route. This is far beyond what Sports Tracker offers in the device, though ST does offer a lot more general data points. The RunKeeper online portal is a little primative but cool allowing you to post your workouts into social platforms such as Facebook and the like. From what I hear they are improving this as we speak.



Cons include some known issues that are being worked out. First, the touch interface makes it pretty easy to press something by accident when you’re stowing the handset, not their fault but a usability issue nonetheless. I did experience one bug (pictured above) that somehow had me running to Burlington, MA and back (40 something miles!) in under 20 minutes. I think this was caused by the low battery message. This is a killer since you simply can’t just do your run over and disappointing to find that after all that work you don’t have your data. But other than this anomoly it has worked for everytime since.

Nokia Sports Tracker – My Tracked Workout

Sports Tracker is still a great application that you can use with your compatible Nokia device. The socialization piece on the website is top notch allowing you to look at a world map and see other workouts in your area as well as post pictures from your workout. It also allows you to share your progress via widgets into other platforms.

Now the bad. In the same run head to head you can see that my N95 did not pick up the GPS till I was well into my run. This is not a software issue so to say since the built in GPS on this devices takes a notoriously long time to pick up location, but still not cool. Also the visualization on handset is terrible compared to RunKeeper. Strange that they are strong on the desktop and weak on the device here.

In closing, it’s important to note that Sportstracker is free while RunKeeper is not, at least for the premium version which is $9.99. You can also use a free version of RunKeeper which I used for the demo, but you’ll get hit with ads. I did end up buying the full version, but I think there needs to be a few more differentiators other than ads to justify the price here. As for Sports Tracker, it’s hard to tell if it’s more than skunkwork for Nokia as it’s been in beta for a while. It’s a great offering however and I wouldn’t be surprised to see them evolve it someday as they roll out more devices and maybe roll it into their Ovi strategy.

Who wins? They are both great and both specific to the handset, so depending on what you own (Nokia, iPhone) give them a try, you won’t be disappointed.

Blame the iPhone: ESPN.com dumps almost all Flash

I bet some of you are sports fans and have already seen ESPN.com’s new layout for their website. Design wise, a huge leap forward, still very rich and engaging and much easier to navigate. But there is something markedly different here. What you ask? Well the only thing left on it that’s still Flash based are the banner ads and video players. This is a huge departure from the old design which heavily relied on all sorts of widgets and small rich applications to visualize everything from real-time data such as game scores, to player stats. Now they seem to have replaced most of this with DHtml and Ajax. And it works beautifully.

In some ways this is a win for Adobe since if ESPN still picks them to ditribute their enomormous ammount of programming they clearly still have a firm grip on video distribution online (The video does look stunning). Yet interactive features that used to live inside flash such as search, comments, and stuff like star ratings are all outside the swf, just as other video rich sites like Hulu does. ESPN.com used to be a real mantle piece for Flash, and I really think the iPhone’s lack of support has had some hand in leading them to this approach. It’s smart in a lot of ways because you’re not plug-in dependent and only rely on the browser to render the bulk of your content. One thing I have to note as well is that now I get faster load times and less spinning beach balls on my Mac which points to better all around performance.

I love Flash and Adobe gained a lot of ground with MX 2004 in getting it to be looked at as a real application solution rather than an animation toy. Unless they continue to innovate, make Flash even more ubiquitous on even more platforms, and get performance better than ever, they may become a banner ad and artists tool for good someday.

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.

It took Apple SVP Phil Schiller to convince me on the iPhone

I had the opportunity to go back to my alma mater Boston College to go see Phil Schiller speak yesterday. Phil graduated from BC in 1982 and is Senior Vice President of Worldwide Product Marketing, Apple Inc. Something tells me Phil was also in town for the BC-Notre Dame football game this weekend as well, but I digress.

In a nutshell, Phil’s presentation was excellent. Since it was mostly educators there, Phil didn’t try and spin a elearning context to Apple’s product, but he did touch on how the iPhone was changing everyone’s (particularly BC students) lives. Whether he was trying to sell the crowd on the iPhone or not, he got me. I’d been really thinking about getting one lately, particularly after looking at the SDK. The big epiphany for me was his emphasis on software being the most innovative thing driving the iPhone. The cell-phone industry had traditionally been so centered on hardware first and software last. Apple saw an opportunity here and entered the mobile market positioning the iPhone as a high-end device which was all about killer apps. And yes the iPhone as a device is still sexy, but lacks in camera, removable storage, etc… What I’ve realized recently is… who cares? Software is king and really allows for the fastest path to innovation, and who’s better at software than Apple?

Of the five questions asked after the talk, I asked him directly about Flash on the iPhone. As an aside Phil told me interestingly enough that they bought Flash will he was at Macromedia years ago over Christmas since they knew Microsoft would be on to it any day. But I got the vanilla Steve Jobs answer of “legacy video player, performance hog, not built for touch” etc… I could have pushed him on this here since all those answers are kind of a cop-out. There’s clearly an angle with Flash undermining their service delivery model for software. But there it is… that’s about as close as you can get to asking that same question to the Jobs man himself.

Don’t be surprised if you see an iPhone up in my banner soon.

Skyfire Makes Mobile Browsing Better

I got on the beta for Skyfire for S60 devices and after trying it out, it’s pretty impressive. This is huge; I could actually get the Flash 9 elements on my website for the time on my mobile phone. Wonder if they are using some sort of re-writing technology for that. Skyfire really in some ways trumps other mobile browsers with Flash 9, Quicktime, and other proprietary plugin support. Performance was decent on my N95 8gb though I did experience a crash or two, but that’s why it’s still in beta right?

A couple of annoying things about it. It requires you to put in your email and password every time you use it. So if you mis-type or your connection is flaky you get booted out. Not cool and not a great experience for a beta. Since it’s supposed to stay free, hopefully the authentication part of it will be automatic or go away in future releases.

So how does it measure up against the pre-installed Nokia Browser or the iPhones Apple’s Safari? Pretty good. The product borrows Steve Jobs line as being “the real web” on your handset, and in many ways it is. But Safari really beats it in terms of performance and usability so far. I’d point out that it sees to use a similar zooming method in rendering and rasterizing portions of web pages like Safari does. I’m biased toward the Nokia browser which is really due for an update, but we’ll see where that product evolves going forward.

All in all, I still find mobile browsing awkward in general. It’s a combination of UI issues, IA challenges, and a lack of proper screen real-estate that holds things back in my book. I still prefer Mippin as a portal for most of my news and general web browsing. But I hope to see Skyfire out of beta and out there on more mobiles going forward.

Samsung to license Apple’s Safari Browser?

Let me get this straight.

According to Engadget Samsung just announced the SGH-L870, a Symbian device which includes… wait for it… the Safari mobile browser. Safari is based on Webkit just like numerous other browsers, including the S60 Browser.

If true, this represents a significant effort by Apple to break into new segments of the market where they have lacked presence on mobile hardware other then the iPhone. This would be a smart move as it’s clearly no longer a 2-3 player desktop only game (Mac, Windows, Linux) for software platforms as mobile platforms continue to gain marketshare. Not to mention the Safari browser has considerable name and brand props that the S60 Browser lacks as I went over in this post.

But sorry, I just don’t buy this. I’m going out on a limb and calling this news as lost in translation. It just is too unlike Apple and I just don’t see Symbian playing nice with another Web-kit browser when they already offer a great one, which by the way supports video and Flash where Safari mobile does not.

Boston Symbian Event

An Evening with S60 lands in Boston on Thursday June 5th from 8 PM to 10:30 PM at The Living Room. This all part of Dan Shugrue’s grass-roots marketing campaign to help get the word out to the general population on how open and cool S60 is. There is also the S60 Ambassador program for folks who are looking to enfranchise the public in return for some free Nokia product and accessories.

Register here.

In other S60 news, AllAboutSymbian has released their latest podcast touching on N-Gage, Maps, and Apple’s impending 3G iPhone release. I’ve been listening to Rafe, Ewan, Stefan, and Steve for awhile now and this podcast series is a must listen for anyone into Symbian and mobile in general.