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.

43 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.

  25. Pat on July 25th, 2008

    What should BGCOLOR be set to?

  26. Sean on August 26th, 2008

    Just what I was looking for… thanks Mike.

  27. Flex Coding « Panduramesh’s Weblog on September 19th, 2008

    [...] with Source Michael Ritchie :: Adding Drag-and-Drop &amp; Drop Deny to DataGrid Mike Morearty :: Transparent Flex Apps Mike Teoti :: Flex 2 :: Tree :: Walking the Tree Method :: “the dataProvider rocks” [...]

  28. Bias on September 25th, 2008

    To everyone trying to interact with html through the swf, just have and absolute positioned div loaded after the swf, ontop if it and put all the content in that.

    note i haven’t tried this but should work in theory
    alternate u could have the div height/with at 0 and then position content relative to the div

    should work =)

  29. FLEX CODING « welcome nandhu on October 22nd, 2008

    [...] Mike Morearty :: Transparent Flex Apps [...]

  30. [...] with Source Michael Ritchie :: Adding Drag-and-Drop &amp; Drop Deny to DataGrid Mike Morearty :: Transparent Flex Apps Mike Teoti :: Flex 2 :: Tree :: Walking the Tree Method :: “the dataProvider rocks” [...]

  31. Martin on December 11th, 2008

    Is there also a way to do this in Flex3? So far I have been unable to find this and using this code does not show the HTML through. Over here: http://livedocs.adobe.com/flex/3/html/help.html?content=app_container_2.html :I read that the background color will stay even when you set the application background on transparent / alpha 0.

    if someone knows something please give me a link or tip on martin*gerritsen add gmail*com

    thanks!

  32. Martin on December 11th, 2008

    Ok, I actually got it to work, a little silly thing from me for putting the wmode transparent no the wrong place. But the Flash I am making transparent is hovering in a div ontop of another flash file which has an iframe (lets call them Body and Menu). Now the transparancy works, but only on the iframe. My menu (which I switch on being infront and behind the Body file by switching the z-index of the div) does NOT show above the Body anymore. Something it did do before I made it transparent. I hope I am being a little bit clear. If someone can help me, please contact me! thanks!

  33. Joshua Curtiss on December 18th, 2008

    Awesome. Lifesaver man.

  34. Brett on February 4th, 2009

    This doesn’t appear to work in Flex 3.

  35. mike on February 4th, 2009

    Brett, I just tried it in Flex 3 and it worked for me.

  36. Mark on February 23rd, 2009

    It does work in Flex 3 but bear in mind if you just hit run you will be viewing the autogenerated HTML that contains background colour properties.

  37. [...] Link origin click here [...]

  38. nherment on May 3rd, 2009

    works great. thanks !

  39. WebG on June 18th, 2009

    Ey… just wondering… I know there to be a problem with textfield in a swf while using wmode = ‘transparent’, anyone know a way to fix it though?, or should I just make my form some way other than through flash?

  40. [...] Referência [...]

  41. Aimeric on October 7th, 2009

    Well I did’nt realize this problem existed, but I have a .jsp page that has a "float over" flex app with forms in it, and the weirdest thing happened when textInput where selected : in firefox the window started blinking black as long as the textInput had focus… quite frustrating. I did find the source of this, but it has something to do with wmode=transparent and the textInput being contained in anything extending the Container class… which is pretty much every flex containers.

    For this project Ill probably just do a new window hack for FF (I thought only IE6 needed those !).

    Just thought id let a warning.

  42. alex on February 27th, 2010

    Thanks!

  43. guno on July 26th, 2010

    hi all
    i have a problem… need help
    sorry for my english..

    im doing chat video site, and i want that my flex aplication swf file be transparent. i did as was writen above. evrythin is ok. all browsers work fine, in opera if i add
    AC_FL_RunContent(
    …,
    "wmode", "transparent"
    );

    this. afther users ar connected and flex’s green button pops up . this button is not clickable.
    and chat video cant start…
    note: my swf file is transparent also in opera..
    please help and tell me if i wrote with bad inglish. i will try to write better…
    thanks…

Leave a reply

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word