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

March 4th, 2010 rob

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.

1
2
3
4
5
6
7
//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.

1
2
3
4
5
6
7
//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!

Blame the iPhone: ESPN.com dumps almost all Flash

January 5th, 2009 rob

espn_redsign.png

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.

I’m Speaking at Harvard

November 14th, 2008 rob

harvard.jpg

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

October 15th, 2008 rob

flash_sl.png

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.

NFL Football Extra offers live Flash Video streaming

September 14th, 2008 rob

football.png

I just checked out the NFL’s new Sunday Night Football extra site. The Flash-based web-app includes interactive extras such as alternative camera angles, picture-in-picture technology, in-game highlights, live statistics, and interactivity. The video quality is okay, not great though, and I’m seeing a little bit of performance issues which is not surprising with 5 simultaneous streams. Their ad model is interesting… all the cameras switch off in commercial and a banner-ad pops-up that matched the video. This allows users to take action on what they see as they see it.

This trumps Silverlight’s coverage of the Olympics in most ways. Particularly with the in-game interaction and the fact you can actually hear the commentators, not to mention fullscreen support (Silverlight didn’t offer it, which was ridiculous). Doubt I’d actually watch it though… I use my Miglia TVMiniHD to watch to watch my games in HD on my Mac already, but I’d probably give it a shot if I was traveling.

Playyoo Game Creator: Beachball of Death

January 14th, 2008 rob

playoo.png

Here’s a link to a game my son Bobby and I created called “Beachball of Death”. Mac users, especially early Leopard adopters, will know all too well about this frustrating phenomenon. You’re hip deep into a project, have been lax on saving, and bam… it rears it’s spinning ugly head for all eterninty (or until you force quit)… Anyway, here’s our quick description of the game:

    Don’t you hate it when the beachball of death ruins your day? Play now to get even on Mac OS X 10.5!

While this is very tongue-in-cheek and the game is kind of lame, it clearly demostrates the power of access and general enablement that Playyoo is creating for the everyday gamer with an idea. Specifically, Playyoo’s Flex powered Game Creator allows users to create their own simple games in six different generic gaming scenarios. While we chose the “Pong” genre, there is a variety of puzzles and other game formats to choose from. Our example took literally a half-hour from idea (it was all his, he’s already scarred by the beachball at a ripe 8 years old) to viewing and playing on a mobile phone.

playyoo_gc_small.png

The interface does a good job letting the user know what steps to follow in order to complete the game, however, we did come across a few instances where the screen went all white untill we clicked blindly on the page (state management in Flex?). All in all, it’s amazing that this engine can publish reliable Flash Lite compatible swf content through a web interface. The business model is also sound as well as you can only gain access to your content, whether created with Game Creator or uploaded, through Playyoo via your mobile’s net connection leaving all sorts of advertising opportunties (see $$$). Now the flash developer in me finds this archaic… where’s my swf??? But to the everday user they get what they want which is access to great content. It’s also an interesting solution to the rights management and piracy concerns I’ve heard rumblings about in the Flash Lite community as of late.

Lastly, a reminder of the contest they have running with big cash prizes. You have up until the 15th of February 2008 to enter your games in the contest and every game you make in Game Creator or otherwise is automatically entered in the contest. So get cranking!

Flip4Mac Silverlight Export

December 28th, 2007 rob

sl.png

Looks like Microsoft haven’t taken their eye off the ball in terms of video delivery online. The latest Flip4Mac update contains a new export option allowing you to publish your content with skinned Silverlight controls built in. This is going to particularly enticing for the folks who want an easy to use youTube like interface while still staying with wmv. Granted, in order to do exports you still need to buy Flip4mac Pro as well as Quicktime Pro, both for $29 each. Still it’s a clear shot across the bow to users of Flash encoded video, particularly to those on the Mac.

As for Silverlight, I still can’t get it to install on my Macbook after two attempts. Everytime I do and restart my browser I get the same “Get Microsoft Silverlight” message. Not willing to chase this down yet, nor would any casual person browsing the web. Sorry Silverlight, you have a long way to go before you become a legitimate RIA solution in my book.

