HTML overlay on a swf flash movie

Question

Hi All

I'm having trouble displaying a overlay div saying "Please wait..." on top of a flash movie, even with absolute positioning and z-index highier than the flash movie itself. But the overlay div is still behing the flash movie. Why is that? I think it's something to do with embed/param tags but I'm not sure, please can someone advice me on this?

Here's the code:

<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        id="OrderMap" width="100%" height="100%"
        codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab"&gt;
        <param name="FlashVars" value="OpenSpaceURL=http%3A%2F%2Fosdrsun02%3A7780%2Fosmapapi%2Fts%3FFORMAT%3Dimage%2Fpng%26KEY%3D6AE337502C265274E040007F010017F1%26URL%3Dhttp%3A%2F%2Flocalhost%3A8080%2F%2FOpenSpaceTilesTest.html%26SERVICE%3DWMS%26VERSION%3D1.1.1%26REQUEST%3DGetMap%26STYLES%3D%26EXCEPTIONS%3Dapplication%2Fvnd.ogc.se_inimage%26SRS%3DEPSG%3A27700" />
        <param name="movie" value="OrderMap.swf" />
        <param name="quality" value="high" />
        <param name="bgcolor" value="#ffffff" />
        <param name="allowScriptAccess" value="sameDomain" />
        <embed src="swf/OrderMap.swf" quality="high" bgcolor="#ffffff"
            width="100%" height="100%" name="OrderMap" align="middle"
            play="true"
            loop="false"
            quality="high"
            allowScriptAccess="sameDomain"
            type="application/x-shockwave-flash"
            pluginspage="http://www.adobe.com/go/getflashplayer"&gt;
        </embed>
</object>

Many Thanks

Answer 1

You need to set the wmode to transparent (on both elements) and make sure your overlapping div has a higher z-index than your flash movie. Here's your updated code.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        id="OrderMap" width="100%" height="100%"
        codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab"
        wmode="transparent">
        <param name="FlashVars" value="OpenSpaceURL=http%3A%2F%2Fosdrsun02%3A7780%2Fosmapapi%2Fts%3FFORMAT%3Dimage%2Fpng%26KEY%3D6AE337502C265274E040007F010017F1%26URL%3Dhttp%3A%2F%2Flocalhost%3A8080%2F%2FOpenSpaceTilesTest.html%26SERVICE%3DWMS%26VERSION%3D1.1.1%26REQUEST%3DGetMap%26STYLES%3D%26EXCEPTIONS%3Dapplication%2Fvnd.ogc.se_inimage%26SRS%3DEPSG%3A27700" />
        <param name="movie" value="OrderMap.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="transparent">
        <param name="bgcolor" value="#ffffff" />
        <param name="allowScriptAccess" value="sameDomain" />
        <embed src="swf/OrderMap.swf" quality="high" bgcolor="#ffffff"
            width="100%" height="100%" name="OrderMap" align="middle"
            play="true"
            loop="false"
            quality="high"
            allowScriptAccess="sameDomain"
            type="application/x-shockwave-flash"
            pluginspage="http://www.adobe.com/go/getflashplayer"&gt;
        </embed>
</object>

Answer 2

Setting the wmode to Opaque will also allow you to layer HTML elements over top of flash and will increase your performance becuase it does not concern itself with rendering anything underneath the flash movie, unlike transparent wmode. I'm not sure if this will fix you scroll wheel issues though.