[flexcoders] 2nd transition not working

[bill.fogarty17]

Hi folks,

I'm working on a transition, I'm using a Hdividedbox and when the 
divider is pressed, I want the panel to close with a transition to 
the left. When the divider is pressed a second time, I want the panel 
to open again with a transition to the right. 
When I click the divider, the panel closes perfectly, but for some 
reason, when I click it a second time, the 2nd transition will not 
work.

Any help would be much appreciated. 
Thanking you
Bill


Here is my code:
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";>
<mx:Script>
<![CDATA[
   import mx.events.MenuEvent;
   import mx.controls.Alert;
   import mx.collections.*;
   
   public var indexValue:int = 0;   
   
   private function changeState() : void { 
                if(indexValue == 0){                    
                        currentState='Register';
                        indexValue = 1; 
                }
                else if(indexValue == 1){                       
                        currentState='Start';
                        indexValue = 0;         
                }
    }
 ]]>
</mx:Script>
<!-- Define one view state, in addition to the base state.-->
<mx:states>
<mx:State name="Start">
    <mx:SetProperty target="{canvas1}" name="width" value="50%"/>
        <mx:SetProperty target="{canvas2}" name="width" value="50%"/>
</mx:State>
<mx:State name="Register">
        <mx:SetProperty target="{canvas1}" name="width" value="20%"/>
    <mx:SetProperty target="{canvas2}" name="width" value="80%"/>
</mx:State>
</mx:states>

 <mx:transitions>
<!-- Define a transition for changing from any state to any state.-->
<mx:Transition id="TransitionA" fromState="*" toState="*">
    <!-- Define a Parallel effect as the top-level effect.-->
    <mx:Parallel id="t1" targets="{[canvas1,canvas2]}">
        <!-- Define a Move and Resize effect.-->
        <mx:Move duration="400"/>
        <mx:Resize duration="400"/>
    </mx:Parallel>
</mx:Transition> 
</mx:transitions>

<!-- Define a Panel container that defines the login form.-->
<mx:HDividedBox width="100%" height="100%" dividerPress="changeState
();"> 
   <mx:Panel id="canvas1" label="Canvas 1" width="50%" height="100%" 
backgroundColor="#FFFFCC">
        <mx:Label text="Add components here" fontWeight="bold"/>
</mx:Panel>
<mx:Panel id="canvas2" label="Canvas 2" width="50%" height="100%" 
backgroundColor="#99CCFF">
        <mx:Label text="Add components here" fontWeight="bold"/>
</mx:Panel>         
</mx:HDividedBox>
</mx:Application>