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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Developing AIR for Mobile with Flash Professional CS5.5

5,089
views

Published on

This is a presentation I gave at FlashTent.org

This is a presentation I gave at FlashTent.org

Published in: Technology

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,089
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
70
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/