Flex multi-screen development

Flex | .Net | Mobile

Dustin Tauerdustin@easelsolutions.com@dtauer

I Teach

I Use

• Brief overview of mobile development with Adobe AIR• Compare mobile platforms– iOS, RIM, Android

• Developing a multi-screen mobile application– Flash Builder 4.5– Developing | Debugging | Distributing

• Q&A

Device Landscape

Adobe AIR

• Desktop application• Requires the free AIR Runtime• Build once, Publish many– File.desktopDirectory;– CameraRoll.browseForImage();

Adobe AIR

• Eliminates the need to learn multiple programming languages– iOS -> Objective C– Android -> Java– Windows -> Silverlight– Blackberry -> Java

• Develop in Flash, export to your desired platform– iOS -> IPA file– Android -> APK file– Blackberry -> BAR/COD file

Adobe AIR

• With most platforms, you’re exporting an AIR application• AIR app is “wrapped” with a native installer (i.e. APK file)• Application is installed

– If user doesn’t have AIR, they will be prompt to download– AIR app is then installed

• iOS is the only exception– App is converted to a NATIVE iOS application because iOS does

not support Adobe AIR

What do I need to get started?

Tool

• Flash CS5.5– Export Android, iOS, and BlackBerry Tablet applications– More platforms coming…

• Flash Builder 4.5– Build Flex/ActionScript mobile applications

• Flex 4.5 SDK contains mobile optimized-components• Currently supports Android apps• iOS and BlackBerry Tablet OS coming in June update

Understanding Flex

Flash Builder IDE

Flex SDK

Flex Class Library

MXML ActionScript

Debuggers

• Open Source Flex• 2 languages (MXML, ActionScript 3)• Compilers• Rich component library• Data visualization libraries• Debuggers

• Flash Builder IDE• Eclipse plug-in or turn-key install• Accelerates design and development• Design view and code view

• Standalone AIR applications for Android, BlackBerry, and iOS

• New, mobile-specific components added for application navigation and state management

• UIs tailored for different form factors• Optimized for mobile device performance• Existing Spark components retro-fitted for mobile• Customizable components through skinning and

styling

Flex 4.5 – A single framework for web, desktop and mobile

What about .Net?

• GET/POST using HTTPService or URLLoader• SOAP using WebService• AMF Remoting using RemoteObject– Map C# class to ActionScript Classes

http://www.adobe.com/devnet/flex/flex_net.html

Create a new Flex Mobile Project

Design View is Mobile-Optimized

Detecting Device Capabilities

Device Capabilities

• Multitouch• Accelerometer• Orentation• Microphone• Keyboard• GPS• Camera

Check for support

GPS

Orientation

Multi-touch: You CAN touch this

Raw touch points

Gestures

Optimization

Optimization Considerations

• Consider bitmaps over vectors• Keep bitmaps as small as possible• When in doubt, use ActionScript– MXML can be more costly

Event propagation

Frame Rate and Memory Management

https://github.com/mrdoob/Hi-ReS-Stats

Developer Programs

• $99/year• You get 70% of sales revenue

• Blackberry Tablet OS• $200 for 10 applications, you get 80% of sales revenue

• Free to develop applications– One-time $25 fee if you want to submit to marketplace

• You get 70% of sales revenue

Resources

• Flash Builder 4.5 and Flex 4.5– http://www.adobe.com/products/flash-builder.html– http://www.adobe.com/devnet/flash-builder.html– http://www.adobe.com/devnet/devices/mobile-apps.html– http://www.adobe.com/devnet/flex.html

• Flex and .Net– http://www.adobe.com/devnet/flex/flex_net.html– http://www.themidnightcoders.com/products/weborb-for-net/– http://www.fluorinefx.com/

Q & A

Thank you!blog.easelsolutions.com

adobe.com/devnet/mobileadobe.com/devnet/flex