The Coding Humanist

Some technologies love me. Some hate me. Flash is one of the latter, though I do try to make friends. I had one problem that took me much longer to solve than it should have. IMHO, the .NET community is much better about communicating how to do things than the Flash community (though in this case you can only blame my stupidity). But, since I figured it out, I thought I would share it with you to help solve this problem for someone else.

So I had this issue. I was working on something for a client which involved a horizontal Html and Css menu. When various menu items were hovered over, submenus would drop down. Also, right below this a Flash movie was to appear. Unfortunately, Flash by default will display over overlapping Html elements.

Once I figured it out it was pretty obvious. You know, one of those times where you hit yourself for not getting it right the first time. So the advice was to have a wmode param in the markup and set it as transparent. In other words, it should look something like this:

I tried that and it still didn't work, and I think for two reasons. First, I added the param as it is there in the image but I think Flash had that param later in the markup. (if you look at the sample or the sourceof this page you will see that they stop line-breaking the params, so it's easier to miss a node in the markup). I think I had it set earlier but it was reset later, caused because I didn't change the existing node but rather added a new one. Second, note the javascript above the markup. See the "'wmode', 'transparent'," bit? Yeah, I didn't change that either. So it didn't work.

The best way to do it, which is how I accidentally solved it, is to just do it through the Flash program itself. Go into the publish settings. You should see something like this:

What you need to do is change the Window Mode setting as follows:

So how about an example? Here's an ugly one. The grey block is a div. The moving blue block is the flash movie that sits below it.

Downloads

Download Example