Flash steals browser focus

Question

I have a flash app in my page, and when a user interacts with the flash app, the browser/html/javascript stops receiving keyboard input.

For example, in Firefox control-t no longer opens a new tab.

However, if I click on part of the page that isn't flash, the browser starts receiving these events again.

Is there anyway to programatically (either through flash or javascript) to return focus to the browser?

After the user clicks a button in flash, I have the flash executing a javascript callback, so I've tried giving focus to a form field (and to the body) through javascript, but that approach doesn't seem to be working.

A perhaps more concrete example is Youtube. They also have this problem. When I click the play/pause button, or adjust the volume, I would expect my browser keyboard controls to still work, but they don't, I have to click somewhere on the page outside the movie area. This is the exact problem I'm trying to solve.

Answer 1

I think Adobe needs to drop the focus when the mouse goes out of its client area, or provide an option to do so.

However I think most Flash developers (and especially those who make games) rely on the fact that keyboard input is caught by the flash application regardless of where the mouse is.

Answer 2

You can return the focus to the browser by doing a geturl can calling javascript on the HTML page:

document.body.focus()

How you do this in your Flash movie will depend on how the user interaction with the movie works. You could keep doing it on a timer, or when a control loses focus, or when the mouse moves. It depends.

Answer 3

You can use the ExternalInterface class within Flash to call JavaScript. For example you could set up a function on an interval (Event.ENTER_FRAME for example) to call the JavaScript function that @Diodeus mentioned:

document.body.focus();

Or, an even better solution would be to add an event listener to the flash root (stage) to listen for when the mouse leaves Flash. You can set up this event to move focus to the document.body.

AS3

package {
   import flash.display.*;
   import flash.events.*;
   import flash.external.ExternalInterface;

    public class TestMouseLeave extends Sprite
    {
     public function TestMouseLeave()
     {
      // Add event listener for when the mouse LEAVES FLASH
      addEventListener(MouseEvent.MOUSE_OUT, onMouseLeave);
     }

     private function onMouseLeave(ev:Event):void
     {
      var jslink = new ExternalInterface();
      jslink.call("changeFocus");
     }
    }

}

Javascript on your page:

<script type="text/javascript" language="javascript">
    function changeFocus(){
     document.body.focus();
    }
</script>

Let me know if you want an AS2 example, and I'll post it up.

Wanted to make a note about this solution: Once you push focus back to the browser, you will require that the user click on the Flash plug-in again to activate user input inside the flash plug-in. This could be a jarring user experience, and is something to consider when using this solution.

Answer 4

    <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();">
    <mx:Script>
     <![CDATA[
      private function init():void {
       i.setFocus();
          this.addEventListener(KeyboardEvent.KEY_UP,keyPressed);
      }

      private function keyPressed(event:KeyboardEvent):void {
       if(event.keyCode.toString()=="84" && event.ctrlKey==true)
        ExternalInterface.call('newtab');
      }

     ]]>
    </mx:Script>
    <mx:TextInput x="23" y="268" width="256" id="i" text="Text Box"/>
</mx:Application>

<script type="text/javascript">
function newtab(e){
    document.body.focus();
    window.open('about:blank');
}
</script>

Now, what happens with other keyboards? is 84 standard for T? I like the focus idea, but in full browser apps there is not as much room to lose the focus. The user could change the key combo as well, I don't think these is much of a complete fix for this one without flash polling the command config from the browser and then listening for the combo as we are basically doing here. I dunno.

This also just attempts to open a new window after giving focus, there is no sense to me in making the user press it twice unless they block the window like a popup. But focus is called first so, if that happens the second attempt should work. You could alert the user in a browser app if needed.