Flash with Div or HTML overlay and mootools Fx.Slide

Question

I've tried a bunch of different variations of CSS to try and overlay HTML over SWF objects but I've had a couple of hitches.

1. Safari 4.0.3 PC:

   SWF Object always render above HTML.

2. Firefox 3.5.6 PC:

   Rendering apprears fine but when animating HTML over SWF'S the divs slightly flicker. I'm using the Fx.Slide class from mootools-more-1.2.4.2.js for animating the div layer. The divs only flicker when layered above the SWF. Using a regular background color doesn't produce the bug.

Note: I had an issue previously with Firefox animating divs where the parent div required an overflow be set to auto or it would flicker as well.

I know this is a weird one.

Any help would be much appreciated.

Answer 1

Make sure your set your swf wmode to transparent

Answer 2

Without knowing what CSS you tried to get this to work, I'll describe how I dealt with a similar problem.

I have a SWF that I want to fill the entire browser window, regardless of the window size. When the user resizes the window, the Event.RESIZE event fires in Flash and I update positioning accordingly.

However, the page also needs a navigation header that uses HTML. I added a 50-pixel high header div at the top of the window. This div is not inside the SWF div, so now the SWF div, with its height of 100%, extends 50 pixels past the bottom of the window. Without having to jump through all kinds of hoops with browser quirks, the easiest solution for me was overlay the header div over the SWF div, so I set the header div's position to absolute. I am not setting a z-index for either object -- position:absolute for the header div takes care of this.

Additionally, my header div contains a drop-down menu that overlaps the SWF when activated. This menu does not flicker during its animation and seems to work fine in all major browsers on Mac and Windows.

Also, I am not using SWFObject to embed the SWF. I'm using the Flash CS4 HTML publish code to make this work, so there may be an issue with SWFObject. Here is the embed code that Flash CS4 creates for me. You may be able to derive some settings here to use for your SWFObject settings (the AC_FL_RunContent javscript method is supplied in a separate JS file supplied by CS4 on publishing):

<script language="JavaScript" type="text/javascript">
        AC_FL_RunContent(
            'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0',
            'width', '100%',
            'height', '100%',
            'src', 'assets/flash/MySWF',
            'quality', 'high',
            'pluginspage', 'http://www.adobe.com/go/getflashplayer',
            'align', 'middle',
            'play', 'true',
            'loop', 'true',
            'scale', 'noscale',
            'wmode', 'opaque',
            'devicefont', 'false',
            'id', 'MySWF',
            'bgcolor', '#333333',
            'name', 'MySWF',
            'menu', 'true',
            'allowFullScreen', 'true',
            'allowScriptAccess', 'sameDomain',
            'movie', 'assets/flash/MySWF',
            'salign', ''
            ); //end AC code
    </script>
    <noscript>
        <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="100%" height="100%" id="MySWF" align="middle">
        <param name="allowScriptAccess" value="sameDomain" />
        <param name="allowFullScreen" value="true" />
        <param name="movie" value="assets/flash/MySWF.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#333333" /><embed src="assets/flash/MySWF.swf" quality="high" bgcolor="#333333" width="100%" height="100%" name="MikeHoltzman" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
        </object>
    </noscript>

Answer 3

Hi,

i tried to accomplish the same as you sometime ago, i discovered was impossible to get a cross browser solution, in some way always the flash rendered in front of any html component.

i coulnd't help you, sorry :( but just wanted to say my experience so you don't waste the same time as me :D