Presentation is loading. Please wait.

Presentation is loading. Please wait.

Cross-Platform App Development with Flex Mobile

Similar presentations


Presentation on theme: "Cross-Platform App Development with Flex Mobile"— Presentation transcript:

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 Applications
1 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 (www.gestureworks.com)

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!


Download ppt "Cross-Platform App Development with Flex Mobile"

Similar presentations


Ads by Google