Adobe Flash PositioningI used to have a problem of controlling flash elements on my sites.. specifically I wanted to be able to specify the stacking/zIndex order of the element. Sometimes I want flash to show up in front of or behind other content. My company does a ton of video/audio production for tv and radio spots and most of the time we use flash to make them available online. On one site we have 6 different flash flv movies that are all the same size and are in the same position on the page. But only 1 is displayed at a time based on what the user wants to watch. So the selected flash movie needs to have the highest stacking order/zIndex to be the only viewable movie.

The reason I choose to load all 6 files at a time is so that when a user clicks 1 of 6 buttons to select a video, it INSTANTLY is front and center.. literally milliseconds because all that is happening is moving the video in front of the others.

Controlling flash to show in foreground or background on command

Basically the “hover” buttons I’ve created using css, are placed under the flash animation clip. I can’t come up with a good solution. Any ideas??

The Solution is wmode and css

I used to have this problem all the time too! Very frustrating. I figured out that there is a parameter for embedding flash files that change the way the flash is displayed in the DOM.. After looking through a lot of macromedia flash documentation, I learned about flash’s wmode attribute.

wmode

The flash wmode attribute has three different values.

From the official flash documentation

wmode attribute/parameter
Values:

  1. Window
  2. Opaque
  3. Transparent

The default value is Window if this attribute is omitted. Applies to object only.

Description:
(Optional) Lets you use the transparent Flash content, absolute positioning, and layering capabilities available in Internet Explorer 4.0.

Window plays the application in its own rectangular window on a web page. Window indicates that the Flash application has no interaction with HTML layers and is always the topmost item.

Opaque makes the application hide everything behind it on the page.

Transparent makes the background of the HTML page show through all the transparent portions of the application and can slow animation performance.

Opaque windowless and Transparent windowless both interact with HTML layers, letting layers above the SWF file block out the application. The difference between the two is that Transparent allows transparency so that HTML layers below the SWF file might show through if a section of the SWF file has transparency; opaque does not.

Using the wmode attribute/parameter

I like to use 1 of 2 awesome javascript scripts to insert flash into my page, which fixes the microsoft activex problem.

  1. SWFObject
  2. Unobtrusive Flash Objects (UFO)

Basically to get your site working change:

<script type="text/javascript">
var so = new SWFObject("intro.swf", "flashcontent", "800", "290", "7", "#ffffff"); so.write("flashcontent");
</script>

to

<script type="text/javascript">
var so = new SWFObject("intro.swf", "flashcontent", "800", "290", "7", "#ffffff"); so.addParam("wmode", "transparent"); so.write("flashcontent");
</script>

Which browsers does this work in? If it’s all of them: you know how to fix a bug even the owners of Flash don’t. Sadly I expect that to just be IE7 for Windows. Very aggravating for the rest of us.

This is a trick that I learned towards the end of 05′ for a site that I was developing. I’m obsessed with cross-browser functionality and I got the flash element to disappear behind other content by using the zIndex css attribute with javascript.

I had 5 elements to control, 5 divs that held various content, including flash video. By apsolutely positioning each of the 5 divs within 1 relative parent div I was able to manipulate the stacking order of the divs by applying a className.

CSS Classes

.z6 {z-index:9119;}
.z0 {z-index:459;}
.z1 {z-index:449;}
.z2 {z-index:439;}
.z3 {z-index:429;}
.z4 {z-index:419;}

Applying CSS Classes with JavaScript

Using an easy javascript example from my best javascript code snippets 2007 article its incredibly easy to make this work. Add an event to each of the buttons that when clicked changes the className of the videos containing element to have the highest z-index.

I created an array of the the 6 video containers using a quick getElementsByTagName and applied the className to all of them at once using a simple foreach loop.

document.getElementById("video1div").className='z6';

Related Articles