flash interactivity_focus_management

We are now going to look at focus management in ActionScript 3 which has introduced two new events:

• Event.ACTIVATE: event broadcast when the Flash player gains focus.
• Event.DEACTIVATE: event broadcast when the Flash player loses focus.

These two events are broadcast by all displayObjects either present or not in the display list. Thanks to these events we will be able to close the menu when the animation loses focus then reopen it in reverse.

To know when the user no longer has focus on the player you can listen to the Event.DEACTIVATE event of any DisplayObject whether it is in the display list or not:

// subscription to the Event.DEACTIVATE event in the container
container.addEventListener ( Event.DEACTIVATE, loseFocus );
function loseFocus ( pEvt:Event ):void
{
// recuperate buttons
var lng:int = pEvt.target.numChildren;
var button:Button;
for (var i:int = 0; i< lng; i++ )
{
// we recuperate each button in the menu
button = Button ( pEvt.target.getChildAt ( i ) );
// we target each Tween object
var myTween:Tween = button.tween;
myTween.func = Strong.easeOut;
// we define the departure and arrival points
myTween.continueTo ( i * 10, 1 );
}
}

Beware, the Strong class needs to be imported:

import fl.transitions.Tween;
import fl.transitions.easing.Elastic;
import fl.transitions.easing.Strong;

When the animation loses focus our menu closes with an inertia effect, the following image illustrates the result:

We have to reopen the menu when the application gets the focus. To do this we listen to the Event.ACTIVATE event:

function loseFocus ( pEvt:Event ):void
{
// recuperate buttons
var lng:int = pEvt.target.numChildren;
var button:Button;
for (var i:int = 0; i< lng; i++ )
{
// we recuperate each button in the menu
button = Button ( pEvt.target.getChildAt ( i ) );
// we target each Tween object
var myTween:Tween = button.tween;
myTween.func = Strong.easeOut;
// we define the departure and arrival points
myTween.continueTo ( i * 10, 1 );
}
if( pEvt.target.hasEventListener( Event.ACTIVATE) == false )
{
// subscription of the Event.ACTIVATE event in the
container
pEvt.target.addEventListener ( Event.ACTIVATE, gainFocus );
}
}
function gainFocus ( pEvt:Event ):void
{
// recuperation of number of buttons
var lng:int = pEvt.target.numChildren;
var button:Button;
for (var i:int = 0; i< lng; i++ )
{
// we recuperate each button in the menu
button = Button ( pEvt.target.getChildAt ( i ) );
// we target each Tween object
var myTween:Tween = button.tween;
myTween.func = Elastic.easeOut;
// we define the departure and arrival points
myTween.continueTo ( 60 * (i+1), 2 );
}
}

We trigger different movements using the continueTo method of the Tween object. We can play with the different values and properties to get different effects:

Here is the complete code of our dynamic menu:
// import of the Tween and Elastic classes for the type of movement
import fl.transitions.Tween;
import fl.transitions.easing.Elastic;
import fl.transitions.easing.Strong;
// creation of container
var container:Sprite = new Sprite();
container.x = 150;
container.y = 150;
addChild ( container );
// sections
var captions:Array = new Array ( "Homepage", "Latest", "Photos", "Links",
"Contact" );
function createMenu ()
{
var lng:int = captions.length;
var myButton:Button;
var angle:int = 360 / lng;
for ( var i:int = 0; i< lng; i++ )
{
// creation of instance of button symbol
myButton = new Button();
// activation of button behavior
myButton.buttonMode = true;
// deactivation of child objects
myButton.mouseChildren = false;
// modification of content
myButton.maLegende.text = captions[i];
// arrangement of instances
myButton.tween = new Tween ( myButton, "rotation", Elastic.easeOut,
0, i * angle, 3, true );
// a Tween object is created for the rollover effects
myButton.tweenRollOver = new Tween ( myButton.fondButton, "scaleX",
Elastic.easeOut, 1, 1, 2, true );
container.addChild ( myButton );
}
}
createMenu();
// capture of the click event on the main timeline
container.addEventListener ( MouseEvent.CLICK, clickMenu, true );
container.addEventListener ( MouseEvent.ROLL_OVER, rollOverButton, true );
container.addEventListener ( MouseEvent.ROLL_OUT, rollOutButton, true );
function rollOverButton ( pEvt:MouseEvent ):void
{
var myTween:Tween = pEvt.target.tweenRollOver;
myTween.continueTo ( 1.1, 2 );
}
function rollOutButton ( pEvt:MouseEvent ):void
{
var myTween:Tween = pEvt.target.tweenRollOver;
myTween.continueTo ( 1, 2 );
}
function clickMenu ( pEvt:MouseEvent ):void
{
// displays : [object Button]
trace( pEvt.target );
// displays : [object Sprite]
trace( pEvt.currentTarget );
}
// subscription to the Event.DEACTIVATE event in the container
container.addEventListener ( Event.DEACTIVATE, loseFocus );
function loseFocus ( pEvt:Event ):void
{
// recuperate buttons
var lng:int = pEvt.target.numChildren;
var button:Button;
for (var i:int = 0; i< lng; i++ )
{
// we recuperate each button in the menu
button = Button ( pEvt.target.getChildAt ( i ) );
// we target each Tween object
var myTween:Tween = button.tween;
myTween.func = Strong.easeOut;
// we define the departure and arrival points
myTween.continueTo ( i * 10, 1 );
}
if( pEvt.target.hasEventListener( Event.ACTIVATE) == false )
{
// subscription of the Event.ACTIVATE event in the
container
pEvt.target.addEventListener ( Event.ACTIVATE, gainFocus );
}
}
function gainFocus ( pEvt:Event ):void
{
// recuperation of number of buttons
var lng:int = pEvt.target.numChildren;
var button:Button;
for (var i:int = 0; i< lng; i++ )
{
// we recuperate each button in the menu
button = Button ( pEvt.target.getChildAt ( i ) );
// we target each Tween object
var myTween:Tween = button.tween;
myTween.func = Elastic.easeOut;
// we define the departure and arrival points
myTween.continueTo ( 60 * (i+1), 2 );
}
}

Our dynamic menu reacts to the loss or gain of focus in the animation. We can vary the different effects and improve the menu without any limits – that’s where the power of Flash lies!

Worth remembering

• The Event.ACTIVATE and Event.DEACTIVATE events allow us to manage the loss or gain of focus in the player.