1. Cross-Platform App Development with Flex Mobile
An Introduction to Flash Mobile Technology on Android, iOS, and Blackberry
Cross-Platform App Development with Flex Mobile
Stephen Chin
Chief Agile Methodologist at GXS
Oswald Campesato
HTML5 Canvas/CSS3 Graphics Primer

2. Flash and AIR on Android, iOS, and Blackberry
Available on Android and Blackberry Phones and Tablets
Does not run on iPhone or iPad
Works in the Browser
Limited Access to Device APIs
Adobe Flash
Available on Android, Blackberry, and iOS
Works on Smart Phones and Tablets
Deploys as a Native Application
Gives Full Access to Device APIs
Adobe AIR

3. Flash Tooling Tool Name Description Supports Android Deployment
Adobe Flash CS5.5
Visual design tool for building Flash applications with some Actionscript.
Actionscript
Direct to Device
Adobe Flash Builder 4.5
Professional Flex and Actionscript development environment.
Flex/MXML, Actionscript
Flex 4.5 SDK
Stand-alone development toolkit.
Flex, Actionscript
Build Script
Adobe Flash Catalyst 1.5
Rapid Development Platform for building Flex user interfaces.
Via Flash Builder

4. Hello Flash on 3 Platforms…

5. BlackBerry Playbook Specs
“Enterprise Ready" Device
7" Screen (9.7mm Thick)
HTML5 and FULL Flash 10.1
Hardware Accelerated Video
Supports HDMI (TV output)
Displays PPT and Documents
Front and Rear Cameras
1 GHZ core and 1GB RAM
Q1/Q2 of 2011

