How do I make flex only consume mouse scroll and keyboard events when it's useful, and otherwise pass it on to the browser?

Question

This one's been irking me for a while. When I'm using the mouse scroll wheel to scroll up and down in a webpage, and a flash movie comes into the path of the cursor, the scroll wheel stops working. Also, when a flash movie has focus, you can't use browser shortcuts like Ctrl + L or Ctrl + R.

I'm writing a flex application now and I'd like to find a solution, so that at least my users aren't plagued by this inconsistency of the user interface behavior.

I should think there would be a way to tell flash to propagate such events as the mouse scroll wheel and keyboard input back up to the browser unless they occur in an element for which they are useful, like in a flex textarea. I can't find any solutions out there though, nor even anyone talking about it.

Specifically, how can I make it so that:

• When the user is scrolling with the mouse, the browser scrolls unless the mouse is over a flex container with scrollbar, or another component that wants to scroll.
• When the user presses a button or combination of buttons on the keyboard, it will be propagated to the browser unless there is an active keyboard listener, or the cursor is in a text field, etc.

Answer 1

Communication between the browser and flash is done via ExternalInterface. ExternalInterface allow you to call ActionScript methods from JavaScript and vice-versa.

Good luck with that because experience shows it's often painfull to deal with keyboard shortcuts and browser inconstancy

Answer 2

I faced the same problem. But the solution I went for requires extensive changes if you have a complex UI already built in flex.

Make the user interface using HTML and communicate via javascript with a hidden flex (or flash) object.

For example, pass whatever string you want to show in flex textarea as a parameter in an ExternalInterface call. Then show that string in a regular <textarea> html tag.

This strategy has worked well for my projects

Answer 3

Add an event that will handle if you are inside the flash when you are inside the flash call External interface to disable scrolling and get Focus for flash.

When you go outside the flash you still might be able to trigger the event an still call an External interface to get focus to browser and stop the flash scrolling.