An Introduction to Flash Mobile Technology on Android, iOS, and Blackberry Stephen Chin Chief Agile...
-
Upload
darrell-mathes -
Category
Documents
-
view
213 -
download
1
Transcript of An Introduction to Flash Mobile Technology on Android, iOS, and Blackberry Stephen Chin Chief Agile...
Cross-Platform App Development with Flex Mobile
An Introduction to Flash Mobile Technology on Android, iOS, and Blackberry
Stephen ChinChief Agile Methodologist at GXSTwitter: @steveonjavahttp://flash.steveonjava.com/
Oswald CampesatoHTML5 Canvas/CSS3 Graphics PrimerTwitter: @ocampesato
Flash and AIR on Android, iOS, and Blackberry
Adobe Flash
Adobe AIR
Available on Android and Blackberry Phones and Tablets
Does not run on iPhone or iPad Works in the Browser Limited Access to Device APIs
Available on Android, Blackberry, and iOS Works on Smart Phones and Tablets Deploys as a Native Application Gives Full Access to Device APIs
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
Direct to Device
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.
Flex, Actionscript
Via Flash Builder
Hello Flash on 3 Platforms…
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
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
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
Deploying to Android
Turn on Device Debugging Plug in via USB
And install necessary drivers Deploy!
Difficult Rating:Easy!
iOS Devices
iPhone 3/3GS 320x480 Display
iPhone 4/4S 640x960 Retina Display A4/A5 Processor
iPad 1/2 1024/768 Display A5 Processor
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
Device Screen CharacteristicsDevice 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 HTC 480x800 3.7" 252ppi WVGA
Xperia X10 Mini Sony Ericsson 240x320 2.55" 157ppi QVGA
HTC EVO/Thunderbolt HTC 480x800 4.3" 217ppi WVGA
Droid X Motorola 480x854 4.3" 228ppi FWVGA
Motorola Atrix Motorola 540x960 4" 275ppi qHD
iPhone 4 Apple 640x960 3.5" 326ppi DVGA
Droid Bionic Motorola 540x960 4.3 256ppi qHD
iPad Apple 768x1024 9.7" 132ppi
Screen Resolution vs. Density
Density in Flex Applications
Density DPI Mapped Range
Medium Density (mdpi)
160 Below 200
High Density (hdpi)
240 200 to 280
Extra High Density (xhdpi)
320 Above 280
1 2
34
5
Density Explorer Application
<fx:Script> <![CDATA[ [Bindable] protected var applicationDPI:Number; [Bindable] 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" value="@{deviceDPI}" width="100%"/></s:VGroup>
Automatic Resizing
160ppi 240ppi 320ppi
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
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
Mulititouch
GESTURES
Two Finger Tap
Pan
Zoom
Rotate
Swipe
Illustrations provided by Gestureworks (www.gestureworks.com)
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;}}}
Gestures via Events
protected function swipe(e:TransformGestureEvent):void {
page = (page + e.offsetX + pages.numElements) % pages.numElements; updateVisibility(); } <s:VGroup gestureSwipe="swipe(event)”/>
Android Scrapbook Example
Sketch Example
Flex Mobile Views/Controls
ViewNavigatorApplication Views ViewNavigator Splash Screen Components:
ActionBar Text Components List, Scroller, and Touch Gestures
Flex Mobile Controls Demo
Video Example
Development Links
Android SDK http://developer.android.com/sdk/index.html
AIR 2.5 http://labs.adobe.com/technologies/air2/android/
Flex Builder 4.5 (Burrito) http://labs.adobe.com/technologies/flashbuilder_burrito/
Flex Catalyst 5.5 (Panini) http://labs.adobe.com/technologies/flashcatalyst_panini/
Flex 4.5 SDK (Hero) http://labs.adobe.com/technologies/flexsdk_hero/
iPhone Packager http://labs.adobe.com/technologies/packagerforiphone/
Blogs to Read
Stephen Chin http://flash.steveonjava.com/
Duane Nickull http://technoracle.blogspot.com/
Christian Cantrell http://blogs.adobe.com/cantrell/
Christophe Coenraets http://coenraets.org/blog/
Serge Jespers http://www.webkitchen.be/
Lee Brimelow (The Flash Blog) http://blog.theflashblog.com/
Mark Doherty (FlashMobileBlog) http://www.flashmobileblog.com/
Pro Android FlashStephen Chin, Oswald Campesato, Dean Iverson, and Paul Trani
Includes: UI Controls Media Support Mobile Flex APIs Android Market Deployment Extensive Examples
Available Now!
http://steveonjava.com/