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.

The mx:HTML control provides full web-browser capabilities including JavaScript and CSS so we can expand the game stats simply by modifying the back-end HTML/CF.

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.

TransparentBrowser.mxml:

<?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:

~ by gregorywilson on December 14, 2009.

2 Responses to “Blending HTML and local content in an Adobe AIR app”

  1. […] signs are actually loaded into a transparent mx:HTML control (I blogged about this a few months ago here). The HTML content looked horrible because the HTML is renders first, then it’s scaled, so I […]

  2. Any ideas on getting swf content to show in a mx:HTML in a chromeless transparent app?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: