Multi-touch

Updates abound!

 

Last week Adobe updated AIR to version 2.7. It seems like it was just yesterday that AIR 2.6 was released (actually it was in April). Hopefully by now your Android devices have all been updated, if not head over to the Android Market and do it now.

Some of the key points for mobile developers are:

Enhanced rendering for iOS: AIR apps for iOS render up to 4x faster in CPU mode.  This change will improve the performance of many AIR for iOS apps, including those built with the Flex framework.  Watch the performance improvements

Faster development time for iOS applications: Developers can now debug and build iOS applications faster than with previous versions using a new mode available within the AIR Developer Tool (ADT). During the development of an application, developers can now choose to use “interpreter mode” to streamline the testing and debugging development cycle.

AIR installation on SD cards for Android devices: This feature allows end users to install or move the AIR runtime onto the SD cards within their Android devices so they can free up storage space on the phone.

To learn more head over to: http://blogs.adobe.com/

Flex SDK and Flash Builder updates available – adds iOS and BlackBerry PlayBook support

Flash Builder 4.5.1 includes Flex 4.5.1 SDK, AIR 2.6 SDK and the updated iOS Packager that provides for great performance of Flex and ActionScript applications on iPad, iPhone and iPod Touch devices. So you will need to manually overlay AIR 2.7 on your version of Flash Builder. The same will hold true for Flash Professional. Learn more.

Flash Builder 4.5.1 also includes RIM’s plug-in for packaging applications for the BlackBerry PlayBook (requiresBlackBerry Tablet OS SDK).

BlackBerry Tablet OS v1.0.6 Update: AIR 2.7 and Flash 10.3

This latest version of the BlackBerry Tablet OS includes support for Adobe® Flash® 10.3 and support for Adobe® AIR® 2.7 software was just push OTA (over the air). The various SDKs from BlackBerry have also been updated. Learn more.

 

Designing Great Mobile Apps

I had the extreme pleasure of speaking at the recent 360|Flex Denver conference. The conference was incredibly well done, John, Nicole, and their assistants did a fantastic job!

Besides working on the mobile apps for the show ( we are still trying to figure out the session survey upload issues), I presented on “Designing Great Mobile Apps” on Tuesday afternoon. I had a lot of fun giving the presentation, even with two Adobe evangelists and one Adobe product manager in attendance (and the great Dee Sadler as well)…

I hope these slides are useful, the session was recorded by the folks at ZaaLabs, so I will let you know when it is ready. Please feel free to ping with questions or comments.

Now go build something!

[Update]

If you are interested in some resources on mobile design I would also suggest they following books:

Integrating maps into your mobile application

For many mobile applications, having some form a location-based capability is a requirement. This article will show how you can add a mapping solution to your mobile app. Most of the major map providers (Google, Yahoo, MapQuest, and Microsoft) provide ActionScript solutions that you can easily incorporate into project. Unfortunately, none of the currently available are designed for touch.

Recently, I developed the attendee guide for the recent 360|Flex East conference, and needed to add a map of the conference location, along with nearby restaurants. The application was being developed using Flash Professional CS5 (with AIR for Android extension), as the Flex 4.5 mobile framework was not yet available. My first attempt was to use the existing swc from Google. I had used their APIs before, and was familiar with the setup.

It took almost no effort to integrate the latest swc and have a working Google Map in my AIR for Android application. But there were issues to deal with…

The SWC version

 

One of the first issues I encountered was the default map controls were not optimized for touch. I had a feeling that this would be the case. Also the initialization time for the component was extremely long (30 seconds or more). I decided to address the load time first, since if I couldn’t bring up the map quickly, I would need to find a different solution. Looking at the code revealed no clues as to where I might be able to streamline the initialization. One of the issues of the long load time was there was no feedback given to the user while the component performed its initialization. Once the component was added to the stage, it assumed the top most layer and you could not overlay any elements (like a loading spinner). The screen would just show a grey rectangle where the map would be. Not the best user experience.

Since there was nothing I could do while the map did it’s thing, I decided to see if adding something before the map was actually loaded might give enough feedback to the user to make the experience acceptable. I knew from my years of prototyping that this type of solution just might do the trick. So I added a standard spinner and some loading text to the frame before the map, and a simple 5-second timer. I demonstrated each version around the office, and confirmed that folks thought the map did load faster on the version with the loading screen. In Apple’s Interface Guidelines, it refers to this illusion when talking about the splash screen.

