280 likes | 493 Views
An Introduction to Flash Mobile Technology on Android, iOS , and Blackberry. Cross-Platform App Development with Flex Mobile. Oswald Campesato HTML5 Canvas/CSS3 Graphics Primer Twitter: @ ocampesato. Stephen Chin Chief Agile Methodologist at GXS Twitter: @ steveonjava
E N D
An Introduction to Flash Mobile Technology on Android, iOS, and Blackberry Cross-Platform App Development with Flex Mobile Oswald Campesato HTML5 Canvas/CSS3 Graphics Primer Twitter: @ocampesato Stephen Chin Chief Agile Methodologist at GXS Twitter: @steveonjava http://flash.steveonjava.com/
Flash and AIR on Android, iOS, and Blackberry • Available on Androidand 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
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
Density in Flex Applications 1 2 3 4 5
Density Explorer Application <fx:Script> <![CDATA[ [Bindable] protectedvarapplicationDPI:Number; [Bindable] publicvardeviceDPI:Number; ]]> </fx:Script> <s:VGrouppaddingTop="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 Rotate Swipe Two Finger Tap Pan Zoom 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:VGroupgestureSwipe="swipe(event)”/>
Flex Mobile Views/Controls • ViewNavigatorApplication • Views • ViewNavigator • Splash Screen • Components: • ActionBar • Text Components • List, Scroller, and Touch Gestures
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 Flash Stephen Chin, Oswald Campesato, Dean Iverson, and Paul Trani http://steveonjava.com/ • Includes: • UI Controls • Media Support • Mobile Flex APIs • Android Market Deployment • Extensive Examples Available Now!