Adobe Tools Make Great Mobile Apps (and Games!)

I awoke this morning to discover that Machinarium, originally developed as a Flash game and recompiled for iOS using Adobe AIR for mobile, is the #1 paid iPad game in Apple’s App Store, and the #2 overall paid iPad application.   Adobe Tools make great apps for mobile devices.

Machinarium #1 in iTunes Games
Machinarium #2 Overall iPad App

Did you know that Adobe Tools can create awesome cross-platform games and applications for iOS, Android, BlackBerry Playbook, desktop web browsers, and cross-platform desktop applications?

Learn more at:

Update:
Machinarium is now the #1 paid iPad app:

DC User Groups: One Platform; Many Devices

A quick reminder that I will be speaking at various events over the next week, so come out to one and learn about Flex for mobile devices and cross-platform development strategies.

Today I will be speaking at the DC Flex User Group on “Flex for Mobile: One Platform, Lots of Devices” (http://dc-flex.org/topic/flex-mobile-one-platform-lots-devices).

In this presentation, Adobe Evangelist Andrew Trice will walk through several applications utilizing Flex and AIR for mobile and will highlight application ecosystems, development processes, device considerations, and many of the “nuts and bolts” of multi-platform development using Adobe’s toolsets.

On Monday (Sept 12) I’ll be presenting “More Devices, Less Code”, featuring Flex & AIR for mobile at the DC Tech Meetup (http://www.meetup.com/DC-Tech-Meetup/).

On Tuesday (Sept 13) I’ll be presenting “CF Powered Mobile Applications” (http://www.dc-coldfusion.com/index.cfm?event=meetings.showMeeting&meetingId=14).

In this session, we will explore mobile application development using Flex and AIR for mobile, powered by ColdFusion backend systems. By the end of this session, you will know how to build natively installed iOS, Android, and BlackBerry Playbook applications, and you will be able to utilize your existing CF skills to power them.

Project Awesome

Here’s a little demo I put together that I’m just too excited not to share… Fellow Adobe Evangelist Christophe Coenraets has an awesome Mobile Trader application that highlights the power of LCCS collaboration and realtime information, using Flex for mobile.  I decided to see if that same collaboration example would work with the Stage3D data visualization component I’ve been playing around with, and guess what:  it works fantastic.  I’ve given it the nickname “project awesome” b/c it combines realtime collaboration (audio, video & data), Stage3D hardware accelerated graphics, and desktop to mobile paradigms.   Check it out below:

If you haven’t already seen Christophe’s Mobile Trader, you can check it out here:

Christophe has made the source of the Mobile Trader application freely available on github, so go download it and creating your own collaborative applications! I know, you *really* want to see Stage3D out in the public… I promise you, it is coming, and it will be enable you to build great apps & games.

I almost forgot to mention: I wrote less than 200 lines of code to create project awesome!   It uses the Away3D library, and LCCS… the hard stuff is easy with Flex.

Mobile – The Next Big Thing

On the official Adobe Flex Team blog, there is a great post by Andrew Shorten discussing the future direction of Flex. I highly recommend taking a moment to read it. In that post Andrew points out where Flex is, and where Flex is heading. One thing I want to re-emphasize is that mobile is the next big thing.

It has been proclaimed many times, in many publications that mobile devices (tablets and smartphones) are the future of computing. This is both in enterprise and consumer products & applications. One of the catches with this growth is that each platform has it’s own development tooling and language. Wouldn’t it be nice if you could just use one programming model & technology stack? Even better, wouldn’t it be nice if you could use that same programming model & technology stack to also develop applications for the web and the desktop? Wow, what if you could even share code libraries across mobile, web, and desktop applications? That would be awesome.

Wait… you can already do that!

Adobe Flex is the best tool for creating cross-platform, rich experiences in mobile, desktop, and web applications.

That is awesome.

One of the biggest enhancements introduced with Flash Builder 4.5.1 was the inclusion of mobile tooling. These tools allow you to easily create rich experiences targeting a variety of mobile devices – iOS, Android, BlackBerry Playbook. All of which are natively installed applications that can be shared by the standard distribution models: App Store, Enterprise distribution, etc…

The best part is that you don’t need to learn any new programming skills to develop and deploy for these platforms. You will need to learn about the app ecosystems, platform signing and deployment procedures, and device specifics (soft keyboards, hardware buttons, etc..). However, you can still develop these applications quickly and easily using Flex, ActionScript, and AIR APIs. One code base; multiple platforms; lots of devices. Did you know that you could even take that same code and deploy it to a TV? Even better, there are great new advancements in the Flex/AIR mobile tooling waiting just over the horizon.

From the Flex Team blog:

We’re continuing to focus on runtime performance, native extensions, new components, declarative skinning, adding more platforms and improving tooling workflows, such that in our next major release timeframe we expect that the need to build a fully-native application will be reserved for a small number of use cases.

The growth of the mobile market and the challenge of building out applications that work on a range of different form-factors and platforms present us with a huge opportunity to expose Flex to an entirely new audience of developers, while continuing to be relevant for existing Flex developers who are extending their applications to mobile.

Flex & AIR for mobile allow you to use the same enterprise class tooling to build cross platform mobile applications. You can still use existing framework components, existing open source libraries, the strongly typed programming language, automated ASUnit testing, build scripts, and many other features that Flex offers, and you can now target mobile devices.

It is an exciting time to be in the tech space, especially around all things mobile. Don’t get left behind. Go grab a copy of Flash Builder and start building mobile apps today. You can literally build your first mobile app in 5 minutes.

Flex & Stage3D Visualization Sample

Stage3D is starting to look incredibly promising for developers. Whether you are targeting mobile, web, or desktop or developing for gaming or data visualization, the future is bright. I was in the Adobe offices in San Francisco last week meeting with the team, and Thibault Imbert showed us some jaw dropping demos… Keep an eye out for whenever those become public.

…but it is not all about games. In a recent post, I showed off some basic stage3d hardware accelerated graphics within AIR on mobile devices. I’ve been developing some ideas to show how this can be applied within non-gaming contexts, and I figured I’d show my progress so far. The previous post was an actionscipt-only project. In enterprise scenarios, you most likely will want to take advantage of the plethora of pre-built components that the Flex framework provides. The progression for me was natural; How about showing what Stage3D can do within a Flex for mobile application?

Above is a fairly basic visualization application. There is a stage3D-based custom charting component, tied into data that is displayed using a standard spark List with a custom item renderer. The chart is based on my previous example, and obviously isn’t fully fleshed out (no legend, no ticks, no axis labels, etc…). Did I mention, this is on a tablet? Oh yeah, that is pretty awesome. Did I also mention that it will be cross platform once released? Oh yeah, that is pretty awesome too.

The data is morbid, but it works for my scenario. It is based on this data set from CMU.edu, which shows the cancer deaths and the number of cigarrettes consumed per state.

Please keep in mind, this is all beta, and not a final build. I’ll post the source code once Stage3D for mobile is publicly available.

A Single Code Base, Lots of Devices

Here’s a quick teaser for a multi-part series I’m working on: 1 code base, 1 application framework, 4 platforms, 7 devices, 5 ecosystems…

Single Code Base, Lots of Devices

Yes, that is correct…

1 codebase, Adobe Flex

1 framework, Adobe AIR

4 platforms

7 devices (these are just devices I have):

5 ecosystems

This is just a teaser, but I’ll soon be releasing details how to take an application idea and deliver it to multiple ecosystems, all with a single toolset. Stay tuned…

Flex on Mobile Live Q&A with the Evangelism Team

Mark your calendars! Next Thursday, August 18th at 9:00AM to 10:30 AM (PDT GMT-7), the evangelism team will be hosting a live Q&A chat. Come join us to learn more about Flex and AIR for mobile, and bring your questions with you!

This session will be Q&A only. There will be no demos, no slides, no speaking – just pure Q&A through Adobe Connect (all you need is a web browser or the mobile app). Whether you are actively involved in mobile development, or about to start, join us and bring your questions!

On Thursday morning, just go to http://flex.org/ask and join us in the chat. I hope to see you there!

How:
We will have at least five evangelists in the Connect session to answer questions. This is a bit of a science experiment so we’ll see how it goes! We will allow as many people in as we can handle, then we’ll start blocking entry and creating a queue. The event will run for 90 minutes so you can come and go as you want. There are no presentations and no demos. It’s purely a Q&A session.

Why:
For many of us, building apps for mobile devices is a very dramatic shift. We’ve never before had to deal with touch interfaces, varying screen densities, and input from the GPS and accelerometer. At the same time, we have to be much more conscience than ever before about resources, because our apps run on much slower CPUs with far less memory than we are used to and on OSes that will shut down your app if it crosses the line! It’s not a trivial transition!

Our team has been building real apps with Flex for several months and we have learned a lot. This is an opportunity for us to share that knowledge in an informal setting. We’ve never attempted this before, but if it works well, we’ll do it often. If it’s a bust, we’ll figure out a better way.

A few things to keep in mind for the chat:

  • Questions should be as specific as possible and limited to Flex on Mobile.
  • We can’t promise that every question will be answered, but we’ll do our best.
  • We can’t debug your code, that’s your job! However, we can direct you to good online resources.
  • Keep it friendly and G-rated. We don’t want to see you on webcam!
  • No flaming! We’re here to answer specific questions, not to debate you about technology.

Check in at http://flex.org/ask for more detail!

(iPhone icon used from thenounproject.com)

AIR 3.0 Captive Runtime

If you hadn’t heard yet, Beta 2 of AIR 3.0 and Flash Player 11 are now availabe on Adobe Labs. The AIR 3.0 beta release is sporting some great new features, including hardware accelerated video playback for mobile, iOS background audio, android licensing support, front-facing camera support, encrypted local storage for mobile, H.264 software encoding for desktop applications, and last, but not least, captive runtime support for desktop and Android applications.

If you are wondering what “captive runtime support” is, then I’ll try to explain… Currently all AIR applications that are deployed on the desktop and in Android require the 3rd-party Adobe AIR runtime. If you are familiar with the process for developing mobile AIR applications for Apple’s iOS devices, then you may already know that these applications don’t require the 3rd-party runtime; they are completely self-contained applications. These AIR applications for iOS already take advantage of the captive runtime. All necessary components of the AIR framework are bundled into a self-contained, compiled distributable application that has no dependence upon other frameworks.

With AIR 3.0, you will have the option to bundle the AIR framework into your applications to eliminate the 3rd-party dependency. However, one thing to keep in mind is that you can only export mac application packages on Macs and Windows EXEs on Windows. You can’t target native installers or bundled runtimes for cross-platform development. You can only have a single app that targets both platforms if you export a .AIR file (which requires the 3rd-party AIR runtime).

Instructions for using the captive runtime:
First, make sure that you extract the AIR runtime SDK from the archive. Instructions for extracting the AIR SDK are located at: http://kb2.adobe.com/cps/495/cpsid_49532.html

Next, add a compiler argument for swf-version=13.

Then use the ADT command line utility to build and package your application. If you run the ADT tool on the command line without passing any arguments, it will show you all of the packaging options.

For the Android captive runtime, you just need to select the target “apk-captive-runtime“, as identified by:
[bash]adt -package -target ( apk | apk-debug | apk-emulator | apk-captive-runtime ) ( CONNECT_OPTIONS? | -listen <port>? ) ( -airDownloadURL <url> )? SIGNING_OPTIONS <output-package> ( <app-desc> PLATFORM-SDK-OPTION? FILE-OPTIONS | <input-package> PLATFORM-SDK-OPTION? )[/bash]

For the desktop captive runtime, you need to select the target “bundle“, as identified by:
[bash]adt -package SIGNING_OPTIONS? -target bundle SIGNING_OPTIONS? <output-package> ( <app-desc> FILE-OPTIONS | <input-package> )[/bash]

Mobile (3G) vs. WIFI Network Detection with Adobe AIR

Did you know that you can determine whether your mobile device is on wifi or your mobile data connection when using Adobe AIR for mobile? To be honest, I wasn’t aware of it either until yesterday when my friend and former colleague Brian O’Connor pointed me towards a recent tweet from @adobe_cookbook that showed an example how to do it.

These networking APIs have been around since AIR 2.0, but I’ve seldom had the need to dig into them for the desktop. Now that AIR for mobile is widely available, this can be critically important for your applications. For example, what if you want to minimize network usage while on the mobile network? This may even prevent you being chastised for eating up expensive mobile bandwidth.

Using the NetworkInfo class’ findInterfaces() method, you can retrieve a list of all network interfaces on your computer/device. If you iterate through these, you can see which are active, what their IP and MAC addresses are, and even which IP protocol version they are using. Here’s a quick example (code below the video):

Network Detection on AIR Mobile

I know that video is a little hard to see, so here are some screen captures. First, a capture showing the mobile network connection active:

Mobile Network Active

Next, a capture showing the WIFI network active:

WIFI Network Active

Basically, I just have a list that shows all of the network interfaces. When the app loads, or whenever the network connection changes, the content of that list is updated to reflect the current state of the network interfaces. If you want to determine whether you are on wifi, you can compare the name of the active network interface to see if it contains the string “wifi”, as shown in the Adobe Cookbook.

[as3]<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
title="Network Detection"
creationComplete="view1_creationCompleteHandler(event)">

<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;

[Bindable]
private var interfaces : ArrayCollection = new ArrayCollection();

protected function view1_creationCompleteHandler(event:FlexEvent):void
{
NativeApplication.nativeApplication.addEventListener(Event.NETWORK_CHANGE, onNetworkChange);
updateInterfaceDataProvider();
}

protected function onNetworkChange(event : Event) : void
{
updateInterfaceDataProvider();
}

//this is used b/c you can’t bind directly to a Vector
protected function updateInterfaceDataProvider() : void
{
interfaces.disableAutoUpdate();
interfaces.removeAll();

for each ( var ni : NetworkInterface in NetworkInfo.networkInfo.findInterfaces() )
{
interfaces.addItem( ni );
}
interfaces.enableAutoUpdate();
}
]]>
</fx:Script>

<s:List dataProvider="{ interfaces }"
width="100%" height="100%"
itemRenderer="NetworkInterfaceDetailsRenderer"/>
</s:View>[/as3]

In the list renderer, I’m simply setting an iconFunction and messageFunction to reflect the details on each individual NetworkInterface.

[as3]<?xml version="1.0" encoding="utf-8"?>
<s:IconItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
labelField="name"
messageFunction="networkInterfaceDetail"
iconFunction="networkInterfaceIcon"
iconWidth="64" iconHeight="64" >

<fx:Script>
<![CDATA[

[Embed(source="assets/active.png")]
public static var activeImageClass:Class;

[Embed(source="assets/inactive.png")]
public static var inactiveImageClass:Class;

private function networkInterfaceDetail(item:Object):String
{
var ni : NetworkInterface = this.data as NetworkInterface;
if ( ni )
{
var result : String = "mac: " + ni.hardwareAddress;
for each ( var ia : InterfaceAddress in ni.addresses )
{
result += "\nip: " + ia.address + " " + ia.ipVersion;
}
result += "\nmtu: " + ni.mtu.toString();
return result;
}

return "Error: Unable to identify network interface.";
}

private function networkInterfaceIcon(item:Object):Object
{
var ni : NetworkInterface = this.data as NetworkInterface;
if ( ni && ni.active )
return activeImageClass;
return inactiveImageClass;
}
]]>
</fx:Script>
</s:IconItemRenderer>
[/as3]

One thing not to forget: You must make sure that your application has been provisioned to allow access to network interfaces! You’ll just need to uncomment the Android permissions in your app.xml for network state:

[xml]
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>[/xml]

Molehill (Stage3D) on Mobile

I recently had the opportunity to start playing around with Molehill for mobile (hardware accelerated 3D graphics), and I think it is something that many of you will be very excited about (see video below). Everyone thinks that 3D is just for games, but it’s not… 3D graphics can be used for complex data visualizations, scientific modeling, or a whole host of other subject areas.

I started down the path of creating 3D charts that are capable of rendering on mobile, using the Away3D engine. This is really just exploratory work, and I have it rendering multiple axes with 250 spheres (individual data points), which is about 70K-90K polygons drawn onscreen at any given time. Check out the preview below:

Molehill (Stage3D) on Mobile

This preview is running on a Motorola Atrix, and Samsung Galaxy Tab 10.1 with a prerelease AIR runtime… more devices will coming soon. Source code will be available once molehill for mobile has been released.

Molehill (Stage3D) on Mobile recorded via iPhone

You can see another preview of molehill for mobile here: http://www.bytearray.org/?p=3053

Enjoy!