Dev Corner - Building a Mobile App with Adobe Air, Project GoGoCast
Posted on Wednesday September 7, 2011 by Randall Brown
Today's Dev Corner post is brought to you by Ben Rhodes and Dan Davis, two of our Flash developers. They used some research time to explore the possibilities of using Adobe AIR to build mobile apps.
We wanted to build a video and image uploader to screencast.com for iOS and Android devices.Technology Approach
We developed our mobile app using Adobe Air 2.7, building with Flash Professional CS 5.5. This platform allows us to target iOS (iPhone 3GS, iPhone 4, iPad, iPad 2, iPod Touch G3, iPod Touch G4) and Android devices running Android OS 2.2, 2.3 and 3.x. The mobile app uses the public screencast.com rest API's to authenticate and upload media with Screencast.com.
Setup Process
iOS
You will need to sign up as an Apple iOS Developer in order to develop with Adobe Air. You will need to get two items setup with Apple to publish your app.
- Signing Certificate file (as a p12 Certificate)
- Mobile Provision file
Android
You will need to install the Android SDK. Flash Professional CS 5.5 allows you to create a self-signed certificate from within the program. This certificate is used when publishing your Air app to Android.
Plus:
You can build your Adobe Air mobile application on Windows or OSX. Even for iOS!Development Process
We used Flash Professional CS 5.5 for development. We recommend creating a FLA (Flash AS3) file for each platform you want to target. In our case we created:
- ios.fla
- android.fla
Important:
You setup the compile setting within each FLA document.
Shared Code
All the code in Project GoGoCast is identical for the iOS and Android version. This is one of the benefits of coding to the AIR SDK. The Air SDK has several API's to access different features of a device (if device supports it). Here a few of the features we use in our app.
- Access the native camera / image capture software
- Save / Read from Image Gallery on Phone (Camera Roll on iOS)
- Direct Camera access
It is easy to check what device the user is on so you can provide different experiences if needed.
function isIOSDevice():Boolean {
var os:String = Capabilities.os.toLowerCase();
if(os.indexOf('iphone') !=-1 || os.indexOf('ipad') !=-1 || os.indexOf('ipod') !=-1)
{
return true;
}
else
{
return false;
}
}
Some thoughts on Android vs iOS Design
Android devices have physical / soft buttons for navigation unlike iOS devices (minus the home button). You'll want to write special hooks for the Android version of your application that accounts for these buttons. For example, using the 'back' button moves a user to a previous state in the app. However by default hitting the back button within an air app will exit the application. This behavior is probably not desirable. The following code will prevent this from happening and allow you to switch states within your application.
Prevent the App from Closing when "Back" is pressed.
package {
import flash.display.Sprite;
import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.desktop.NativeApplication;
import flash.events.KeyboardEvent;
import flash.ui.Keyboard;
public class Main extends Sprite {
private var _mainScreen:Boolean = true;
function Main() {
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
// add menu button event handlers
NativeApplication.nativeApplication.addEventListener(KeyboardEvent.KEY_UP, menuHandler);
NativeApplication.nativeApplication.addEventListener(KeyboardEvent.KEY_DOWN, menuHandler);
}
private function menuHandler(e:KeyboardEvent):void {
if(e.type == KeyboardEvent.KEY_DOWN) {
if(e.keyCode == Keyboard.BACK) {
// if not on main screen (you'll need to track this yourself) then prevent the app from closing.
if(!_mainScreen) {
e.preventDefault();
}
}
} else if(e.type == KeyboardEvent.KEY_UP) {
if(e.keyCode == Keyboard.BACK) {
// if main screen, then exit the app
if(_mainScreen) {
NativeApplication.nativeApplication.exit();
}
}
}
}
}
}
Getting our App on a Device
We used TestFlight to get the apps on iOS devices and directly handed out the Android version.
Results
Our prototype version of the app does a few things easily:
- Login to Screencast.com
- Launch the native video recorder to record some video.
- Select image from your Camera Roll.
- Upload that video / image to Screencast.com.
- Get the tiny URL to the uploaded media.
- Share media URL to Facebook
Issues We Encountered
Because we were using the native video recording format of the device, Android use became an issue. Android phones running v2.3.2 and lower record in H.263 video in a .3GP file. This video is not playable on screencast.com.
Using the Facebook API was a little flaky in the app. This was due to the fact the API needed to launch the Facebook login within a web view. It worked, but the example we used didn't allow the user to cancel out of the operation. I'm sure with further development, it could have been fixed.
Conclusion
Despite the video format issues, it was very easy to publish working code to both the iOS and Android platforms.
Adobe Air Pros:
- Cross compile project to Web, Desktop, iOS, Android and Blackberry Playbook.
- Easy to get graphics and stuff flying on the device.
Adobe Air Cons:
- Lack of access to a bunch of native features of a platform.
- Performance for some operations will be slower.
- No access to native UI (graphics and functionality)
Ben Rhodes is a Rich Internet Application Developer at TechSmith who loves to blend art, design and code. Ben's been working with web technologies including Flash for over 10 years. His new passion is mobile application design and development.
