Source Code: Adobe AIR 3.3 Retina Video Application

With the beauty of the innovations Apple defines as standards for mobile devices, comes the challenge to use the right best practices to guarantee a high quality experience. In the Retina case, it means to maximize the use of GPU rendering, while maintaining the ability to cost efficiently reach other screens as well, such as Android tablets.

Earlier this year, I published a video about an AIR concept application demonstrating how to use HD video with a Stage3D based navigation and HTML5 content, followed by a similar demo running cross-platform on iOS and Android devices, and finally a version optimized for the new iPad Retina display. It's based on an evolving code base, which went through a lot of iterations, including small, but time intensive improvements, such as the appropriate touch behavior of the cover flow.

Since a lot of efforts went into the application, I decided to make the source public. Even though it's certainly not for beginners, and the code is not well documented or meant for production purposes, I hope it provides a good understanding of what is happening under the hood.

[iframe width="560" height="315" src="http://www.youtube.com/embed/BQn2ZvogbwU" frameborder="0" allowfullscreen /]

Application components

- Video Playback with Strobe Media Playback ([OSMF](http://www.osmf.org))

- 720p HDS on Android, 720p HLS on iOS, delivered with [Adobe Media Server](http://www.adobe.com/products/flash-media-server-family.html) from the same encoded files, and packaged in real-time.

- Stage3D navigation based on [ClockMaker's ND2D Cover Flow Demo](http://clockmaker.jp/blog-en/2011/11/nd2d-cover-flow/)

- HTML5 StageView demo on iOS based on Andrew Trice's [app-UI framework](http://triceam.github.com/app-UI/)

- Video metrics on Android (not available on iOS)

Limitations

- Code is mostly undocumented, and not meant for production

- Only supports iPad 1- 3, and Android tablets with a resolution of 1280x800 (Xoom, Galaxy Tab, etc.).

- Layout adjustment logic is very primitive, not dynamic based on DPI / screen size

To compile the source code, simply import it into Flash Builder. The media assets are defined in XML files. You can switch to your own configuration files in line 95+ of AIRCoverFlowDemo.as. It contains different files for different configurations. iPad with regular assets, iPad Retina with 2x preview images, and Android with different media URLs. if(isIOS) { if (DeviceCheck.isIpad3) { protocolXMLURL = "http://www.overdigital.com/demos/nab/appDemoSourcesIOS_2x.xml"; } else { protocolXMLURL ="http://www.overdigital.com/demos/nab/appDemoSourcesIOS.xml"; } } else { protocolXMLURL="http://www.overdigital.com/demos/nab/appDemoSources.xml"; } In addition, if you have an Android tablet with 1280x800 resolution, you can simply download the compiled APK, and manually install it on your device.

Download the full Source Code.

Notes for project setup:

- Requires [Adobe AIR 3.3](http://www.adobe.com/devnet/air/air-sdk-download.html) or later

- Include libs, the OSMF folder, and assets.swc from OSMF/assets into your library paths

- Use the following additional compiler arguments: -locale en_US -define CONFIG::LOGGING false -define CONFIG::FLASH_10_1 true

If you are not an advanced developer, and are looking for simple examples to get started, I would recommend the following resources instead:

- [The Ultimate Guide to Understanding Advanced Video Delivery with AIR for Mobile](http://www.overdigital.com/2012/01/09/the-ultimate-guide-to-understanding-advanced-video-delivery-with-air-for-mobile/)

- [Source Code – 720p Video on iPad and Android Tablets with Adobe AIR](http://www.overdigital.com/2012/01/14/720p-video-on-ipad-and-android-tablets-with-adobe-air/)

- [The Unofficial Guide to the New iPad 3 Retina Display and Adobe AIR](http://www.overdigital.com/2012/05/08/the-new-retina-ipad-and-adobe-air/)

Enjoy the source, and thanks again to ClockMaker for all the amazing Stage3D work.