1 / 28

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. Oswald Campesato HTML5 Canvas/CSS3 Graphics Primer Twitter: @ ocampesato. Stephen Chin Chief Agile Methodologist at GXS Twitter: @ steveonjava

evonne
Download Presentation

Cross-Platform App Development with Flex Mobile

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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/

  2. 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

  3. Flash Tooling

  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 • And install necessary drivers • Deploy! Difficult Rating: Easy! 

  9. iOS Devices • iPhone 3/3GS • 320x480 Display • iPhone 4/4S • 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

  12. Screen Resolution vs. Density

  13. Density in Flex Applications 1 2 3 4 5

  14. 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>

  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 Rotate Swipe Two Finger Tap Pan Zoom 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:VGroupgestureSwipe="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 • 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/

  27. 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/

  28. 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!

More Related