views:

968

answers:

6

One of our newer products is a walk-on video system, in which a character appears in an absolutely positioned DIV and gives a little presentation. We're using Flash 9, AS3. Unfortunately, in order to make him appear in front of the website content, we need to set his Z-index to a value higher than the page content.

On some websites and browser sizes, he blocks parts of the site interface. This makes some websites essentially unusable if we have the walkon videos in there. Is there a way to pass mouseover and click events captured by the Flash movie to the containing page so the navigation underneath is still accessible?

I'm considering writing a huge ugly Javascript module that will iterate through all page elements and call their onClick if they are under the mouse position within the Flash movie... but such a method will be inconsistent and really kludgy. Help!

A: 

You also will probably have other fun, like you're transparent regions wont be transparent on certain linux installations ( almost all that I have used ) especially under 64 bit ( Adobes fault entirely here ).

Also, on these systems, it can be impossible to execute javascript inside flash.

There are reasons why people like me /loathe/ flash and simply block it from running.

And all the above are things you need to consider.

Kent Fredric
A: 

Thinking outside the box here...

Can you set up your character such that it repositions itself when the mouse goes over it? That way, it will move away from any control that it is covering when the user wants to click it.

Hope this helps.

BoltBait
A: 

My first thought is to minimize the area the animation takes up making the flash as small as possible. I suspect users will realize that they can't click through the animation itself and if you keep the bounding box to a minimum that will remedy the problem somewhat. I assume you need the guy to walk around a bit, maybe you can solve that by moving the actual flash "window" around the page using javascript.

The simplest option is to simply hide the animation on mouseover, letting the clicks through that way.

grapefrukt
+2  A: 

Here is a demo of drag and drop between flash and javascript. Maybe you can use something similar (Here is the source code).

Turambar
A: 

You could also give users the option to hide the animation if it's in their way (or if they think it's annoying).

Of course, if the animation gives critical info, you'd need a non-animated alternative, but you need that if you want to support mobile users anyway.

Nathan Long
A: 

Lot of good suggestions here, thanks. Keep them coming!

Probably the best thing to do is change his Z-Index to put his containing div behind the website content when the mouse cursor goes over him. He's also got hide/mute/play buttons that will need to remain on top, but I think we're going to have to split the animation into 2 separate movies anyway. :(