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