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.

24 Comments so far

  1. Renaun Erickson on October 2nd, 2006

    There are some performance considerations with using wmode. But overall if you are not doing alot of heavy flash or video presentations you can do some cool effects with the transparent SWF over HTML. Another side effect is that you won’t be able to access HTML elements for events that are under the transparent SWF.

  2. William from Lagos on October 2nd, 2006

    could you explain with examples Renaun

  3. thibaud on October 4th, 2006

    not to mention the infamous longest bug in flash history
    input text don’t work in firefox with wmode set to transparent.

  4. Brian on October 6th, 2006
  5. mike on October 6th, 2006

    Hi Brian — I think that’s actually a demo of something different (although also very useful): HTML on *top* of a Flex app, rather than HTML showing through transparently from *underneath* a Flex app.

  6. Satpal on December 7th, 2006

    One Issue:
    If I make a flex transparent with what you’ve provided I can able to see the html through it.. and thats good.. BUT I’m not able to interact with that HTML.

    For example.. if there two layers.. In the top layer I place the swf file from flex and on the bottom layer I place the html content with some hyperlinks. I can manage to view the html content and hyperlinks through that transparent flex swf BUT i’m not able to click those hyperlink or select the text.

    Any suggestions on how to do that?

  7. mike on December 7th, 2006

    Satpal: No, I don’t know if there’s a way to allow interaction with the HTML that is under the swf.

  8. Satpal on December 7th, 2006

    hmm.. actually I managed to do this with the swf made from Flash. But somehow coudn’t find a way to do this with the swf made from Flex. The main reason is the container. Flex swf always has this container which inspite of making it transparent it won’t allow us to interact with the below html. In flash we don’t have any container and all our symbols are individual entity so it is possible to do it with the swf made in Flash.

  9. mike on December 7th, 2006

    Interesting. Perhaps there is some trick that would make it work with Flex, but I couldn’t figure out a way either, in a few minutes of trying. I tried playing around with putting “mouseChildren”, “useHandCursor”, and “buttonMode” attributes on the mx:Application tag, but that didn’t help.

  10. eric soco on January 18th, 2007

    couldn’t you do something with dhtml? i’m no dhtml whiz, but i thought you could toggle the visibility of divs; you could embed the flash player in a divm then hide the div to access the html content below it.

    thibaud, mike’s example, which has an input textfield, works great in my firefox v1.5.0.9….

  11. Jean-Luc on March 7th, 2007

    Any new information / way of accessing html content through a flex application, meaning interaction ???

    Any input much appreciated.

    Jean-Luc.

  12. Luciano Lopez on May 22nd, 2007

    The trick for html under swf, is to create a interaction with the swf and the div container.
    With javascript you can make the container to be 1px w 1px h and when you want to see the swf you make the div bigger.
    This trick is for publish presentation or simple swf that can be hidden.

    Javascript and Flex can be interesting to manipulate this animations.

  13. GermanZ on June 4th, 2007

    Thanks, this was very useful !!!

  14. phoenix on September 23rd, 2007

    This doesn’t seem to work properly with Firefox 2.0.0.6 under GNU/Linux, using Adobe’s Debug Player. Perhaps it works with the Standard Player…

    Thanks for Sharing the Trick.

  15. phoenix on September 23rd, 2007

    Okay, I tried it on another Linux Box with the Standard Player, and found the same result. Once again, we (proud) Linux Users are "left in the cold"… I wonder if it works in Firefox on other platforms?

  16. mike on September 23rd, 2007

    Hi phoenix,

    Apparently (according to comments here: http://blogs.adobe.com/penguin.swf/2007/01/flash_player_9_for_linux_x86.html ), wmode="transparent" is a known issue with the Flash player for Linux.

  17. Chris - Flex Factory on January 29th, 2008

    awesome post…pity i didnt find it earlier…it took forever to carve up a complex html page that contained my flex app…this is a great alternative

  18. Ryan on February 6th, 2008

    Thanks a ton, I had to use the JS values to get it working, but once those where set it worked like a charm!

  19. Alex on April 23rd, 2008

    I tried using wmode=transparent, it works but in Firefox, I cannot use my mouse wheel scroll anymore over my datagrid. Is this a known issue ? It seems that I don’t have this problem with IE.

  20. mike on April 23rd, 2008

    I’m not sure, Alex. Try asking on the Flexcoders mailing list. You can also log bugs at http://bugs.adobe.com/flex

  21. Anonymous on April 25th, 2008

    Thank you for information

  22. Harel on June 22nd, 2008

    meaning there’s no solution to date? :S

  23. mike on June 22nd, 2008

    No solution to what?

  24. Luca on June 25th, 2008

    Maybe something has changed from the beginning?

    I can reach any link under my Flex app.

Leave a reply