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":
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.
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.
could you explain with examples Renaun
not to mention the infamous longest bug in flash history
input text don’t work in firefox with wmode set to transparent.
Here’s another example: http://www.deitte.com/archives/2006/08/finally_updated.htm
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.
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?
Satpal: No, I don’t know if there’s a way to allow interaction with the HTML that is under the swf.
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.
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.
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….
Any new information / way of accessing html content through a flex application, meaning interaction ???
Any input much appreciated.
Jean-Luc.
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.
Thanks, this was very useful !!!
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.
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?
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.
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
Thanks a ton, I had to use the JS values to get it working, but once those where set it worked like a charm!
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.
I’m not sure, Alex. Try asking on the Flexcoders mailing list. You can also log bugs at http://bugs.adobe.com/flex
Thank you for information
meaning there’s no solution to date? :S
No solution to what?
Maybe something has changed from the beginning?
I can reach any link under my Flex app.