Your SlideShare is downloading. ×
Developing AIR for Android with Flash Professional CS5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Developing AIR for Android with Flash Professional CS5

3,075
views

Published on

A presentation I gave to the Bay Area Mobile Meetup on Developing AIR for Android with Flash Professional CS5.

A presentation I gave to the Bay Area Mobile Meetup on Developing AIR for Android with Flash Professional CS5.

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,075
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
66
Comments
0
Likes
1
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
  • Foundation of development for mobileAIR for Android Technical tips and tricks
  • ComputerBig ScreenPower SupplyConsistent NetworkKeyboardMouseChairDeskMobileSmall ScreenBatteryInconsistent NetworkFingersSensors
  • Transcript

    • 1. Developing AIR for Android using Flash CS5
      Chris Griffith
    • 2. Disclaimer
      These opinions and thoughts are my own, and may or may not reflect the opinions of the company that I work for.
    • 3. Who has built for mobile?
    • 4. Who uses what?
      Native?
      Flash/Flex?
      Web?
      Other?
    • 5.
    • 6. My Mobile App Portfolio
    • 7. Mobile is Everywhere
    • 8. Designing for Mobile
    • 9. Context
    • 10. mobile vs. desktop
    • 11. Orientation
    • 12. Touch
      44px
      12
    • 13. Touch
      The average fingertip is 3x larger than the hand cursor
      Make your buttons 3x larger
      Then make them even larger
      13
    • 14. With fingers, come hands…
    • 15. Ergonomics
      How will they touch it?
      One Thumb?
      Two Thumbs?
      Pointer Finger?
    • 16.
    • 17. Data based on respective products published technical specifications
      Pixels Per Inch (PPI)
    • 18. The Adobe® AIR® 2.6 runtime enables developers to use HTML, JavaScript, and ActionScript® to build web applications that run as standalone client applications without the constraints of a browser. Adobe AIR allows designers and developers by providing a consistent and flexible development environment for the delivery of applications across devices and platforms. Support for Android™, BlackBerry Tablet OS,* and iOS mobile operating systems and televisions is now available.
    • 19. AIR for Android Overview
      GeoLocation
      Accelerometer
      Camera
      Multitouch / Gesture Support
      Screen Orientation
      Microphone
      GPU Acceleration
      SQLite DB
      StageWebView
      No Native Widgets
      No Multiple Camera Support
      No Access to Contacts
      Limited SMS Support
    • 20. Creating an Android App: Setup
      • Get the Android SDK: http://developer.android.com/sdk
      Allows you to create and install apps on your device
      • Android - SDK Manager to install packages etc.
      • 21. ADB – Android Device Debugger installs apps on your device
      • 22. DDMS - Dalvik Debug Monitor for desktop simulation.
      • 23. Download AIR 2.6 http://www.adobe.com/products/air/
      • 24. Get AIR for Android runtime .apk installed
    • Development Environments
      Emulator
      Device
    • 25. Accelerometer
      varaccel:Accelerometer = new Accelerometer();
      accel.addEventListener(AccelerometerEvent.UPDATE, update);
      function update(e:AccelerometerEvent):void
      {
      e.accelerationX;
      e.accelerationY;
      e.accelerationZ;
      }
    • 26. Gestures
      cell.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;
      }
    • 27. Geolocation
      var geo: Geolocation;
      if (Geolocation.isSupported) {            geo = new Geolocation();            geo.addEventListener(GeolocationEvent.UPDATE, updateHandler);            geo.setRequestedUpdateInterval(10000);} else {            log.text = "Geolocation feature not supported"; }
    • 28. Hardware Keys
      stage.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  }}
    • 29. Orientation
      stage.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();
      }
    • 30. SQLite Support
      http://www.dehats.com/drupal/?q=node/58
    • 31. StageWebView
      You get a browser in your Flash app!
      Good solution for
      Maps
      Facebook Connect
      Remote Content
    • 32. Limitations
    • 33. No Native Controls
      http://blog.kevinhoyt.com/2010/05/some-flash-android-components/
    • 34. No Access to Contacts
    • 35. Building Applications
    • 36. Don’t Fear the Timeline
    • 37. Publishing
    • 38. Publishing
    • 39. To the Market…
    • 40. .air
      .exe
      .air
      .dmg
      .ipa
      .apk
      AIR Packaging & Distribution Workflow
    • 41. Development Guidelines
    • 42. Graphics
      Consider bitmaps over vectors
      Keep bitmaps as small as possible
      Minimize number of vectors
      Test your animations with different qualities of Stage
      Avoid, if possible:
      Filters
      Blend modes
      Transparency
      Perspective distortion
    • 43. 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
    • 44. 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
    • 45. GPU Acceleration
      blog.theflashblog.com/?p=2386
    • 46. Text
      • Use opaque background over transparency
      • 47. Avoid TLF
      • 48. Test different anti-aliasing techniques (animation, bitmap text...)
      • 49. Avoid frequently-updated text
      • 50. Use appendText vs. text +=
    • Horizontal? Vertical? Both?
      Content should dictate orientation, but don’t forget about the keyboard.
      Consider adjusting content based on layout:
    • 51. Display Objects
      Use 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(newSprite())); // output: 396
      Need animation? Use Movieclip();
      trace(getSize(newMovieClip())); // output: 416
    • 52. Freeing Movieclips
      Alpha? RemoveChild? Visible?
      Even when removed from the display list, the movie clip still dispatches the 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();
      }
    • 53. Flex for Mobile - HERO
      http://labs.adobe.com/technologies/flexsdk_hero/
    • 54. Hero in a Nutshell: Mobile Application Development
      Allow developers to create a single mobile project that will run on multiple mobile environments
      UI components supporting touchscreen interaction
      Application framework fitted with common mobile UI patterns
      Interactive performance tuned for mobile devices
    • 55. Resources
      Tour de Flex is a desktop application for exploring Flex capabilities and resources, including the core Flex components, Adobe AIR, data integration, and a variety of third-party components, effects, skins, and more.
      https://market.android.com/details?id=air.adobe.flex.TourDeMobileFlex
    • 56. Resources
    • 57.
    • 58. Thanks!
      Email: chris.griffith@gmail.com
      Twitter: @chrisgriffith
      Blog: http://chrisgriffith.wordpress.com/