Christian Cantrell

« How to Make Application Icons Appear During AIR Development | Main | AIR Development on Linux »

February 20, 2008

Transparent HTML in AIR

I keep forgetting how to do this, so I'm going to blog it once and for all.

First of all, it's possible to have transparent HTML in AIR. I don't just mean changing the alpha of the HTML Flex component. That's one way to do it, but that's not terribly useful. I'm talking about entirely knocking out the background of an HTMLLoader (formerly know as the HTMLControl) so that you can do very cool things like custom HTML chrome. I like it because I often use the HTMLLoader to render large amounts of text in AIR, like "help" or "about" pages, so making the background transparent can let me do some cool effects and presentations.

There are three things you need to know about making HTML transparent in AIR:

1. Set the paintsDefaultBackground property of the HTMLLoader to false. This specifies whether the background of the HTML document is opaque or not. If you're using the Flex HTML component, you can do this using the paintsDefaultBackground attribute on the HTML MXML tag.
2. Make sure that your HTML document does not have a background color explicitly specified. For instance, setting background-color to anything will prevent this from working.
3. If you're using the Flex HTML component, make sure the backgroundAlpha property is set to 0 (this is the one I always forget). Also, don't mess with the opaqueBackground property.

Ok, now that I have saved cumulative years of searching and trial and error, I expect that time to be reinvested into building even more cool AIR apps!

Posted by cantrell at February 20, 2008 09:31 AM | References

Trackback Pings

TrackBack URL for this entry:
http://weblogs.macromedia.com/mtadmin/mt-tb.cgi/9266

Comments

Posted by: Tom Medhurst at March 2, 2008 07:22 AM

Post a comment

Name:

Email Address:

URL:
Remember Me? YesNo

Security code:

Comments: (you may use HTML tags for style)