Anyone who has ever tried to display transparent Flash content over HTML knows that getting things to sort properly on the z-index can be frustrating. Flash has an annoying tendency to force itself to render above of all other content Some browsers have trouble rendering plugin content consistently, which can make HTML stacked below Flash content inaccessible to the user. The technique described below is meant to ensure a consistent cross-browser user experience when it comes to issues with flickering or unwanted re-sorting of transparent Flash content.
We at Substance have come across this a number of times, and the best solution we have found is to knock out the areas of the Flash movie that require accessible content displayed below. This can be accomplished rather easily with the use of layer blend modes.
The first step to making this work is to set wmode in your HTML Flash embed code to transparent. After that is done, you can immediately take advantage of this trick:
- Set the blendMode property in your Document Class to BlendMode.LAYER
- Set the blendMode property of your knockout area to BlendMode.ERASE
This approach differs from creating a true mask, which acts as a window to the clip being masked, by doing the reverse – creating a window through the clip being masked, which in this case is the entire SWF.
Here is a quick example ( assuming “this” is your document class ):
// set blendMode for Document Class;
this.blendMode = BlendMode.LAYER;
// create knockout area;
var knockout : Sprite = new Sprite();
// draw 50 x 100 px box;
with ( knockout.graphics )
{
beginFill( 0x000000 );
drawRect( 0, 0, 50, 100 );
}
// give mask knockout powers;
knockout.blendMode = BlendMode.ERASE;
// add knockout mask to stage;
this.addChild( knockout );On the Arakawa home page, the Flash area is set to fill the browser window completely. The logo, navigation, and footer are all knocked out, with a listener attached to the stage for Event.RESIZE so that the footer window always remains at the bottom of the file. This is pretty simple, but here’s a snippet of to show how to keep an item positioned at the bottom of the stage:
// add listener to stage in constructor;
stage.addEventListener( Event.RESIZE, onResize );
// resize listener in class body;
private function onResize () : void
{
knockout.y = stage.stageHeight - knockout.height;
}
“Flash has an annoying tendency to force itself to render above of all other content,”
Wow. Where have you been the last ten years? Browsers have varied greatly in their ability to integrate plugin rendering. (Player doesn’t care; it’ll just pipe its output wherever the HTML tells it to go.)
For any such recommended technique, you’ve really got to provide a browser matrix (brand, platform, and version) as well as a feature matrix, to avoid prior incidents like “prints upside down in IE” or “ignores key events in FF” or whatever.
jd/adobe
9:16 am / June 30th, 2008
John,
Thanks for pointing out that Flash isn’t actually the one in charge of positioning.
While we mostly ran into this with Safari 2, it’s totally possible that other browsers have, or will have flickering / sorting issues while rendering transparent Flash content. This technique is just one way to ensure a more consistent user experience across the board.
Here’s a version without the area knocked out for those interested.
3:39 pm / June 30th, 2008
You clearly point out that you are solving the layering problem where things under flash become inaccessible.
Im having the same problem, but im a little confused…. No offense of course, im just trying to solve a problem and I implemented your example and used knockout to remove a square, the form elements under my flash embed are still inaccessible in FireFox, Opera and Safari..
Im not at all convinced your transparent flash is “over” the HTML in your example. I guess this would be more convincing if you used %80 transparency in the flash movie and punched a smaller whole in the flash, then we could clearly see the flash overlaid on the html elements. I would definately be convinced if the post solved my problem.
Thanks in advance
2:09 pm / July 25th, 2008
@shanimal - My first impression is that you may not have the wmode property set to transparent in your HTML (as described above), especially since you said it doesn’t have any effect across 3 major browsers.
Since all our source code is available, please feel free to download it and take a look at the example yourself. Also, if you’d like to post a link to an example of your own, I’d be happy to take a look.
9:10 am / July 28th, 2008