• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Developing AIR for Android with Flash Professional CS5
 

Developing AIR for Android with Flash Professional CS5

on

  • 3,163 views

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.

Statistics

Views

Total Views
3,163
Views on SlideShare
3,163
Embed Views
0

Actions

Likes
1
Downloads
57
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Foundation of development for mobileAIR for Android Technical tips and tricks
  • ComputerBig ScreenPower SupplyConsistent NetworkKeyboardMouseChairDeskMobileSmall ScreenBatteryInconsistent NetworkFingersSensors

Developing AIR for Android with Flash Professional CS5 Developing AIR for Android with Flash Professional CS5 Presentation Transcript

  • Developing AIR for Android using Flash CS5
    Chris Griffith
  • Disclaimer
    These opinions and thoughts are my own, and may or may not reflect the opinions of the company that I work for.
  • Who has built for mobile?
  • Who uses what?
    Native?
    Flash/Flex?
    Web?
    Other?
  • My Mobile App Portfolio
  • Mobile is Everywhere
  • Designing for Mobile
  • Context
  • mobile vs. desktop
  • Orientation
  • Touch
    44px
    12
  • Touch
    The average fingertip is 3x larger than the hand cursor
    Make your buttons 3x larger
    Then make them even larger
    13
  • With fingers, come hands…
  • Ergonomics
    How will they touch it?
    One Thumb?
    Two Thumbs?
    Pointer Finger?
  • Data based on respective products published technical specifications
    Pixels Per Inch (PPI)
  • 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.
  • 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
  • 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.
    • ADB – Android Device Debugger installs apps on your device
    • DDMS - Dalvik Debug Monitor for desktop simulation.
    • Download AIR 2.6 http://www.adobe.com/products/air/
    • Get AIR for Android runtime .apk installed
  • Development Environments
    Emulator
    Device
  • Accelerometer
    varaccel:Accelerometer = new Accelerometer();
    accel.addEventListener(AccelerometerEvent.UPDATE, update);
    function update(e:AccelerometerEvent):void
    {
    e.accelerationX;
    e.accelerationY;
    e.accelerationZ;
    }
  • 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;
    }
  • 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"; }
  • 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  }}
  • 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();
    }
  • SQLite Support
    http://www.dehats.com/drupal/?q=node/58
  • StageWebView
    You get a browser in your Flash app!
    Good solution for
    Maps
    Facebook Connect
    Remote Content
  • Limitations
  • No Native Controls
    http://blog.kevinhoyt.com/2010/05/some-flash-android-components/
  • No Access to Contacts
  • Building Applications
  • Don’t Fear the Timeline
  • Publishing
  • Publishing
  • To the Market…
  • .air
    .exe
    .air
    .dmg
    .ipa
    .apk
    AIR Packaging & Distribution Workflow
  • Development Guidelines
  • 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
  • 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
  • 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
  • GPU Acceleration
    blog.theflashblog.com/?p=2386
  • Text
    • Use opaque background over transparency
    • Avoid TLF
    • Test different anti-aliasing techniques (animation, bitmap text...)
    • Avoid frequently-updated text
    • Use appendText vs. text +=
  • Horizontal? Vertical? Both?
    Content should dictate orientation, but don’t forget about the keyboard.
    Consider adjusting content based on layout:
  • 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
  • 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();
    }
  • Flex for Mobile - HERO
    http://labs.adobe.com/technologies/flexsdk_hero/
  • 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
  • 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
  • Resources
  • Thanks!
    Email: chris.griffith@gmail.com
    Twitter: @chrisgriffith
    Blog: http://chrisgriffith.wordpress.com/