How do you keep Flash objects and animations from overlapping your dynamic javascript?

Adobe Flash (It’s weird not calling it Macromedia Flash anymore…) on a website doesn’t like to play nice with DHTML objects when they overlap on the layout of a website. I’ve run into this issue a few times. Sometimes a dynamic drop-down menu will not play nice with a flash object that it can’t overlap.

Here is a good visual example of Flash & DHTML conflicting

You can’t get that drop-down menu to lay over the top of that flash animation in some cases. At least, you can without probably going through too much trouble to make it worthwhile. If you want to take a crack at it I have some links later on in this article that will get you going in the right direction.

Flash & DHTML Overlap Avoidance is the most bullet-proof option

• I like to avoid situations like this so that I don’t get hung up spending too much time on something that is minimal in importance to the overall scope of the site.
• I like to and sometimes need to make dhtml and flash work around each other in a website in a short matter of time.

For those two reasons I generally will say that you should:

Plan around the fact that Flash animations will probably overlap some of your dhtml stuff.

Just design with this issue in mind.

Make sure any dhtml stuff won’t overlap with flash stuff.

Simple.

Where should a person start looking to deal with the Flash & DHTML overlap issue?

If you want to try to make your flash stuff play nice with your dhtml stuff, then check out these links and start playin’ with code and techniques to make it work for your situation:

• About Flash content displaying on top of all your DHTML layers
• About making an Adobe Flash movie with a transparent background
• A fun little forum discussion about Flash overlapping DHTML
• A good forum discussion about this Flash & DHTML confict

A iFrame could be the answer

I’ve also seen suggestions to put the Flash animations in an iframe. This works, but then again, your flash animation is in an iframe. Most would consider this not worth the trouble. I would anyways. The technique could be called the iFrame Shim, from what I’ve heard. Either way:

• A good article about the “iFrame Shim”

There are some tutorials out there too

If you must, here’s a good tutorial:

• Tutorial to layer Flash and HTML

You will find that there are techniques to make Flash not overlap your dhtml, plan on spending a little bit of time to make it work for your situation and you’ll be alright. But, if you don’t have much time to deal with this conflict, avoid it.