Javascript – Flash not interacting with Javascripts in browser inside the app

This solution is written in PHP, but it should be easily adapted to other languages.

The original .htaccess regex can cause problems with files like json-1.3.js. The solution is to only rewrite if there are exactly 10 digits at the end. (Because 10 digits covers all timestamps from 9/9/2001 to 11/20/2286.)

First, we use the following rewrite rule in .htaccess:

RewriteEngine on
RewriteRule ^(.*)\.[\d]{10}\.(css|js)$ $1.$2 [L]

Now, we write the following PHP function:

/**
 *  Given a file, i.e. /css/base.css, replaces it with a string containing the
 *  file's mtime, i.e. /css/base.1221534296.css.
 *
 *  @param $file  The file to be loaded.  Must be an absolute path (i.e.
 *                starting with slash).
 */
function auto_version($file)
{
  if(strpos($file, '/') !== 0 || !file_exists($_SERVER['DOCUMENT_ROOT'] . $file))
    return $file;

  $mtime = filemtime($_SERVER['DOCUMENT_ROOT'] . $file);
  return preg_replace('{\\.([^./]+)$}', ".$mtime.\$1", $file);
}

Now, wherever you include your CSS, change it from this:

<link rel="stylesheet" href="/css/base.css" type="text/css" />

To this:

<link rel="stylesheet" href="<?php echo auto_version('/css/base.css'); ?>" type="text/css" />

This way, you never have to modify the link tag again, and the user will always see the latest CSS. The browser will be able to cache the CSS file, but when you make any changes to your CSS the browser will see this as a new URL, so it won't use the cached copy.

This can also work with images, favicons, and JavaScript. Basically anything that is not dynamically generated.

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.