6. BlackBerry Deployment
Register for Blackberry App World Account
Free, but requires ID verification (driver's license)
Request code signing certificates
Takes 1-2 business days for a response
Install Blackberry SDK
Integrates with Flash Builder 4.5
Install Plug-in Update
Manual process right now
Setup device in Flash Builder
Turn on device debugging
Enable via USB or Wifi
Setup Flash Builder with 2 certificate files
Difficult Rating:
Moderate 

7. Android Tablet Flash Devices
Samsung Galaxy Tab
"enterprise ready" device
7" screen
Motorola Xoom
First HoneyComb (3.1 device)
Samsung Galaxy Tab 10.1
Dual-core Tegra processor
10.1", 1280x800 screen
Sony Tablet P (not yet available)
Dual 5.5" screens

8. Deploying to Android Turn on Device Debugging Plug in via USB Deploy!
And install necessary drivers
Deploy!
Difficult Rating:
Easy! 

9. iOS Devices iPhone 3/3GS iPhone 4/4S iPad 1/2 320x480 Display
640x960 Retina Display
A4/A5 Processor
iPad 1/2
1024/768 Display
A5 Processor

10. Deploying to iOS Sign up for Apple's developer program
This costs $$$
Buy a Mac computer (or borrow a friend's)
Go through Apple's deployment process to create a certificate
Involves cert generation and other annoyances
Install in Keychain and export as a P12
Create an application profile and export it
Install cert and app profile in Flash Builder
Build app packaging in Flash Builder
Debug mode is quick (but slower performance)
Manually install via iTunes (install and sync to device)
Remember to uninstall previous app versions
Repeat process for each app you develop
Difficult Rating:
Painful 

11. Device Screen Characteristics
Device Name
Manufacturer
Resolution
Size
Density
Type
T-Mobile G1
HTC
320x480
3.2"
180ppi
HVGA
Motorola Droid
Motorola
480x854
3.7"
265ppi
FWVGA
Google Nexus One
480x800
252ppi
WVGA
Xperia X10 Mini
Sony Ericsson
240x320
2.55"
157ppi
QVGA
HTC EVO/Thunderbolt
4.3"
217ppi
Droid X
228ppi
Motorola Atrix
540x960
4"
275ppi
qHD
iPhone 4
Apple
640x960
3.5"
326ppi
DVGA
Droid Bionic
4.3
256ppi
iPad
768x1024
9.7"
132ppi

12. Screen Resolution vs. Density

13. Density in Flex Applications1 2
Density
DPI
Mapped Range
Medium Density (mdpi)
160
Below 200
High Density (hdpi)
240
200 to 280
Extra High Density (xhdpi)
320
Above 280 3 4 5

14. Density Explorer Application
<fx:Script> <![CDATA[ [Bindable] protected var applicationDPI:Number; public var deviceDPI:Number; ]]> </fx:Script> <s:VGroup paddingTop="20" paddingLeft="15" paddingRight="15" paddingBottom="15" gap="20" width="100%" height="100%"> <s:Label text="Application DPI:"/> <s:HGroup gap="30"> <s:RadioButton id="ad160" content="160" click="applicationDPI = 160"/> <s:RadioButton id="ad240" content="240" click="applicationDPI = 240"/> <s:RadioButton id="ad320" content="320" click="applicationDPI = 320"/> </s:HGroup> <s:Label text="Device DPI: {deviceDPI}"/> <s:HSlider id="dpiSlider" minimum="130" maximum="320" width="100%"/> </s:VGroup>

15. Automatic Resizing
160ppi
240ppi
320ppi

16. Detecting Orientation
Can be done via:
Event Callback
stage.addEventListener( StageOrientationEvent.ORIENTATION_CHANGE, <function callback>);
States
StageOrientation Values
DEFAULT
ROTATED_LEFT
ROTATED_RIGHT
UPSIDE_DOWN
UNKNOWN

17. Flash/AIR Mobile APIs Screen Orientation * Multitouch * Gestures *
Accelerometer
Camera
CameraRoll
GPS
Microphone
Audio
Video*
REST
JSON/XML
ViewNavigator*
CSS
Etc.
* APIs we will show examples of today

18. Mulititouch Gestures Two Finger Tap Pan Zoom Rotate Swipe
Illustrations provided by Gestureworks (

19. Gestures via addEventListener
public class MultitouchImage extends Image { public function MultitouchImage() { addEventListener(TransformGestureEvent.GESTURE_ROTATE, rotateListener); addEventListener(TransformGestureEvent.GESTURE_ZOOM, zoomListener); Multitouch.inputMode = MultitouchInputMode.GESTURE; } protected function rotateListener(e:TransformGestureEvent):void { rotation += e.rotation; protected function zoomListener(e:TransformGestureEvent):void { scaleX *= e.scaleX; scaleY *= e.scaleY; }}}

20. Gestures via Events
protected function swipe (e:TransformGestureEvent):void { page = (page + e.offsetX + pages.numElements) % pages.numElements; updateVisibility(); } <s:VGroup gestureSwipe="swipe(event)”/>

21. Android Scrapbook Example

22. Sketch Example

23. Flex Mobile Views/Controls
ViewNavigatorApplication
Views
ViewNavigator
Splash Screen
Components:
ActionBar
Text Components
List, Scroller, and Touch Gestures

24. Flex Mobile Controls Demo

25. Video Example

26. Development Links Android SDK AIR 2.5 Flex Builder 4.5 (Burrito)
AIR 2.5
Flex Builder 4.5 (Burrito)
Flex Catalyst 5.5 (Panini)
Flex 4.5 SDK (Hero)
iPhone Packager

27. Blogs to Read Stephen Chin Duane Nickull Christian Cantrell
Duane Nickull
Christian Cantrell
Christophe Coenraets
Serge Jespers
Lee Brimelow (The Flash Blog)
Mark Doherty (FlashMobileBlog)

28. Pro Android Flash Includes: UI Controls Media Support Mobile Flex APIs
Stephen Chin, Oswald Campesato, Dean Iverson, and Paul Trani
Includes:
UI Controls
Media Support
Mobile Flex APIs
Android Market Deployment
Extensive Examples
Available Now!