Setting the tab order

The tab order in Flash does not follow a predictable order from left to right or top to bottom. Instead, Flash calculates the order around the top-left corner of the Flash content. For good game flow, you want the user to tab through all the puzzle pieces first before tabbing through the drop spots in order, from 1 to 5. In Flash, assign all the selectable elements a tab order:

// accessibility
 btn_access.tabIndex = 1;
 pp2.tabIndex = 2;
 pp3.tabIndex = 3;
 pp5.tabIndex = 4;
 pp4.tabIndex = 5;
 pp1.tabIndex = 6;
 hitarea1.tabIndex = 7;
 hitarea2.tabIndex = 8;
 hitarea3.tabIndex = 9;
 hitarea4.tabIndex = 10;
 hitarea5.tabIndex = 11; 

The tab order on the puzzle pieces is scrambled, just like the pieces are mixed up on the Stage. If you put this code into the initGame() function, it will be executed before the user starts the game. You want the user who tabs through the game to tab to the accessibility button first to get instructions on how to play the game. (More on the accessibility button and its functions later.)

With all this code, you should now have a puzzle where you can pick up and place pieces not only by using the mouse, but also by using the keyboard and tabbing (no audio yet).

One more thing. After a player places a piece, you want that puzzle piece and its hit area to stay out of the tab order. This helps distinguish between the pieces that still need to be placed and the ones that have already been placed. You could, of course, just place the following code in the placePiece() function:

_root[ppName].tabIndex = -1;
 _root[ppName].enabled = false;
 _root["hitarea" + selectedPiece].tabIndex = -1;
 _root["hitarea" + selectedPiece].enabled = false; 

But when you try this out, you will notice that, after placing a piece, the focus jumps to another piece in the tab order. The focus jumps because after you set the tab order to a negative value—which leaves it out of the tab order—it cannot hold its focus. When you install the audio onRollOver in the next section, this will become confusing because the audio will start playing without the user having tabbed to this item.

In order to get around this problem, you still want to execute this code—but not until the user tabs away from the hit area. To do this, set a new global variable, called justHit, that you set to true when you have just placed a piece. Also create a new function, called takeOut(), that disables and takes the puzzle piece and the hit area out of the tab order by assigning it a negative value. Then you want to add the following code to all the hit areas and puzzle pieces onRollOut:

hitarea1.onRollOut =
 hitarea2.onRollOut =
 hitarea3.onRollOut =
 hitarea4.onRollOut =
 hitarea5.onRollOut =
 function() {
     n1 = Number(subString(this._name,8,9));
     takeOut(n1);
 }

  pp1.onRollOut = 
pp2.onRollOut = 
pp3.onRollOut = 
pp4.onRollOut = 
pp5.onRollOut = 
function() {
     n1 = Number(subString(this._name,3,4));
     takeOut(n1);
 }

  function takeOut(n1) {
     if (justHit) {
         trace("pp" + n1+ "justHit"); 
        _root["pp" + n1].tabIndex = -1;
         _root["pp" + n1].enabled = false;
         _root["hitarea" + n1].tabIndex = -1;
         _root["hitarea" + n1].enabled = false; 
        justHit = false;
     }
 } 

Place this line of code in the placePiece function for each hit area:

// when it is in the right place, place it
     } else if (_root.selectedPiece == n1) {
         placePiece("pp" + selectedPiece);
         justHit = true;
 

Now when the player places a piece, the focus will not jump away until the user tabs away. After tabbing away, the placed puzzle piece and its hit area will be left out of the tab order and will be disabled for the mouse.