AIR2.5 Hands On - Flash on the Beach 2010

1,327 views
1,273 views

Published on

These are the slides from my Flash on the Beach hands on session 2010.

The topic is AIR 2.5 on Android, which is now nearing completion :-)

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

  • Be the first to like this

No Downloads
Views
Total views
1,327
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Get the Android SDK: http://developer.android.com/sdkAllows you to create and install apps on your device (Android SDK Manager, ADB, DDMS etc.)
  • Deeper Desktop IntegrationAccess new networking capabilities not available in the browser including encrypted sockets (TLS), UDP and server sockets Build applications that execute & communicate with native processes Detect and access mass storage devices including USB Flash drivesDevelop entirely new desktop experiences using multi-touch and gesture support Record and store audio locally without the need for a server Faster, Better, Stronger Print capabilities allow developers new levels of control over quality and printer settings Applications built with AIR 1.5 use less memory and CPU when running under AIR 2 without requiring app recompilation Develop Flash-based applications that work with supported screen readers including JAWS Updated WebKit supports JavaScript profiling, a faster JavaScript engine and new CSS3 features Extend AIR Beyond the PCBuild multi-screen applications that target the iPhone, iPad and Android with very little code change. Export and upload mobile apps as native packages to marketplacesDESKTOP INTEGRATION Native procesesOpen documentDrive detectionBuild native installersFile promises NETWORKING TLS/SSL socketsListen on a socket UDP support Network interface propertiesDNS resolution
  • Adobe AIR is another runtime in the Flash Platform that has been extended to mobile platformsIn fact this year we intend to bring AIR to Android devices, and enable you to repackage these applications for the iPhoneWith Adobe AIR you can take advantage of more platform specific features, such as Geolocation and File access and distribute these applications through applications storesUltimately being able to monetize your applications is very important, and we believe that having the choice of browser or standalone distribution is hugely beneficial
  • Delivering the new runtime for mobile phones requires a set of new features and investments.We have completed a huge amount of engineering to increase performance and use less memory on devices.As well as that, the new runtime supports features that are common on these new mobile platforms.We have added multi-touch support, Accelerometer, and new APIs for globalization, error handling and text input
  • Delivering the new runtime for mobile phones requires a set of new features and investments.We have completed a huge amount of engineering to increase performance and use less memory on devices.As well as that, the new runtime supports features that are common on these new mobile platforms.We have added multi-touch support, Accelerometer, and new APIs for globalization, error handling and text input
  • Today AIR enables developers and designers to create applications for Windows/Mac and Linux computersTo install applications we can use the .AIR package format for applications that can run across all platformsWith AIR 2.0 it’s also possible to use native code, and so we have enabled AIR applications to be packaged in .exe or .dmg files. Mobile devices will also use their native package formats, like apk for AndroidFor the most part these will require no extra effort for you, they merely ensure that you can distribute your applications in AppStores today.
  • Text engineCode snippets panelSpring for bonesBuilder integration (after FB)
  • Mobile text input A virtual keyboard is automatically raised and lowered in response to focus changes on text fields when editing text on mobile devices supporting a virtual keyboard to enable unobstructed and intuitive text editing. The focused text field is centered in the visible region of the page and appropriately zoomed/scrolled to ensure it is not obscured by the virtual keyboard. Upon screen rotation, incoming calls, or other system events, any already existing text input is retained. The virtual keyboard works with TextField but does not currently work with the Text Layout Framework or other Flash Text Engine text.Multi-touch and gesturesCreate multi-touch aware content for a wide range of devices and multi-touch capable machines running Microsoft Windows 7. Interact with multiple objects simultaneously or work with native gestures, such as pinch, scroll, rotate, scale and two-finger tap. Multi-touch support in Flash Player 10.1 is not available for Android.Accelerometer inputA new Accelerometer class allows developers to read acceleration values in X, Y and Z axes from native device accelerometer sensors in ActionScript. Optimized SWF management for mobile(Mobile only)Flash Player 10.1 optimizes SWF loading and playback for mobile CPU and memory limitations to provide a better user experience. Instances are loaded or deferred based on SWF priority, visibility and available memory and CPU resources to enable more immediate browsing experiences without waiting for every SWF on a page to load. Developers can indicate SWF priority through a new HTML parameter, hasPriority. Deferred instances are loaded after the HTML page load is complete, and offscreen and invisible instances are started when they become visible. Flash Player will also automatically pause SWF playback it is not in view or the foreground application, for example when a call is received or alarm goes off, to reduce CPU utilization, battery usage and memory usage.Sleep mode(Mobile only)The Flash Player timer slows down when the mobile device goes into screen-saver or similar mode to reduce CPU and battery consumption on mobile devices. The timer returns to the default setting when a wake-up event is triggered. There is no interruption in audio/video playback. Incoming phone calls pause Flash Player.Graphics hardware acceleration(Mobile only)A GPU-based vector renderer replaces the software renderer on smartphones and other mobile devices, resulting in faster rendering performance for more expressive user experiences while consuming less power. Supports hardware acceleration of all rendering, including vector graphics, bitmaps, 3D effects, filters, color transforms, alpha, device and embedded text, Saffron type, and cacheAsBitmap. Implementation of graphics hardware acceleration will be dependent on the graphics silicon vendor of the device. This feature is not available for Android devices.H.264 video hardware decodingFlash Player 10.1 introduces hardware-based H.264 video decoding to deliver smooth, high quality video with minimal overhead across supported mobile devices and PCs. Using available hardware to decode video offloads tasks from the CPU, improving video playback performance, reducing system resource utilization, and preserving battery life. H.264 video hardware acceleration is not supported on the Nexus One at this time.
  • Mobile text input A virtual keyboard is automatically raised and lowered in response to focus changes on text fields when editing text on mobile devices supporting a virtual keyboard to enable unobstructed and intuitive text editing. The focused text field is centered in the visible region of the page and appropriately zoomed/scrolled to ensure it is not obscured by the virtual keyboard. Upon screen rotation, incoming calls, or other system events, any already existing text input is retained. The virtual keyboard works with TextField but does not currently work with the Text Layout Framework or other Flash Text Engine text.Multi-touch and gesturesCreate multi-touch aware content for a wide range of devices and multi-touch capable machines running Microsoft Windows 7. Interact with multiple objects simultaneously or work with native gestures, such as pinch, scroll, rotate, scale and two-finger tap. Multi-touch support in Flash Player 10.1 is not available for Android.Accelerometer inputA new Accelerometer class allows developers to read acceleration values in X, Y and Z axes from native device accelerometer sensors in ActionScript. Optimized SWF management for mobile(Mobile only)Flash Player 10.1 optimizes SWF loading and playback for mobile CPU and memory limitations to provide a better user experience. Instances are loaded or deferred based on SWF priority, visibility and available memory and CPU resources to enable more immediate browsing experiences without waiting for every SWF on a page to load. Developers can indicate SWF priority through a new HTML parameter, hasPriority. Deferred instances are loaded after the HTML page load is complete, and offscreen and invisible instances are started when they become visible. Flash Player will also automatically pause SWF playback it is not in view or the foreground application, for example when a call is received or alarm goes off, to reduce CPU utilization, battery usage and memory usage.Sleep mode(Mobile only)The Flash Player timer slows down when the mobile device goes into screen-saver or similar mode to reduce CPU and battery consumption on mobile devices. The timer returns to the default setting when a wake-up event is triggered. There is no interruption in audio/video playback. Incoming phone calls pause Flash Player.Graphics hardware acceleration(Mobile only)A GPU-based vector renderer replaces the software renderer on smartphones and other mobile devices, resulting in faster rendering performance for more expressive user experiences while consuming less power. Supports hardware acceleration of all rendering, including vector graphics, bitmaps, 3D effects, filters, color transforms, alpha, device and embedded text, Saffron type, and cacheAsBitmap. Implementation of graphics hardware acceleration will be dependent on the graphics silicon vendor of the device. This feature is not available for Android devices.H.264 video hardware decodingFlash Player 10.1 introduces hardware-based H.264 video decoding to deliver smooth, high quality video with minimal overhead across supported mobile devices and PCs. Using available hardware to decode video offloads tasks from the CPU, improving video playback performance, reducing system resource utilization, and preserving battery life. H.264 video hardware acceleration is not supported on the Nexus One at this time.
  • Mobile text input A virtual keyboard is automatically raised and lowered in response to focus changes on text fields when editing text on mobile devices supporting a virtual keyboard to enable unobstructed and intuitive text editing. The focused text field is centered in the visible region of the page and appropriately zoomed/scrolled to ensure it is not obscured by the virtual keyboard. Upon screen rotation, incoming calls, or other system events, any already existing text input is retained. The virtual keyboard works with TextField but does not currently work with the Text Layout Framework or other Flash Text Engine text.Multi-touch and gesturesCreate multi-touch aware content for a wide range of devices and multi-touch capable machines running Microsoft Windows 7. Interact with multiple objects simultaneously or work with native gestures, such as pinch, scroll, rotate, scale and two-finger tap. Multi-touch support in Flash Player 10.1 is not available for Android.Accelerometer inputA new Accelerometer class allows developers to read acceleration values in X, Y and Z axes from native device accelerometer sensors in ActionScript. Optimized SWF management for mobile(Mobile only)Flash Player 10.1 optimizes SWF loading and playback for mobile CPU and memory limitations to provide a better user experience. Instances are loaded or deferred based on SWF priority, visibility and available memory and CPU resources to enable more immediate browsing experiences without waiting for every SWF on a page to load. Developers can indicate SWF priority through a new HTML parameter, hasPriority. Deferred instances are loaded after the HTML page load is complete, and offscreen and invisible instances are started when they become visible. Flash Player will also automatically pause SWF playback it is not in view or the foreground application, for example when a call is received or alarm goes off, to reduce CPU utilization, battery usage and memory usage.Sleep mode(Mobile only)The Flash Player timer slows down when the mobile device goes into screen-saver or similar mode to reduce CPU and battery consumption on mobile devices. The timer returns to the default setting when a wake-up event is triggered. There is no interruption in audio/video playback. Incoming phone calls pause Flash Player.Graphics hardware acceleration(Mobile only)A GPU-based vector renderer replaces the software renderer on smartphones and other mobile devices, resulting in faster rendering performance for more expressive user experiences while consuming less power. Supports hardware acceleration of all rendering, including vector graphics, bitmaps, 3D effects, filters, color transforms, alpha, device and embedded text, Saffron type, and cacheAsBitmap. Implementation of graphics hardware acceleration will be dependent on the graphics silicon vendor of the device. This feature is not available for Android devices.H.264 video hardware decodingFlash Player 10.1 introduces hardware-based H.264 video decoding to deliver smooth, high quality video with minimal overhead across supported mobile devices and PCs. Using available hardware to decode video offloads tasks from the CPU, improving video playback performance, reducing system resource utilization, and preserving battery life. H.264 video hardware acceleration is not supported on the Nexus One at this time.
  • Mobile text input A virtual keyboard is automatically raised and lowered in response to focus changes on text fields when editing text on mobile devices supporting a virtual keyboard to enable unobstructed and intuitive text editing. The focused text field is centered in the visible region of the page and appropriately zoomed/scrolled to ensure it is not obscured by the virtual keyboard. Upon screen rotation, incoming calls, or other system events, any already existing text input is retained. The virtual keyboard works with TextField but does not currently work with the Text Layout Framework or other Flash Text Engine text.Multi-touch and gesturesCreate multi-touch aware content for a wide range of devices and multi-touch capable machines running Microsoft Windows 7. Interact with multiple objects simultaneously or work with native gestures, such as pinch, scroll, rotate, scale and two-finger tap. Multi-touch support in Flash Player 10.1 is not available for Android.Accelerometer inputA new Accelerometer class allows developers to read acceleration values in X, Y and Z axes from native device accelerometer sensors in ActionScript. Optimized SWF management for mobile(Mobile only)Flash Player 10.1 optimizes SWF loading and playback for mobile CPU and memory limitations to provide a better user experience. Instances are loaded or deferred based on SWF priority, visibility and available memory and CPU resources to enable more immediate browsing experiences without waiting for every SWF on a page to load. Developers can indicate SWF priority through a new HTML parameter, hasPriority. Deferred instances are loaded after the HTML page load is complete, and offscreen and invisible instances are started when they become visible. Flash Player will also automatically pause SWF playback it is not in view or the foreground application, for example when a call is received or alarm goes off, to reduce CPU utilization, battery usage and memory usage.Sleep mode(Mobile only)The Flash Player timer slows down when the mobile device goes into screen-saver or similar mode to reduce CPU and battery consumption on mobile devices. The timer returns to the default setting when a wake-up event is triggered. There is no interruption in audio/video playback. Incoming phone calls pause Flash Player.Graphics hardware acceleration(Mobile only)A GPU-based vector renderer replaces the software renderer on smartphones and other mobile devices, resulting in faster rendering performance for more expressive user experiences while consuming less power. Supports hardware acceleration of all rendering, including vector graphics, bitmaps, 3D effects, filters, color transforms, alpha, device and embedded text, Saffron type, and cacheAsBitmap. Implementation of graphics hardware acceleration will be dependent on the graphics silicon vendor of the device. This feature is not available for Android devices.H.264 video hardware decodingFlash Player 10.1 introduces hardware-based H.264 video decoding to deliver smooth, high quality video with minimal overhead across supported mobile devices and PCs. Using available hardware to decode video offloads tasks from the CPU, improving video playback performance, reducing system resource utilization, and preserving battery life. H.264 video hardware acceleration is not supported on the Nexus One at this time.
  • Adobe does and will continue to support HTMLThe Flash Platform has integrated seamlessly with HTML for 14 years, and that won’t changeAIR 2.0 (desktop) includes support for HTML5Adobe is committed to supporting HTML5 in its leading Web development toolsThe Flash Platform delivers cross-platform, cross-browser, cross-device consistencyHTML5 implementations will differ and hinder content adoption of rich features, including video tag supportNo consistency in codec support for video is yet visibleAdobe offers best-in-class tool chain used by 3.5 million designers and developersHTML5 will require and benefit from Adobe’s investment in breadth of toolingRapid update cycles enable Flash innovations to reach ubiquity in less than 1 yearFlash will continue to lead in innovation, much faster than HTML and browsersHTML5 implementations are likely to exhibit some inconsistenciesBrowser implementations have long varied, creating challenges for developersNew implementations are just as likely to varyStandardization and evolution to consistency will take yearsFlash Player delivers cross-platform, cross-browser, cross-device consistencyNo consistency in codec support for video yet visibleMajor browser vendors are unable to agree on common codecsThese disagreements resulted in a video tag spec that will not include a codec requirement
  • AIR2.5 Hands On - Flash on the Beach 2010

    1. 1. AIR2.5 on Android – Hands on<br />Mark Doherty, Evangelist for Mobile and Devices - @markadoherty <br />
    2. 2. Get set up<br />
    3. 3. Creating an Android App: Setup<br />Get the Android SDK: http://developer.android.com/sdk<br /> Allows you to create and install apps on your device<br /><ul><li> Android - SDK Manager to install packages etc.
    4. 4. ADB – Android Device Debugger installs apps on your device
    5. 5. DDMS - Dalvik Debug Monitor for desktop simulation.</li></ul>Join the AIR Prerelease: http://labs.adobe.com/technologies/air/<br /><ul><li> Get Flash Pro CS5 (Trial)
    6. 6. Get the AIR for Android Extension for Flash CS5
    7. 7. Get AIR for Android runtime .apk installed</li></li></ul><li>Growing Complexity<br />
    8. 8. Fragmentation is rarely a good thing<br />
    9. 9. Designed ForDevices<br />Advanced Networking<br />Greater Performance<br />Deeper Desktop Integration<br />AIR 2<br />
    10. 10. Adobe AIR for smartphones (and tablets)<br />Adobe AIR allows developers to build standalone applications using Flash technology<br />Android Beta is huge, Google and RIM support AIR<br />First mobile operating system to be supported is Android<br />iOS support for AIR 2.0 – work is underway<br />Provides Flash developers access to app stores<br />
    11. 11. Brings full Flash Player feature set to devices<br />New Features:<br />Multi-touch & gestures (not on Android)<br />Accelerometer<br />Peer-to-Peer<br />Mobile text input<br />Device capabilities discovery<br />Globalization support (GSLib)<br />Mobile settings manager<br />Global error handling<br /><ul><li>Optimized SWF management for mobile
    12. 12. Sleep mode</li></ul>Flash Player 10.1 – in the browser<br />
    13. 13. Includes Flash Player 10.1 feature set<br />Additional Features:<br />File Storage<br />SQL Databases<br />Multi-touch & gestures<br />Geolocation<br />cut/copy/paste<br />tel:, mailto:, maps:, video:<br />Camera<br />Microphone<br />StageWebView<br />On device debugger<br />AIR 2.5 - Applications<br />
    14. 14. AIR Packaging & Distribution Workflow<br />.apk<br />.ipa<br />.dmg<br />.deb / .rpm<br />.air<br />native code and distribution<br />.exe<br />
    15. 15. Flash CS5 AIR for Android Extension<br />Create, install and launch an .apk using Flash Professional CS5<br />.apk<br />
    16. 16. Raster Performance<br />
    17. 17. Accelerometer<br />
    18. 18. Accelerometer<br />import flash.sensors.Accelerometer;<br />import flash.events.AccelerometerEvent;<br />if (Accelerometer.isSupported)<br />{<br />varaccel:Accelerometer = new Accelerometer();<br />accel.addEventListener(AccelerometerEvent.UPDATE,updateHandler);<br />}<br />functionupdateHandler(e:AccelerometerEvent):void<br />{<br />e.accelerationX;<br />e.accelerationY;<br />e.accelerationZ;<br />}<br />
    19. 19. Tap is the new Click<br />
    20. 20. Gestures<br />import flash.events.TransformGestureEvent;<br />cell.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);<br />function onZoom(e:TransformGestureEvent):void<br />{<br />cell.scaleX *= e.scaleX;<br />cell.scaleY *= e.scaleY;<br />}<br />cell.addEventListener(TransformGestureEvent.GESTURE_ROTATE, onRotate);<br />function onRotate(e:TransformGestureEvent):void<br />{<br />cell.rotation += e.rotation;<br />}<br />
    21. 21. Geolocation<br />
    22. 22. Geolocation<br />import flash.sensors.Geolocation;<br />vargeo:Geolocation;<br />if (Geolocation.isSupported) //Remember that this doesn’t reflect availability {            geo = new Geolocation();            geo.addEventListener(GeolocationEvent.UPDATE, updateHandler);            geo.setRequestedUpdateInterval(10000);}<br />function updateHandler(e:GeolocationEvent):void<br />{<br />e.latitude;<br />e.longitude;<br />e.altitude;<br />e.speed;<br />e.heading;<br />e.timestamp;<br />}<br />
    23. 23. P2P<br />
    24. 24. P2P<br />
    25. 25. Resources<br /><ul><li>Adobe TV
    26. 26. Optimization guides:
    27. 27. Flash Player optimization for mobile devices
    28. 28. AIR best practices for mobile devices
    29. 29. Ads optimization
    30. 30. http://www.flashmobileblog.com
    31. 31. http://www.flashrealtime.com
    32. 32. http://labs.adobe.com</li></li></ul><li>
    33. 33. Optimization<br />
    34. 34. Flash Player 10.1<br />
    35. 35. Graphics<br /><ul><li> Consider bitmaps over vectors
    36. 36. Keep bitmaps as small as possible
    37. 37. Minimize number of vectors
    38. 38. Test your animations with different qualities of Stage</li></ul>Avoid, if possible:<br /><ul><li> Filters
    39. 39. Blend modes
    40. 40. Transparency
    41. 41. Perspective distortion</li></li></ul><li>Reuse objects!<br />
    42. 42. Text<br /><ul><li>Use opaque background over transparency
    43. 43. Avoid TLF
    44. 44. Test different anti-aliasing technics (animation, bitmap text...)
    45. 45. Avoid frequently-updated text</li></ul>LoremIpsum dolor…<br />
    46. 46. Redraw Regions<br /><ul><li> If an object's properties are changed, its bounding box is a "redraw region"
    47. 47. Objects that overlap the redraw region are redrawn</li></ul>See which areas of your movie are refreshed every frame.<br /><ul><li> Test Movie. View > Show Redraw Regions
    48. 48. Right-click > Show Redraw Regions (debug player only)</li></li></ul><li>Horizontal? Vertical? Both? <br /><ul><li>Content should dictate orientation, but don’t forget about the keyboard.
    49. 49. Consider adjusting content based on layout:</li></ul>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 />800px<br />800px<br />480px<br />480px<br />
    50. 50. Display Objects<br /><ul><li> Use the appropriate type of display object
    51. 51. getSize(); will return object size</li></ul>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 />
    52. 52. Bitmap Caching<br />cacheAsBitmap - the object is rendered into an offscreen bitmap<br />Automatically used when:<br /><ul><li> Object overlaps a redraw region and the object is unchanged (except position)</li></ul>Bitmap caching issues:<br /><ul><li> Uses a lot of memory (width * height * 4 bytes)
    53. 53. Objects with cached bitmaps are more expensive to change</li></ul>Don’t use cacheAsBitmap when:<br /><ul><li> Animating object’s size
    54. 54. Animating position of object’s child</li></li></ul><li>Video performance problems<br />Inappropriate video encoding<br />Inefficient video player<br />
    55. 55. Video encoding format<br />
    56. 56. The Flash Platform and HTML5<br />“HTML 5 and RIA platforms will be complementary technologies, and enterprise development shops will need to invest in both approaches to deliver expressive applications that combine reach and richness.”*<br />-Forrester<br />Adobe does and will continue to support HTML<br />The Flash Platform has integrated seamlessly with HTML for 14 years, and that won’t change<br />AIR 2.0 (desktop) includes support for HTML5<br />Adobe is committed to supporting HTML5 in its leading Web development tools<br />The Flash Platform delivers cross-platform, cross-browser, cross-device consistency<br />HTML5 implementations will differ and hinder content adoption of rich features, including video tag support<br />No consistency in codec support for video is yet visible<br />Adobe offers best-in-class tool chain used by 3.5 million designers and developers<br />HTML5 will require and benefit from Adobe’s investment in breadth of tooling<br />Rapid update cycles enable Flash innovations to reach ubiquity in less than 1 year<br />Flash will continue to lead in innovation, much faster than HTML and browsers<br />*“Does HTML 5 Herald The End Of RIA Plug-Ins? Not Really,” Forrester Research, Inc., April, 2010<br />All external content and images pending approvals.<br />

    ×