Flash Player 10 - Deactivating Flash elements using JavaScript/ CSS

Hi everyone

I am busy building a site that uses Flash, jQuery and standard JavaScript.

My Problem: It seems that the communication between these platforms often takes some time to complete. I can see that some users will think that nothing is happening and click the Flash buttons over and over. This will cause even more of a wait since more Flash to JavaScript communication is triggered.

My solution: What I would like to do is make my Flash content un-clickable until my JavaScript and jQuery are done running. I don't want to do this by sending JS commands to the Flash since I do not want to increase the communication between the two. What I have done is use JS to set the CSS "curser" property to the "wait" when you move it anywhere on the page, and to "not-allowed" when you move your mouse over the Flash content, at least until one jQuery animation is done running.

The problem with my solution: It seems that when I move my mouse over the Flash element focus shifts off of the html and on to the embedded Flash object. This means that the "not -allowed" curser pops up for just a second and then disappears.

What I ned to figure out: I was wondering if anyone has an idea of how to prevent the embedded swf object from accepting focus? In other words I would like the Flash buttons to be deactivated when you click one of them or one of several html elements that trigger jQuery animations. I don't want to use a JS command to call a Flash function that does this, since I don't want to add to the communication time, which is in reality my original concern.

Any suggestions on how to make this work or for a better solution would be much appreciated.

Hi, you could place a div with a transparent gif over the top of the Flash content. That way, the Flash content will be visible but not clickable. When the rest of the system is ready then use JS to hide the transparent gif div.

Thanks for the reply. I was actually thinking of trying something like that. I'll give it a go and let you know what I can figure out

Thanks Tann San, that works perfectly

This is actually a case of good usability. Of the rules for usability is feedback. When a user clicks something, tell the user it was clicked.

In your case, if a button is clicked and there is some communication with a server and you want to prevent the user from doing anything while the communication is active, gray out the screen and put a message up that says "working" or "busy" or, if you can, give progress like "50% complete...". Just never leave a user guessing about what's happening.

Thanks Frank, that is good advice.

In this case I used the wait curser to relay this message, though a message does not sound like a bad idea as well. The links are also deactivated until the command is processed. The wait is rarely very long though, so in this case I will content myself with what I have.

Thanks for the advice once again