Flex Menu Expanding Over HTML content

I’ve recently been tasked with figuring this out so I thought I’d share my results with everyone.

The Problem:

Create a Flash/Flex horizontal menu that will overlap the content below it. We don’t know how big the menu might get or what kind of content might end up below it. We do know that layering HTML and Flash does not always work as expected based on which browser you use. Sure, you can use the wmode=”transparent” and put the flash on top of the HTML, but it doesn’t allow you to hover over or click items under the flash.

The Solution:

Use Flex to interface with Javascript to change the SWF Object as needed based on events being listened to inside that same SWF Object. See http://reynacho.com/2008/08/12/flex-calls-to-javascript/ for a tutorial on how to get Flex to call javascript functions.

Read on for the code and example…

I went ahead and modified the index.template.html file inside my html-template directory in the Flex project. By the way see http://reynacho.com/2008/08/12/flex-modify-your-default-build-template/ for an idea of how to modify your default build template if you need (and you will need to for this).

First, add wmode=”transparent” (see the link above because that’s the example I use there).
Next, make whatever modification you’d like to make javascript functions available (I added them to the end of the index.template.html file right before the tags:

<script language="Javascript">
function changeHeight(newHeight) {
var flashObj = document.getElementById('MenuTest');
//alert(flashObj.height);
flashObj.height = newHeight;
//alert(flashObj.height);
return flashObj.height;
}
function menuClick(menuLabel) {
alert("You clicked " + menuLabel);
}
</script>

Next I modified the AC_OETags.js file to print out the SWF Object inside a div with some styling that is necessary. This is in the AC_Generateobj() function at approximately line 162 in that file:

function AC_Generateobj(objAttrs, params, embedAttrs)
{
var str = '';
str += '<div id="f-new" style="position:absolute;z-index:9999;left:0px;top:0px;">\n';
if (isIE && isWin && !isOpera)
{
str += '<object ';
for (var i in objAttrs)
str += i + '="' + objAttrs[i] + '" ';
str += '>';
for (var i in params)
str += '<param name="' + i + '" value="' + params[i] + '" /> ';
str += '</object>';
} else {
str += '<embed ';
for (var i in embedAttrs)
str += i + '="' + embedAttrs[i] + '" ';
str += '> </embed>';
}
str += '</div>';
document.write(str);
}

Finally, I created the menubar with event listeners to manage calls to the javascript functions. Here is the example:

http://reynacho.com/dev/MenuTest/bin/MenuTest.html

(Right click on the menubar to view the Flex source)