Adobe Air Tour: Boston Stop

August 29th, 2007 rob

08242007.jpg

I was able to sneak out of work last Friday and check out the Adobe AIR tour when it came to Boston. The event was well attended and featured some interesting topics, all the Red Bull you could drink (I was told recently by an employee that they only recommend two in a day, good to know but much too late), and access to the likes of industry heavies like Ted Patrick, and Mike Chambers to name a few.

The best part of the event though was to be get some face time with the people you read about but don’t get to see that often. One in particular was former Bostonian Chuck Freedman who was nice enough to give me a personal demo of his Flex and AIR based VOIP app, Ribbit after I missed his session (thanks Chuck!). Ribbit could potentially be an honest to goodness “killer app” for Flex and rich application space in general. Obviously legacy VOIP players like Vonage and Skype have been on the block for a while but with them you were dealing with their app, their hardware, their login requirements, their terms of use, etc…. With Ribbit, think of all the different contextual uses an app like this has for new and existing business solutions on the web. You want to add real-time support or sales assistance to your site, seamlessly designed and integrated? This really raises the bar on the existing IRC chat-based solutions I’ve seen when compared with this. There is obviously some pretty serious back-end support needed for this to work which I’m sure will come out when it goes to beta, but it will be real interesting to see where this product goes, which I’m thinking will be pretty far.

Boston losing grip as this year’s “City of Flash”

April 8th, 2007 rob

bosflash.jpg

Looks like Beantown isn’t going to be the ‘Flash hub’ this year based on a few recent developments.

First DX3 is cancelled. I first caught wind of the from Ryan Stewart’s twitterings and saw this confirmed on their website yesterday. This is a real bummer to me as I had opted to go to this instead of Flash Forward this year because of the broad range of topics. I was really looking forward to getting the skinny on WPF from some of the experts in particular. I think the folks at Lynda.com were a little bit too ambitious on scale and scope of a conference like this. I think it was a little ahead of it’s time as a concept and overpriced as well. I hope it will manifest somewhere later on down the road as Desktop RIA’s evolve and when or if Microsoft’s WPF actually becomes competition for Adobe’s Apollo. In the meantime, I guess I’m going to Flash Forward.

360Flex is also back but not in Boston as originally rumored. This time it’ll be on Seattle, the city on the other corner of the US. So I’m looking at a seven hour flight to hit that one. Can’t say I’m too bummed though as Seattle is one of the last major US cities I haven’t been to. It’s $360 to go (I see a theme here) which is still a bargain for what is offered.

So Boston will have to wait for some more of these big cons to get in their backyard. In the meantime I’ll be racking up some frequent flier miles.

Instant Messaging to Myself

March 23rd, 2007 rob

twitter.png

I’ve been dabbling with Twitter lately and I have to admit it’s pretty cool. Though I haven’t experienced the obsession that some folk have experienced in whimsically updating moments of my life, a couple of things come to mind in trying it out.

First is who am I sending this message to? You can argue that it isn’t a messaging platform, but since there is a friends view where you can track your pals postings, it becomes one by itself. I’ve seen people reacting to each other post by starting with an @ (@mypal) with thir posts. Kind of like real short email, or semi-instant messaging since you don’t know when your friend will see your message and respond.

Second if you aren’t sending a message here and are instead treating this like a mini-blog post, are you writing messages to yourself? I find that boring missives don’t have any place in my actual blog but Twitter kind of lends itself to this function. I routinely see posts like “Eating breakfast” and “Work”. What’s the point in that? If anything I try to at least make what I post in twitter (and here) semi-interesting. After all, my friends are reading it.

Still it’s cool, it’s just interesting to see where this fits in with the ever-growing amount of avenues one can take with self-expression and social networking on the web. It comes complete with an API so you can manipulate and customize through Flex, Flash, Apollo, etc… ways you can report you and your friends postings to your hearts desire. You can check out my Twitter badge to the right.

So now I’ll go to Twitter and simply post “Blogging”.