Transparent Flex apps with HTML showing through

Okay, this is an old trick, Flash has had this for years; but still I think it’s neat, and I’m sure some people who are only now coming to the Flash platform via Flex haven’t seen this before. I was reminded of it when I saw a post on flexcoders by Benoit Hediard.

Your Flex apps can let the underlying HTML of the page show through. The main case where this is useful is if your page has a background image which would be difficult to line up with the background of your Flex app.

All you have to do is pass an additional parameter to the <object> and <embed> tags, to set property wmode to the value transparent:

<object ...>
    ...
    <param name="wmode" value="transparent" />
    ...
    <embed
        ...
        wmode="transparent"
        ... >
    </embed>
</object>

Or, in the JavaScript of the HTML template that Flex Builder uses (which comes from the Flash Player Detection Kit):

AC_FL_RunContent(
    ...,
    "wmode", "transparent"
);

Then, set the backgroundAlpha of your <mx:Application> to zero, and you’re all set.

Want to see a beautiful example of the result, with my programmer art? Aww shucks, it’s nothing, you wouldn’t be interested. Oh, okay, click here to see the example. Use the slider to try changing the Flex app’s backgroundAlpha.