If you ever have tried to create a circular tab loop with native ActionScript you apparently forgot to provide your insights the community. Anyway, I couldn’t find any related, since the web searches coughed up everything to Flash and Flex but not AS.

Well, what is this article about? Implementing a tab loop seems to be pretty easy. We make our compoents to be tab-enabled and are done. Unfortunately, it isn’t that simple. There is a trap we may fall into with the Internet Explorer’s default swf parameter seamlessTabbing. The parameter is described in the Flash Player 7 release notes. It is set to true by default and makes sure that a flash movie appears in the regular tab order of the browser window. If we hit TAB in a swf application, the focus moves either to the next focusable element within the swf or to the next browser element such as a button, link or even the URL bar.

It is actually pretty unclear, under which conditions the focus leaves the movie. To understand the problem, I have written a small test application. In this article I will explain what the keyboard focus in Flash depends on.

The test application

This is a PHP page with a form containing some configuration variables for the embedded movie. The movie appears three times in this page to be able to test the focus of multiple Flash objects. Above and below the movies are HTML buttons that may be clicked to set the focus on and watch the tab loop by hitting TAB repeatedly.

The PHP and ActionScript sources are available on GitHub.

You should test the different configuration parameters in at least Firefox and IE.

The test results

Firefox: Tab loop ignores Flash movies

Test: Click one of the buttons above the movies and hit TAB multiple times. Change properties and do it again.

Link: Test 1
Configuration: seamlessTabbing=true, preventDefault=false, focusToStage=false

Note: This is what we expect.

IE: Tab loop broken with movies without tab-enabled children

Test: Click one of the buttons above the movies and hit TAB multiple times.

Link: Test 2
Configuration: seamlessTabbing=true, preventDefault=false, focusToStage=false

IE: Tab loop correct with movies that contain tab-enabled children

Test: Click one of the buttons above the movies and hit TAB multiple times.

Link: Test 3
Configuration: seamlessTabbing=true, preventDefault=false, focusToStage=false

IE: Tab loop stops with the first movie when seamlessTabbing=false

Test: Click one of the buttons above the movies and hit TAB multiple times.

Link: Test 4
Configuration: seamlessTabbing=false, preventDefault=false, focusToStage=false

Note: We would rather expect the loop to ignore the movies.

IE: Tab loop stops with the first movie when focus events blocked

Test: Click one of the buttons above the movies and hit TAB multiple times.

Link: Test 5
Configuration: seamlessTabbing=true, preventDefault=true, focusToStage=false

Note: This is the same behavior as with seamlessTabbing=false.

IE: Focus moves out of movie even when focus events blocked

Test: Click the last tab-enabled child of a movie. Then click the movie’s stage or a not tab-enabled child. Hit TAB. The focus leaves the movie.

Link: Test 6
Configuration: seamlessTabbing=true, preventDefault=true, focusToStage=false

Note: The focus should actually not move out. Apparently the player stores the last focused item which tab-enabled property is set to true. When we then hit TAB and no item is currently in focus, the player checks, if the stored child has a successor that can be focused. If there is none, it releases the movie focus.

IE: Flash loses focus to the browser without any tab-enabled child

Test: Click into a movie. The movie activates. Hit TAB. The focus moves out.

Link: Test 7
Configuration: seamlessTabbing=true, preventDefault=*, focusToStage=*

Note: To keep the focus in the movie, we at least need one child with tabEnabled set to true.

IE: Focus stays in movie if default focus is set to the stage

Test: Click the last tab-enabled child of a movie. Then click the movie’s stage or a not tab-enabled child. Hit TAB. The focus stays in the movie.

Link: Test 8
Configuration: seamlessTabbing=true, preventDefault=true, focusToStage=true

Summary

Managing the application’s focus could be quite easy if we wouldn’t have to consider the seammless tabbing capabilities of Active-X players. When we develop third party solutions, we simply cannot rely on a property that is set to the embedding HTML container.

Workaround 1

To circumvent the problem we might cancel the KEY_FOCUS_CHANGE event. However, even this does not cover all possible situations. A workaround seems to be to set the stage’s focus to the stage itself in the case the focus is not gained by any child object. Anyway, we need to set at least one child to be tab enabled.

Workaround 2

Another workaround involves 2 tab-enabled Sprite instances that never receive focus and do not contain visible content. Internally, the Flash Player would treat them as possible focus targets and therefore wouldn’t release the movie’s focus.

Note, in both cases we need to default prevent the standard focus change events and implement our own focus management.