Hi everybody !
We have an HTML application, with different states. In one state, there is an embeded SWF. We would like to use WMODE "direct" because performances is better than "transparent" or "opaque". However we must interact with HTML popup dialog in front of SWF, but with WMODE "direct", the HTML layout does not allow to use zindex to show popup dialog in front of. We have implemented diffrents solutions to hide swf when popup is displayed (it works, html embed object with width and heitgh to 0), include html popup in iframe (it works, but transparancy in iframe is not allowed), but any solution is sexy ! 
My question is simple : is it possible to change WMODE at runtime, to enable transparency and layout when we want to display modal HTML popup in front of SWF ? The idea is to switch wmode when a popup is displayed (transparent) or hided (direct).
Thanks for your help.
++ ^^
3
Replies
Hi Catrika,
Yes it simple, it's a feature described on adobe site : https://helpx.adobe.com/flash/kb/flash-object-embed-tag-attributes.html
"direct" mode not include layering with HTML (L = HTML layering is supported. HTML elements can overlap SWF content. Supports explicit control of layering in relation to other HTML elements.)
The result width wmode "transparent"
The result width wmode "direct"
This is the code for test :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<meta name="google" value="notranslate" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body { height:100%; }
body { margin:0; padding:0; overflow:auto; text-align:center;
background-color: #ffffff; }
object:focus { outline:none; }
#mainContainer
{
position :relative;
width :100%;
height :100%;
}
#flashContent
{
top :0px;
left :0px;
position :absolute;
display :block;
z-index :1;
}
#htmlContent
{
top :0px;
left :0px;
position :absolute;
display :none;
z-index :2;
background-color: #b0c4de;
width :200px;
height :200px;
}
</style>
<!-- Enable Browser History by replacing useBrowserHistory tokens with two hyphens -->
<!-- BEGIN Browser History required section -->
<link rel="stylesheet" type="text/css" href="history/history.css" />
<script type="text/javascript" src="history/history.js"></script>
<!-- END Browser History required section -->
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
// For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection.
var swfVersionStr = "18.0.0";
// To use express install, set to playerProductInstall.swf, otherwise the empty string.
var xiSwfUrlStr = "expressInstall.swf";
var flashvars = {};
var params = {};
params.quality = "high";
params.bgcolor = "#ffffff";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
params.wmode="transparent";
var attributes = {};
attributes.id = "Main";
attributes.name = "Main";
attributes.align = "middle";
swfobject.embedSWF(
"Main.swf", "flashContent",
"100%", "100%",
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
// JavaScript enabled so display the flashContent div in case it is not replaced with a swf object.
function showHTML()
{
document.getElementById('htmlContent').style.display = 'block';
}
</script>
</head>
<body>
<div id="mainContainer">
<input type="button" value="show HTML" onclick="showHTML();"/>
<div id="flashContent">
</div>
<div id="htmlContent">
<h3>Hello HTML</h3>
</div>
</div>
</body>
</html>
Ma question is to know if it's possible to switch wmode when my html popup is showed (without need to reload SWF).
Thanks for your help.
AdChoices