Blending HTML and local content in an Adobe AIR app
I was recently able to take advantage of Adobe AIR’s HTML capabilities to blend server-fed HTML/JS content with rich local SWF/JPG/PNG content using a simple technique that I thought worthy of blogging.
I recently blogged about a project that I’ve been involved with called ChessJam, an AIR app for playing online chess. We recently added some new screens to the app to show stats such as the top 20 ranked players, top countries, game history and so on. We could have built these views directly into the application but we wanted the ability to dramatically change the stats and related content as-needed without having to roll out a new app every time. We decided to use another great feature of AIR, the mx:HTML control. Basically, we built a web browser directly into the app with a single line of MXML.
The screenshot below shows the ChessJam app with HTML content loaded in our STATS view. Basically, we have a mx:Canvas with our nice garden image sitting on top of it (the image is baked into the app and loaded with mx:Image). On top of that is our mx:HTML control configured to be transparent. The navigation at the top (TOP USERS, TOP COUNTRIES, ALL COUNTRIES, GAME HISTORY) and other content is simple HTML content being served up by our back-end Apache/ColdFusion server.
Making the necessary pieces transparent:
To illustrate this technique, I’ve provided the code of a small transparent AIR app that loads some HTML content into a transparent mx:HTML control. Simply create a new Flex/AIR project and paste in the mxml and then modify the two lines in your app-config.xml as indicated below.
To make your AIR app transparent, set the app’s transparent setting in the app-config to “true”, set SystemChrome to “none” and turn off the default Flex chrome by setting showFlexChrome to “false” in the WindowedApplication tag.
To make the mx:HTML transparent, you need to set the backgroundAlpha to “0” and the paintsDefaultBackground to “false”.
If you run this app, the content from http://tourdeflex.adobe.com/blogfiles/transparentdemo.html will display on top of your desktop.
Be sure that your HTML content does not set backgrounds or bgcolor. Otherwise, your content will have a background.
<?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="800" height="600" showFlexChrome="false"> <mx:HTML id="leaderHTML" x="1" y="1" width="100%" height="100%" backgroundAlpha="0" paintsDefaultBackground="false" horizontalScrollPolicy="off" verticalScrollPolicy="auto" location="http://tourdeflex.adobe.com/blogfiles/transparentdemo.html" /> </mx:WindowedApplication>
TransparentBrowser-app.xml (only displaying the lines that were modified):
<!-- The type of system chrome to use (either "standard" or "none"). Optional. Default standard. --> <systemChrome>none</systemChrome> <!-- Whether the window is transparent. Only applicable when systemChrome is none. Optional. Default false. --> <transparent>true</transparent>
The resulting transparent web browser: