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

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?

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.

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.

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!

I’m Speaking at Harvard

There’s something I thought I’d never say. Yup, little old me is very excited to be addressing some of Harvard University’s faculty and staff next week at this months’ Harvard Flash User Group Meeting. The details are below:

Fidelity Investments has been extremely successful in defining, architecting, and building a variety of industry leading and award-winning rich media experiences for our customer base. The session will provide an overview of how technologies are identified and developed for maximum flexibility and scalability from a product life-cycle management perspective. Several real world examples will be showcased of how Fidelity has used Flash technology to drive business, educate our customers, and extend our brand across mobile and desktop devices. Come see how interesting and exciting even financial services can be when you add a touch of Flash.

I’ll admit, I avoid “The People’s Republic” most of the time and prefer Boston proper but I’m really look forward to this. Especially since my brother “Unca Mike” is currently a Harvard student. I believe it’s somewhat open to the public so check their policies for details if you’d like to come.

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.

Boston Flash Mobile Group Podcast

Something occurred to me when Alessandro notified the Boston Adobe Mobile and Devices User Group meeting of an upcoming meet-up at a local bar. In the past there was always a lot of great conversation had, wouldn’t it be great to capture that and offer it to the world-wide community? Well that’s what we did last night at the Green Briar Pub in Brighton, Mass. Here’s a loose list of subject matter:

– Verizon Dashboard

– Adobe Open Screen Project

– Various others: Nokia as an internet company, Flash on the iPhone, Kunerlite

Keep in mind that this is the first podcast I’ve ever produced, MC’d, etc.. so I think we’ll only do better next time we do this, hopefully soon!

Subscribe Via iTunes Here:

Get the actual audio File here:

Adobe Open Screen Project; A Welcome Unity

So the inevitable convergence is happening with Open Screen Project. The program is dedicated to ensuring a consistent rich Internet experience across a broad range of digital screens and form factors including mobile phones, consumer electronics, televisions and personal computers. This move solves quite a bit of the fragmentation issues that Flash was facing across both desktop and device platforms and more clearly indicates how Adobe Integrated Runtime (AIR) will play into the mobile space.

The other big news is that Flash will no longer require licensing. So there will be a more compelling reason for carriers and handset manufacturers to develop and include it in their offerings (are you listening Apple?).

I see two big contributing factors that has led to this program. One was Microsoft Silverlight’s emergence as a player outside the Windows Mobile space on S60, though it’s important to note that Silverlight is indeed a plug-in technology and not a run-time as of right now. Another was Adobe’s Mobile and Devices Business Unit merge with its Experience and Technology group. The re-org obviously positioned them tactically to enact a strategy just like this one where before it would have posed quite a few challenges.

All in all, I see this move as good for developers and consumer alike.