Replacing that ugly yellow actionscript focus rectangle

Submitted by Eric on October 18, 2009

If you've ever put together forms using actionscript/Flash you might have noticed that your form elements are automatically assigned a tab index much like a browser may do. This is great but the user feedback regarding focus is not quite as refined as html forms. Html forms give subtle but consistent cues communicating input element focus.

Flash does this, by default, with blocky yellow rectangles around the text or button. This behavior style can be overridden in actionscript just as it can be in html. This is a quick look at one approach.

First of all, let's turn it off on the elements we want to customize. Assume that we have a graphical submit button on a form called "graphicalButton" that gets wrapped in that clunky yellow box when tabbed to. We can turn it off thus:

graphicalButton.focusRect = false;

Nice, but as good interaction builder citizens, we need some feedback that it has received focus. Let's also pretend that our grapahicalButton movieclip or button has an MouseEvent.MOUSE_OVER as well as an MouseEvent.MOUSE_OUT event listener attached. Probably something like this:

grapahicalButton.addEventListener(MouseEvent.MOUSE_OVER, myButtonHoverFunction);

We can add some additional event listeners to manually fire those existing listeners so that our tab-focused state is the same as our mouse over state.

// setup those focus listeners
grapahicalButton.addEventListener(FocusEvent.FOCUS_IN, changeHaloFocus);// manually trip the button's focus event
grapahicalButton.addEventListener(FocusEvent.FOCUS_OUT, changeHaloBlur);// manually trip the button's blur event
 
 
// manually trigger the MOUSE_OVER event as our focus event 
public function changeHaloFocus(e:FocusEvent):void {
  e.target.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_OVER, true, false));     
} 
 
// manually trigger the MOUSE_OUT event as our blur event 
public function changeHaloBlur(e:FocusEvent):void {
  e.target.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_OUT, true, false));     
}

Check out the behavioral differences here:
View Example

Download a sample fla note: uses the TweenMax animation library