An accessible solution to Flash not receiving focus in browsers other than I.E. This solution works in I.E, Chrome, Firefox and Safari, and offers a much more accessible way of dealing with Flash objects in a page.
ActionScript JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


* Cross browser tabbing solution/engine for Flash projects - see for an example of this in action
* Released under MIT license:
* @author Richard England 2011 and Gamelab UK
* @see /
* @version 0.1

The problem - see

A Flash movie embedded in an HTML page does not receive tabbing focus/key events when 
the page first loads in a web browser. The user therefore cannot tab into buttons and interactive elements.



In order for a Flash movie to capture key events, the movie itself must first be given 
focus from the browser. Web browsers do not automatically give keyboard focus to Flash movies, 
or any other embedded content.


The Solution

The code provided is a combination of AS3 and Javascript/JQuery. It will loop through all 
InteractiveObject and DisplayObjectContainer objects, checking to see if they have accessibility 
properties (tabIndex, accessibility name and description, etc). It will pass an array of these 
properties back to the page through ExternalInterface to JS functions, which will then build an 
"invisible" HTML form off the screen.

Each element of that HTML form will represent an InteractiveObject in Flash, and can be tabbed 
and entered, passing the relevant "MouseEvent.CLICK" event back to the Flash player. in effect 
this allows the user to appear to be seamlessly tabbing through fully accessible Flash content, 
and interactiing with it, when in fact they are actually interacting with a HTML form, with 
javascript focus and click events being passed back to the Flash object.



Add the tabbing.js (also swfobject and jquery required) to your html:

<!-- required for embedding swf in page -->
<script type="text/javascript" src="js/swfobject.js" charset="utf-8"></script>
<!-- required for tabbing JS functionality -->
<script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
<!-- this is the tabbing JS core -->
<script type="text/javascript" src="js/tabbing.js" charset="utf-8"></script>

Add the Flash object to your page

<div id="flashreplace">
<script type="text/javascript">
	var flashvars = {};

	var params = {};
	params.allowfullscreen = "true";
	params.allowscriptaccess = "always";
	var attributes = {}; = "flashplayer";
	swfobject.embedSWF("swf/CrossBrowserFlashTabbing.swf", "flashreplace", "550", "400", "9.0.0", "expressInstall.swf", flashvars, params, attributes);

Add the following import to your Main constructor class:

import com.richardengland.utils.Tabbing;

Create the tabbing object in your initialisation code:

tabbing = new Tabbing(this);

If you want to refresh the tabbing list (which will build a new html form to reflect changes in the user interface):


If you want to create a limited tabbing list (e.g. for a "popup" interface window in your GUI):

tabbing.createNewTabsFor( popupObject ); 

... and that's it!

Hope it helps someone...