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.

Application components

Limitations

  • Code is mostly undocumented, and not meant for production
  • Only supports iPad 1- 3, and Android tablets with a resolution of 1280×800 (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 1280×800 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 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:

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