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

It’s not the devices, it’s the gaps

So now that the iPad craziness has blown over, want to comment on yet another disruptive product from Apple. This time we’re in a “tween” segment, or somewhere between your desktop/laptop, your mobile, your e-reader…. Wow, a lot of devices to carry right? And where does the iPad fit, or for that matter, where do any of your current devices fit in relationship to it?

There is a lot going on these days with companies abstracting the traditional PC experience away from devices to create targeted customer user experiences. Sometimes this is due to hardware restrictions in smaller underpowered devices (phones, e-readers), sometime it’s due to creating more portable entertainments platforms for folks to consume content with (netbooks, litl). The problem is, each of these devices meet only some of a customer’s needs at a premium price. Some customers don’t want a to use a PC for glance content, but may prefer the litl for it’s large format, channel content delivery. Some customers won’t read a book or watch a movie on their iPhone, but the iPad might be perfect for that. Some folks want to run Word or Blog, but prefer a keyboard rather than a tocuhscreen. So you have all these different devices that do these things at a different efficiency level. To many devices and too many segments/needs to serve.

In essence, it feels like the iPad will be a niche product, but falls far short of a convergence device. The good thing about it is that it will force the carriers to adopt more affordable data plans. It will also force the lower end devices like the Nook and the Kindle to become cheaper. Frankly, both these devices look overpriced compared to what you get for your $499 iPad. Either way it still feels like we’re in the days where you needed to carry your laptop, pda, mp3 player, and camera. Too many to devices to serve all your needs.

Nokia N900 – Two Paragraph Review

With Nokia jumping into Maemo for their future device offerings, there is certainly a lot at stake in terms of closing the UX gap between their competitors as well as enfranchising developers with an open and performance-able platform they can grow their Ovi store offerings on. And with the Nokia N900, they do not disappoint. The device is a huge leap forward in terms of usability and a pleasant device to use and develop for. Nokia used to throw around the term “mobile computer” when describing offerings like the N95 and the N97. This is the first device where this really seems to hold true. The update and firmware repositories in terms of both available content and frequency of updates has been superb. They are truly nimble in this way for the first time, a trend that must continue as they go forward.

One thing that sticks out is that this particular device still caters to the hacker, or maybe what was the early adpoter smart-phone users of the mid-2000’s. The folks who were okay with hacking, installing, tweaking etc… If they mature this platform with this device and bridge the learnings onto a future (and a little thinner 😉 ) mass-market offering, they have really positioned themselves well in the future. Bravo Nokia, great phone!

Ode to the Old School: Dial-up BBS’s

var FO = { movie:”rt_bbs.swf”, width:”500″, height:”400″, majorversion:”8″, build:”0″, bgcolor:”000000″, quality:”best” };
UFO.create(FO, “rt_bbs”);

Rob Toole.com requires the lastest version of the Flash Player. Please click the link to download the latest. Thank you.

I was cleaning out some of my old files from an archived hard-drive which is long gone with the computer it came with (original Apple G4 tower I think). This was in a folder called “Skunk-work” and was one of the first projects that I really started to get the hang of Actionscript. Coolest part is that it’s a throw back to my original computing experiences with my Commodore 64 and AT&T 386 PC.

I tell my 9 year old son how we used to use land-lines to dial in (we haven’t had one for half his life, no concept of the home phone number but he has had his own email address for a few years). We wouldn’t call in to an ISP to access the internet, but to a specific computer in someones house. We’d actually war-dial neighboring towns to discover these Bulletin Board Systems (BBS’) and play “games” that we’re all text and ASCII based. He’s both interested and incredulous at this concept, and I explain that we would spend just as much time (maybe more with the slow connection) then on the computer as we do now when there really wasn’t that much to do. I keep waiting for him to tell me how lame it must of been, but I think he gets it and would have been as interested as I was back then. It was all about the pursuit and it still is today even with a million times the resources.

Wonder what things will be like for his kids in 20 years?

Forum Nokia Champion

Is this the year of mobile? It is for me!

I’ve been selected as a Forum Nokia Champion. To paraphrase “Forum Nokia Champions earn recognition for having outstanding expertise in certain Forum Nokia-related areas, participating in various online and offline activities, and sharing and showcasing their knowledge with other Forum Nokia members”. This is a tremendous honor and I am pleased to be associated with such an elite program.

With the launch of the Ovi publishing platform coming soon, I expect Nokia to make big moves in retaining their status as leaders and innovators in mobile. If you’re a publisher, be sure and sign up today.

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.

I’m Speaking at Mobile Connect Conference on Nokia WRT

For those who are interested or in the Bay Area, I just found out that I’ve been chosen to speak on Nokia Web RunTime at a new convention that is colocated with SDWest next month called Mobile Connect. Details are here:

SESSION TYPE:

90-minute Conference Session, to be held Thursday, March 12th, 2009, 11:15am in the Santa Clara Convention Center

SESSION TRACK:

Mobile Development & Technologies
You know what your stakeholders want; now it’s time to implement it. Whether you need to determine coding standards or choose technology, this track will help you navigate the last few phases of the mobile software development lifecycle. With courses on programming styles, updates on the latest languages, core build and release techniques, maintenance guidelines and more, you’ll find advice and information on building, deploying and maintaining mobile software in the real world.

SESSION DESCRIPTION:

Nokia Web Runtime Widgets
This session will cover an overview of the benefits and features of Nokia’s Web Runtime technology including the recently announced platform services allowing for device specific access to features including the calendar, contacts, messaging, audio, video, images, GPS, and camera, via JavaScript APIs. The session will feature both best practices in widget development as well as an end-to-end solution demonstration in creating a real functional widget.

SESSION SPEAKER:

Rob Toole
Rob Toole has over a decade of experience in bringing rich and engaging experiences to both the desktop and mobile space with companies including, ESPN, Medtronic, and Fidelity Investments. As a recognized community expert in the mobile technology space, Rob has led sessions, product demos, and seminars as a guest for high-profile event organizers such as Adobe, Nokia, and Mobile Monday Boston.

Very excited about this opportunity and hope to see you there!

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.