Transparent Flex apps with HTML showing through
Comments(43) 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.
What should BGCOLOR be set to?
Just what I was looking for… thanks Mike.
[...] with Source Michael Ritchie :: Adding Drag-and-Drop & Drop Deny to DataGrid Mike Morearty :: Transparent Flex Apps Mike Teoti :: Flex 2 :: Tree :: Walking the Tree Method :: “the dataProvider rocks” [...]
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 =)
[...] Mike Morearty :: Transparent Flex Apps [...]
[...] with Source Michael Ritchie :: Adding Drag-and-Drop & Drop Deny to DataGrid Mike Morearty :: Transparent Flex Apps Mike Teoti :: Flex 2 :: Tree :: Walking the Tree Method :: “the dataProvider rocks” [...]
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!
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!
Awesome. Lifesaver man.
This doesn’t appear to work in Flex 3.
Brett, I just tried it in Flex 3 and it worked for me.
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.
[...] Link origin click here [...]
works great. thanks !
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?
[...] Referência [...]
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.
Thanks!
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…