About Being a Do'er

I recently was presented with the challenge of integrating some Adobe Flash-based content into a design that required static imagery and other HTML content to show visible ABOVE that content.  Whether it is because I didn’t use the appropriate search terms or this topic has started to become a bit stale, I found very little help from my web searches with Google.

I was able to piece together quite a bit of missing knowledge, though, in the quest to solve this problem. 

I knew that with other content in HTML I could easily layer images, divs, and other elements by incorporating the css z-index property.  Here is a quick example of its use:

#header {
position: absolute;
z-index: 2; 
} 

Note that the z-index property will only be parsed by the browser when it is accompanied by the ‘position: absolute’ setting.  The above css will place any items having a lower z-index value below this item in the view stack, and any items with a higher z-index value above it in the view stack.  (Think of a stack of pancakes with the bottom pancake representing z-index:1 and pancakes above being counted up as they stack.)

That part, to me, was easy as I had done this type of work with image files many times in the past.  I found, however, that this method did not immediately work with my flash file.  The flash plugin likes to layer over the browser to look like it is part of the browser window, when in fact it is a separate application from the browser (that’s why we need tags like <OBJECT> and <EMBED>.)

Since it is the case that the flash player is separate from the HTML pane in the browser, there needs to be some intervention, and the way to do that is with Javascript.  The preferred method is with the Javascript library swfObject (now in version 2.2 and the project is hosted through Google code.)  The project web site for swfObject has quite a bit of documentation and goes pretty far into how to implement flash using this library, and I highly recommending working through the documentation to know what is going on here.

The issue I ran into, however was that I was unable to figure out how to get the layers to work together with my HTML.  I had read on many other programming forums and other blog posts that the trick was to not only get the DIV into my stack of pancakes correctly, but also to add the transparency mode to the flash object.   Since the swfObject functionality inserts the embeded flash movie file into the view after the HTML is rendered we can apply attributes to the flash embed code through the swfObject instance.

Here is the Javascript for the addition of the transparency attribute:

<script type=”text/javascript” src=”/js/swfobject.js”></script>
<script type=”text/javascript”>
var flashvars= {
sourceUrl:”mywebsitepage”
};

var params = {
wmode:”transparent”
};

var attributes = {
id:”myMovie”
};

swfobject.embedSWF(“/swf/myFlashFile.swf”, “destinationDIV”, “width_in_pixels”, “height_in_pixels”, “version_number”,”/swf/expressInstall.swf”, flashvars, params, attributes);

</script>

Notice there are three areas where you can place flash variables (anything the SWF file needs to receive from the web page,) params (anything of the parameters that can be applied to the Object tag, ) and the attributes (define the Object tag attributes.)  The one to note here is the param labeled ‘wmode.’  Setting this value to transparent allows the magic.

The great thing about using a library like swfObject is that this code can be very flexible and you can depend on the BEST cross browser support available for your work.  For any further details about swfObject and code examples visit the project at http://code.google.com/p/swfobject