• Save
Developing AIR for Android with Flash Professional CS5
Upcoming SlideShare
Loading in...5
×
 

Developing AIR for Android with Flash Professional CS5

on

  • 10,845 views

New to mobile development? Wondering how mobile applications are built? This presentation will walk you the entire development process of the AIR for Android application from design to deployment. ...

New to mobile development? Wondering how mobile applications are built? This presentation will walk you the entire development process of the AIR for Android application from design to deployment. Chris Griffith will show you how he designed and built the application using a variety of tools and techniques.

Statistics

Views

Total Views
10,845
Views on SlideShare
10,708
Embed Views
137

Actions

Likes
6
Downloads
0
Comments
0

1 Embed 137

http://mint.stikom-db.ac.id 137

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

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.
  • My Mobile App Portfolio
  • Mobile is Everywhere
  • Designing for Mobile
  • Context
  • mobile vs. desktop
  • Orientation
  • Touch
    44px
    10
  • Touch
    The average fingertip is 3x larger than the hand cursor
    Make your buttons 3x larger
    Then make them even larger
    11
  • 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)
  • AIR for Android Overview
    GeoLocation
    Accelerometer
    Camera
    Multitouch/ Gesture Support
    Screen Orientation
    Microphone
    GPU Acceleration
    SQLite DB
    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.5 http://www.adobe.com/products/air/
    • Get AIR for Android runtime .apk installed
    • Get the AIR for Android Extension for Flash CS5
    http://labs.adobe.com/technologies/flashpro_extensionforair/
  • Development Environments
    Emulator
    Device
  • Accelerometer
    import flash.sensors.Accelerometer;
    import flash.events.AccelerometerEvent;
    Accelerometer.isSupported;
    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 == 94) {      event.preventDefault(); // to kill event from running default behavior       //do your own back stuff  }
    //Menu Key
      if (event.keyCode == 95) {      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
  • Limitations
  • No Native Controls
  • No Access to Contacts
  • Building Applications
  • Don’t Fear the Timeline
  • Publishing
  • Publishing
  • To the Market…
  • .air
    .exe
    .air
    (swf, jpg, mp3)
    .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
  • Text
    • Use opaque background over transparency
    • Avoid TLF
    • Test different anti-aliasing techniques (animation, bitmap text...)
    • Avoid frequently-updated 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
  • 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
  • Thanks!
    Email: chris.griffith@gmail.com
    Twitter: @chrisgriffith
    Blog: http://chrisgriffith.wordpress.com/