Move Effect TabNavigator (Flex 4 SDK)

Maybe MXML put much on what we call RAD(Rapid application Development) but if you really want to do something more then fast UI Design, codding of ActionScript is inevitable. Maybe some MXML guru would embed all that code inside MXML tags but I think that way we lose the power of readable and manageable MXML.
I actually wanted to change showEffect and hideEffect on fly depending of direction of selection of tabs in TabNavigator (from left to right or opposite).
Good news in Flex4 is that you can declare effects, strings, templates...inside the declarations tags and use them where and as much time you want, avoiding redundancy.

First we need some event that happen before change of container in TabNavigator. When user click on tab button FlexEvent.BUTTON_DOWN is dispatched.

for (idx=0; idx<len;idx++){
flightDetailsTabNavigator.getTabAt(idx).addEventListener(FlexEvent.BUTTON_DOWN,onTabClick);
flightDetailsTabNavigator.getTabAt(idx).label="Tab"+idx;
}

Handling that event mean finding the direction of selection of the tabs and attaching proper hide/show effects to previous and next container.

private function onTabClick(e:FlexEvent):void
{
var currentIndex:int;
var currentContainer:*;
var nextContainer:*;


if(!e.target.selected)
{
currentIndex=e.target.parent.getChildIndex(e.target);
currentContainer=flightDetailsTabNavigator.getChildren()[_prevSelectedIndex];
nextContainer=flightDetailsTabNavigator.getChildren()[currentIndex];


if( _prevSelectedIndex>currentIndex)//we go rigth to left
{
currentContainer.setStyle("hideEffect",moveToRight);
nextContainer.setStyle("showEffect",moveFromRight);
}
else//we go left to right
{
currentContainer.setStyle("hideEffect",moveToLeft);
nextContainer.setStyle("showEffect",moveFromLeft);
}

_prevSelectedIndex=currentIndex;


}
}

source: download