Transparent Flash Movies

While surfing around for info on the World Cup, I spent a little time on ESPN. As I was reading a page, a sprawling animation appeared on the page over the text I was reading. Being curious, I right clicked on the animation and, sure enough, the Flash Player menu appeared. After a while the animation disappeared.

So I set off to figure out how to do this. I found this technote at the Macromedia (Adobe) site. Seems that there are a few ways to do this, but the key thing is a single parameter called wmode, which is short, I presume, for Window Mode.

• Go to the File Menu > Publish Settings. Go to the HTML tab and set the Window Mode to Transparent Windowless. Click OK and Publish the movie (Shift + F12).


• Publish your flash movie and add the following to the resulting HTML file: <param name="wmode" value="transparent" />


• Add your flash movie to a web page in Dreamweaver. Click the Parameter tab in the Properties Panel. Add the parameter wmode with a value of transparent.

OK, that's all good. Now you have a transparent Flash movie, but what about layering it over content or layering content over it? Going back to the ESPN example, the Flash movie was over the text I was reading (a little annoying, but it wasn't there for too long). So they must've used DHTML layers. In the example I created, the Flash movie is over the text. Both elements are set up in DIVs and then I used CSS to absolutely position them to the same location.

You have to use absolute positioning in order to use z-index, which is the key factor in having one element over the other. Take a look at the CSS:

#body { position: absolute;
top: 9px;
left: 10px;
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
line-height: 16pt;
color: #ccc;
width: 550px;
z-index: 0;
}
#movie {
position: absolute;
top: 9px;
left: 10px;
z-index: 1;
}

Changing the z-index of the Flash movie to 0 (zero) and the body text to 1 would change the order. Now all I have to do is figure out a way to get the Flash layer to disappear after a certain interval. The ESPN example left no trace of a Flash movie. After the movie disappeared, I right clicked where it was and the Flash Player menu wasn't available. I'm assuming some JavaScript was used to hide the Flash layer after a certain amount of time. If anyone knows how to do this, please help me out.

Before I go, I want to mention 2 articles that helped me with this issue, this one at joshuaink.com and this one at Veerle's blog.