Developing AIR for Android using Flash CS5	<br />Chris Griffith<br />
Disclaimer<br />These opinions and thoughts are my own, and may or may not reflect the opinions of the company that I work...
My Mobile App Portfolio<br />
Mobile is Everywhere<br />
Designing for Mobile<br />
Context<br />
mobile vs. desktop<br />
Orientation <br />
Touch<br />44px<br />10<br />
Touch<br />The average fingertip is 3x larger than the hand cursor<br />Make your buttons 3x larger<br />Then make them ev...
With fingers, come hands…<br />
Ergonomics<br />How will they touch it?<br />One Thumb?<br />Two Thumbs?<br />Pointer Finger?<br />
Data based on respective products published technical specifications<br />Pixels Per Inch (PPI)<br />
AIR for Android Overview<br />GeoLocation<br />Accelerometer<br />Camera<br />Multitouch/ Gesture Support<br />Screen Orie...
Creating an Android App: Setup<br /><ul><li>Get the Android SDK: http://developer.android.com/sdk</li></ul>  Allows you to...
 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</li></ul>http://labs.adobe.com/technologies/flashpro_extensionforair/<br />
Development Environments<br />Emulator<br />Device<br />
Accelerometer<br />import flash.sensors.Accelerometer;<br />import flash.events.AccelerometerEvent;<br />Accelerometer.isS...
Gestures<br />cell.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);<br />function onZoom(e:TransformGestureEv...
Geolocation<br />var geo: Geolocation;<br />if (Geolocation.isSupported) {            geo = new Geolocation();            ...
Hardware Keys<br />stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown, false, 0, true);function onKeyDown(event:Keyb...
Orientation <br />stage.scaleMode = StageScaleMode.NO_SCALE;<br />stage.align = StageAlign.TOP_LEFT;<br />function setPosi...
SQLite Support<br />http://www.dehats.com/drupal/?q=node/58<br />
Limitations<br />
No Native Controls<br />
No Access to Contacts<br />
Building Applications<br />
Don’t Fear the Timeline<br />
Publishing<br />
Publishing<br />
To the Market…<br />
.air<br />.exe<br />.air <br />(swf, jpg, mp3)<br />.dmg<br />.ipa<br />.apk<br />AIR Packaging & Distribution Workflow<br />
Development Guidelines<br />
Graphics<br />Consider bitmaps over vectors<br />Keep bitmaps as small as possible<br />Minimize number of vectors<br />Te...
Text<br /><ul><li>Use opaque background over transparency
Avoid TLF
Upcoming SlideShare
Loading in...5
×

Developing AIR for Android with Flash Professional CS5

11,051

Published on

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.

Published in: Technology
1 Comment
10 Likes
Statistics
Notes
No Downloads
Views
Total Views
11,051
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
1
Likes
10
Embeds 0
No embeds

No notes for slide

Transcript of "Developing AIR for Android with Flash Professional CS5"

  1. 1. Developing AIR for Android using Flash CS5 <br />Chris Griffith<br />
  2. 2. Disclaimer<br />These opinions and thoughts are my own, and may or may not reflect the opinions of the company that I work for.<br />
  3. 3.
  4. 4. My Mobile App Portfolio<br />
  5. 5. Mobile is Everywhere<br />
  6. 6. Designing for Mobile<br />
  7. 7. Context<br />
  8. 8. mobile vs. desktop<br />
  9. 9. Orientation <br />
  10. 10. Touch<br />44px<br />10<br />
  11. 11. Touch<br />The average fingertip is 3x larger than the hand cursor<br />Make your buttons 3x larger<br />Then make them even larger <br />11<br />
  12. 12. With fingers, come hands…<br />
  13. 13. Ergonomics<br />How will they touch it?<br />One Thumb?<br />Two Thumbs?<br />Pointer Finger?<br />
  14. 14.
  15. 15. Data based on respective products published technical specifications<br />Pixels Per Inch (PPI)<br />
  16. 16. AIR for Android Overview<br />GeoLocation<br />Accelerometer<br />Camera<br />Multitouch/ Gesture Support<br />Screen Orientation<br />Microphone<br />GPU Acceleration<br />SQLite DB<br />No Native Widgets<br />No Multiple Camera Support<br />No Access to Contacts<br />Limited SMS Support<br />
  17. 17. Creating an Android App: Setup<br /><ul><li>Get the Android SDK: http://developer.android.com/sdk</li></ul> Allows you to create and install apps on your device<br /><ul><li> Android - SDK Manager to install packages etc.
  18. 18. ADB – Android Device Debugger installs apps on your device
  19. 19. DDMS - Dalvik Debug Monitor for desktop simulation.
  20. 20. Download AIR 2.5 http://www.adobe.com/products/air/
  21. 21. Get AIR for Android runtime .apk installed
  22. 22. Get the AIR for Android Extension for Flash CS5</li></ul>http://labs.adobe.com/technologies/flashpro_extensionforair/<br />
  23. 23. Development Environments<br />Emulator<br />Device<br />
  24. 24. Accelerometer<br />import flash.sensors.Accelerometer;<br />import flash.events.AccelerometerEvent;<br />Accelerometer.isSupported;<br />varaccel:Accelerometer = new Accelerometer();<br />accel.addEventListener(AccelerometerEvent.UPDATE, update);<br />function update(e:AccelerometerEvent):void<br />{<br />e.accelerationX;<br />e.accelerationY;<br />e.accelerationZ;<br />}<br />
  25. 25. Gestures<br />cell.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);<br />function onZoom(e:TransformGestureEvent):void<br />{<br />cell.scaleX *= e.scaleX;<br />cell.scaleY = cell.scaleX;<br />}<br />cell.addEventListener(TransformGestureEvent.GESTURE_ROTATE, onRotate);<br />function onRotate(e:TransformGestureEvent):void<br />{<br />cell.rotation += e.rotation;<br />}<br />
  26. 26. Geolocation<br />var geo: Geolocation;<br />if (Geolocation.isSupported) {            geo = new Geolocation();            geo.addEventListener(GeolocationEvent.UPDATE, updateHandler);            geo.setRequestedUpdateInterval(10000);} else {            log.text = "Geolocation feature not supported"; }<br />
  27. 27. Hardware Keys<br />stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown, false, 0, true);function onKeyDown(event:KeyboardEvent):void {<br /> //Back Key  if (event.keyCode == 94) {      event.preventDefault(); // to kill event from running default behavior       //do your own back stuff  }<br /> //Menu Key<br />  if (event.keyCode == 95) {      event.preventDefault(); // to kill event from running default behavior       //do your own back stuff  }} <br />
  28. 28. Orientation <br />stage.scaleMode = StageScaleMode.NO_SCALE;<br />stage.align = StageAlign.TOP_LEFT;<br />function setPosition():void<br />{<br />vidHolder.x = stageWidth/2 - vidHolder.width/2;<br />vidHolder.y = stageHeight/2 - vidHolder.height/2;<br /> //If the layout is vertical<br /> if (stage.stageWidth < stage.stageHeight)<br /> {<br /> //Adjust graphics<br /> }<br />}<br />setPosition();<br />stage.addEventListener(Event.RESIZE, resizeLayout);<br />function resizeLayout(e:Event):void<br />{<br />setPosition();<br />}<br />
  29. 29. SQLite Support<br />http://www.dehats.com/drupal/?q=node/58<br />
  30. 30. Limitations<br />
  31. 31. No Native Controls<br />
  32. 32. No Access to Contacts<br />
  33. 33. Building Applications<br />
  34. 34. Don’t Fear the Timeline<br />
  35. 35. Publishing<br />
  36. 36. Publishing<br />
  37. 37. To the Market…<br />
  38. 38. .air<br />.exe<br />.air <br />(swf, jpg, mp3)<br />.dmg<br />.ipa<br />.apk<br />AIR Packaging & Distribution Workflow<br />
  39. 39. Development Guidelines<br />
  40. 40. Graphics<br />Consider bitmaps over vectors<br />Keep bitmaps as small as possible<br />Minimize number of vectors<br />Test your animations with different qualities of Stage<br />Avoid, if possible:<br /> Filters<br /> Blend modes<br /> Transparency<br /> Perspective distortion<br />
  41. 41. Text<br /><ul><li>Use opaque background over transparency
  42. 42. Avoid TLF
  43. 43. Test different anti-aliasing techniques (animation, bitmap text...)
  44. 44. Avoid frequently-updated text</li></li></ul><li>Horizontal? Vertical? Both? <br />Content should dictate orientation, but don’t forget about the keyboard.<br />Consider adjusting content based on layout:<br />
  45. 45. Display Objects<br />Use the appropriate type of display object<br />Objects that aren’t interactive, use Shape();<br />trace(getSize(new Shape()));<br />// output: 216<br />Interactive but no timeline? Use Sprite();<br />trace(getSize(newSprite()));// output: 396<br />Need animation? Use Movieclip();<br />trace(getSize(newMovieClip()));// output: 416<br />
  46. 46. Freeing Movieclips<br />Alpha? RemoveChild? Visible?<br />Even when removed from the display list, the movie clip still dispatches the Event.ENTER_FRAME event. <br />runningBoy.addEventListener(Event.REMOVED_FROM_STAGE, deactivate);<br />function deactivate(e:Event):void<br />{<br />e.currentTarget.removeEventListener(Event.ENTER_FRAME, handleMovement);<br />e.currentTarget.stop();<br />}<br />
  47. 47. Flex for Mobile - HERO<br />
  48. 48. Hero in a Nutshell: Mobile Application Development<br />Allow developers to create a single mobile project that will run on multiple mobile environments<br />UI components supporting touchscreen interaction<br />Application framework fitted with common mobile UI patterns<br />Interactive performance tuned for mobile devices<br />
  49. 49. Thanks!<br />Email: chris.griffith@gmail.com<br />Twitter: @chrisgriffith<br />Blog: http://chrisgriffith.wordpress.com/<br />

×