Loading Animation

So, with the loading distraction in place, I could now address the touch-ability of the default map controls. Typically there are both pan controls and zoom controls to interact with. Since users could directly pan the map by dragging, I did not need to create a touch-friendly version of that control. I did still need to address the ability to change the scale of the map.

Unfortunately, here is where I ran into an actual hardware issue. At the time I was developing the application on the Google Nexus One (one of the few devices running FroYo, a requirement for AIR for Android), but there is a known issue with Multitouch on that device. This meant that a pinch and zoom gesture would be problematic. I needed to find a different solution to allow the user to change the scale of the map.

I created touch-friendly zoom in and zoom out controls and added them to the screen once the map finally loaded. Now I had a basic functioning map in my AIR for Android application and had it running on a device.

Google Map - Completed swc version

Now I needed to add the markers for the restaurants and the conference venue to the map. Creating markers is a fairly straightforward process of converting my graphics into MovieClips, enabling them for Export for ActionScript, then adding a bit of code to properly place them on the map. I manually geocoded (Update: Thanks to Randy Troppmann for spotting I had the term reversed) the venues into their latitudes and longitudes, so I did not need to look up that static information every time the map was accessed. The next test was to see how the info-windows would function. What good is seeing the marker for a bar if you can’t see the address?

This is where I hit the proverbial brick wall. The info window would appear, but the controls were far from usable on a touch device. Despite my best efforts, I could not modify the info window enough to make the controls usable on a mobile device.

So now what?

I decided to investigate using a new feature in AIR for Android called StageWebView. A little background on StageWebView; this is a new API that allows AIR developers to embed HTML content into their mobile applications and render it using the platform’s native rendering engine.

I removed the Google Map SWC from my project and added the following code:

var webView:StageWebView = new StageWebStage();
webView.stage = this.stage;
webView.viewPort = new Rectangle(0, 100, stage.stageWidth, stage.stageHeight);
webView.loadURL(http://map.google.com);
addChild(webView);

I recompiled the project and loaded it onto my mobile device, and a touch-friendly Google Map was displayed.

The load times were acceptable (I still kept my fake pre-loader, as there was a bit of load time ). I had touch-friendly zoom controls and scrolling. With this technical proof of concept validated, I quickly wrote a custom web page to house my map and markers.

Completed HTML version

I was still unsure how the info-windows would appear. To my pleasant surprise, the info-windows were quite touch-friendly . They were not as nice as the native elements, but certainly more usable that the ones in the SWC’s.

Info Window

So, now I have a mobile friendly map solution in my AIR for Android application. Hopefully this solution will work for you when you need to add a map to your mobile application.

Sample HTML map.

RIA Radio, Live at Adobe MAX – Day 1 Keynote

RIA Radio Logo

I was honored to be a guest on RIA Radio during the recent Adobe MAX show. I joined the hosts, Garth BraithwaiteLeif Wells and  Zach Stepek, along with fellow guest Kevin Schmidt. We discussed the announcements from the Day 1 keynote (Flash for the iPhone, Flash 10.1 on mobile, TVs, and netbooks.)  Throughout the entire show, they sat down with a lot of cool folks, so take a listen.

RIA Radio

Listen to this podcast ( mp3). You can also subscribe to the RIA Radio Podcast in iTunes.

Kevin Schmidt to discuss the big MAX announcements and give our take on what they mean. Topics covered include: Flash for the iPhone, Flash 10.1 on mobile, TVs, and netbooks.
Experts: Leif Wells and  Zach Stepek
Listen to this week’s podcast ( mp3). You can also subscribe to the RIA Radio Podcast in iTunes.
Read more from Garth Braithwaite.

Flash Player Multi-Touch: Confirmation from Kevin Lynch

At the Adobe Analyst Summit, Kevin Lynch gave some clarity around Flash on mobile devices which included news that Flash Player for mobile will have support for multi-touch and accelerometer features.

If you’re interested in the Flash Platform and multi-touchDaniel Dura is going to be doing a session at MAX covering some of the advancements in the Flash Platform and multi-touch. It should be an interesting session.

My past two prototypes have been touch-based user interfaces, and would love to have more native support for multi-touch and gestures.