Developing AIR for Mobile with Flash Professional CS5.5

  • 4,991 views
Uploaded on

This is a presentation I gave at FlashTent.org

This is a presentation I gave at FlashTent.org

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,991
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
68
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • ComputerBig ScreenPower SupplyConsistent NetworkKeyboardMouseChairDeskMobileSmall ScreenBatteryInconsistent NetworkFingersSensors

Transcript

  • 1. Developing AIR for Mobileusing Flash Professional CS5.5 @ChrisGriffith
  • 2. DisclaimerThese opinions and thoughts are my own, and may or may not reflect the opinions of the company that I work for.
  • 3. Mobile is Everywhere
  • 4. Context
  • 5. mobile vs. desktop
  • 6. Orientation
  • 7. Touch44px
  • 8. TouchThe average fingertip is 3x largerthan the hand cursorMake your buttons 3x largerThen make them even larger
  • 9. With fingers, come hands…
  • 10. Ergonomics How will they touch it? • One Thumb? • Two Thumbs? • Pointer Finger?
  • 11. Pixels Per Inch (PPI)Device Resolution PPI PhysicalNexus One/ HTC Incredible 800x480 254 3.7’HTC EVO/ HTC Desire HD 800x480 217 4.3’Droid/ Droid 2 854x480 265 3.7’Droid X 854x480 240 4.3’Samsung Galaxy S Vibrant 800x480 232 4.0’iPhone 3GS and lower 480x320 163 3.5’iPhone 4 / iPhone 4S 960x640 326 3.5’iPad 1024x768 132 9.7’Galaxy Tab 1024x600 170 7’Data based on respective products published technical specifications
  • 12. What is Adobe AIR?Adobe AIR allows designers anddevelopers by providing a consistentand flexible developmentenvironment for the delivery ofapplications across devices andplatforms.It supports Android™, BlackBerryTablet OS, and iOS mobile operating.
  • 13. AIR for Mobile Overview • GeoLocation • Accelerometer • Camera • Multitouch / Gesture Support • Screen Orientation • Microphone • GPU Acceleration • SQLite DB • And more… • No Native Widgets • No Access to Contacts • Limited SMS Support
  • 14. Creating an Android App: Setup Get the Android SDK: http://developer.android.com/sdk ADB – Android Device Debugger installs apps on your device DDMS - Dalvik Debug Monitor for desktop simulation. Download AIR 3.1 sdk http://www.adobe.com/products/air/ Get AIR for Android runtime .apk installed via Android Market
  • 15. Creating an iOS App: Setup Get the iOS SDK: http://developer.apple.com/programs/ios/ Allows you to create and install apps on your device $99 per year Download AIR 3.1 sdk http://www.adobe.com/products/air/
  • 16. Updating AIR SDKwww.swfgeek.net/2011/09/26/targeting-flash-player-11-rc1-air-3-rc1-in-flash-professional-cs5-5/
  • 17. Development EnvironmentsEmulator Device
  • 18. Accelerometervar accel:Accelerometer = new Accelerometer();accel.addEventListener(AccelerometerEvent.UPDATE, update);function update(e:AccelerometerEvent):void{ e.accelerationX; e.accelerationY; e.accelerationZ;}
  • 19. Gesturescell.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);function onZoom(e:TransformGestureEvent):void{ cell.scaleX *= e.scaleX; cell.scaleY = cell.scaleX;}cell.addEventListener(TransformGestureEvent.GESTURE_ROTATE, onRotate);function onRotate(e:TransformGestureEvent):void{ cell.rotation += e.rotation;}
  • 20. Geolocationvar geo: Geolocation;if (Geolocation.isSupported) { geo = new Geolocation(); geo.addEventListener(GeolocationEvent.UPDATE,updateHandler); geo.setRequestedUpdateInterval(10000);} else { log.text = "Geolocation feature not supported";}
  • 21. Hardware Keysstage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown, false, 0, true);function onKeyDown(event:KeyboardEvent):void{ //Back Key if (event.keyCode == Keyboard.BACK) { event.preventDefault(); // to kill event from running default behavior //do your own back stuff } //Menu Key if (event.keyCode == Keyboard.MENU) { event.preventDefault(); // to kill event from running default behavior //do your own back stuff }}
  • 22. Orientationstage.scaleMode = StageScaleMode.NO_SCALE;stage.align = StageAlign.TOP_LEFT;function setPosition():void{vidHolder.x = stageWidth/2 - vidHolder.width/2;vidHolder.y = stageHeight/2 - vidHolder.height/2; //If the layout is vertical if (stage.stageWidth < stage.stageHeight) { //Adjust graphics }}setPosition();stage.addEventListener(Event.RESIZE, resizeLayout);function resizeLayout(e:Event):void{ setPosition();}
  • 23. SQLite Supporthttp://www.dehats.com/drupal/?q=node/58
  • 24. StageWebView• You get a browser in your Flash app!• Good solution for – Maps – Facebook Connect – Remote Content
  • 25. StageText
  • 26. StageVideo
  • 27. Captive RuntimeDevelopers now have more flexibility with theirapp packaging options and can automaticallypackage AIR 3 with their Android™, iOS app intoa single installation file that includes the appand a bundled version of the AIR runtime.
  • 28. ANEsUse native code to take advantage of the sameplatform- and device-specific native capabilitiesand APIs available to native apps, with easyintegration into AIR applications.
  • 29. Limitations
  • 30. No Native Controlshttp://blog.kevinhoyt.com/2010/05/some-flash-android-components/
  • 31. No Access to Contacts
  • 32. Building Applications
  • 33. Don’t Fear the Timeline
  • 34. Publishing - Android
  • 35. Publishing - Android
  • 36. Publishing - iOS
  • 37. Publishing - iOS
  • 38. To the Market…
  • 39. Development Guidelines
  • 40. Graphics• Consider bitmaps over vectors• Keep bitmaps as small as possible• Minimize number of vectors• Test your animations with different qualities of StageAvoid, if possible:• Filters• Blend modes• Transparency• Perspective distortion
  • 41. GPU Acceleration Set rendering mode to GPU Make sure cacheAsBitmap is set to true on your DisplayObject like this:square.cacheAsBitmap = true;http://blogs.adobe.com/cantrell/archives/2010/10/gpu-rendering-in-adobe-air-for-android.html
  • 42. GPU Acceleration cacheAsBitmapMatrix property Make sure to assign a Matrix to the cacheAsBitmapMatrix property on your DisplayObject like this: square.cacheAsBitmapMatrix = new Matrix();http://blog.theflashblog.com/?p=2386
  • 43. Text Use opaque background over transparency Avoid TLF Test different anti-aliasing techniques (animation, bitmap text...) Avoid frequently-updated text Use appendText vs. text +=
  • 44. Display ObjectsUse the appropriate type of display object Objects that aren’t interactive, use Shape(); trace(getSize(new Shape())); // output: 216 Interactive but no timeline? Use Sprite(); trace(getSize(new Sprite())); // output: 396 Need animation? Use Movieclip(); trace(getSize(new MovieClip())); // output: 416
  • 45. Freeing MovieclipsAlpha? RemoveChild? Visible?Even when removed from the display list, the movie clip still dispatchesthe Event.ENTER_FRAME event.runningBoy.addEventListener(Event.REMOVED_FROM_STAGE,deactivate);function deactivate(e:Event):void{ e.currentTarget.removeEventListener(Event.ENTER_FRAME, handleMovement); e.currentTarget.stop();}
  • 46. Resources
  • 47. Thanks!chris.griffith@gmail.com@chrisgriffithhttp://chrisgriffith.wordpress.com/