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!

7 Responses to Transparent HTML in AIR

  1. Tom Medhurst says:
    March 2, 2008 at 7:22 am

    Is there are way to make regions of an AIR application use Glass in Vista.. also what would this look like in OSX/Linux?ThanksTom Medhurst

  2. pedro says:
    May 16, 2008 at 6:03 am

    Thanks man! keep it up

  3. laan says:
    August 20, 2008 at 12:40 am

    Oh, that’s great. But i still have a problem:after doing the steps you said, i can see my flash object witch embeded into html.Could you please help me. Thank you.By the way, could you send me a email? thanks again

  4. Dan says:
    November 24, 2008 at 5:43 pm

    Hey man, great blog. I totally forgot that you also have to set that paintsDefaultBackground property to false in addition to setting backgroundAlpha to 0. Is there a way to control other basic styles of the content being brought into the container by setting the styles on the global HTML control in the application’s stylesheet (eg. font color, padding, etc…), or is the only way to actually use a separate css file for the html content and declare it in the head of the html?

  5. Jason Arnow says:
    December 16, 2008 at 2:53 pm

    Thank you very much. We spent two days trying to get around this before finding your page, which handled it in seconds. Thank you very much.

  6. JesterXL says:
    April 23, 2009 at 8:03 am

    “paintsDefaultBackground”… THAT’s what I was missing. Thanks C!

  7. Matt says:
    May 8, 2009 at 8:24 am

    Thanks bud, you just solved my problem.