How to embed an unobtrusive flash?

Question

I have an embedded flash that is transparent so it looks like part of the background. I achieved that by setting wmode to transparent.

My problem is that the area underneath the flash becomes inaccessible, even though the flash is transparent. Therefore I cannot click on any links or buttons that are under the flash object.

How do I make the flash unobtrusive?

Clarifications:
- the flash is transparent but it has an animation that shows in the background.
- wmode set to transparent lets you click the contents underneath in IE but not Firefox.

Answer 1

The problem is that in your document, the object/embed that contains the Flash animation is on top of the elements you need to access. You need to put these elements on top of the Flash animation instead of the other way around.

The way to do this is to set the object's wmode to opaque, and use the CSS z-index property to set it to a z-index lower than the z-index of whatever elements you want to float over it -- you can do this in CSS or just with inline style="" attributes.

Here's an example using SWFObject to create the object/embed tags, but the same principle applies if you are just hardcoding these into your HTML.

Answer 2

I think I might have found the answer to my own question.

There is a javascript library called Unobtrusive Flash Objects (UFO), which got deprecated and now is swfobject.

I will give it a go and report back.

Answer 3

What is the purpose of the Flash? If it doesn't do anything visible, then you can make it 1 pixel in size and/or put it in a div that is absolutely positioned off the screen.

Answer 4

I didn't know there could be such a thing as unobtrusive flash.

On a more serious note: what are you trying to accomplish with a layer of flash anyways?

I suggest taking a step back and looking at the page as a whole. If the things below the flash are needed, then make the flash go somewhere else or replace it with actual elements in the page to serve the same purpose.