Flex State transition - apache-flex

Question

I am trying to create the transition between states. The first state transition works fine(state1=>state2), but the second one is acting weird(state2=>state3). After clicks the button to change
state2=>state3, some text areas which are belong to state2 show up and stay on the screen. I am not sure why. I would appreciate it if someone here can help me out.
My code.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
protected function btn1_clickHandler(event:MouseEvent):void
{
currentState="state2";
}
protected function btn2_clickHandler(event:MouseEvent):void
{
currentState="state3";
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:states>
<s:State name="state1"/>
<s:State name="state2"/>
<s:State name="state3"/>
</s:states>
<s:transitions>
<s:Transition toState="state2" >
<s:Parallel>
<s:Move targets="{[btn1,btn2]}" />
<s:AddAction targets="{[label1,label2,label3,textInput1,textInput2,textInput3]}" />
<s:Fade targets="{[label1,label2,label3,textInput1,textInput2,textInput3]}"/>
</s:Parallel>
</s:Transition>
<s:Transition toState="state3" >
<s:Fade targets="{[label1,label2,label3,textInput1,textInput2,textInput3]}"/>
</s:Transition>
</s:transitions>
<s:Label y="10" text="label1" id="label1" includeIn="state2" />
<s:TextInput y="30" id="textInput1" includeIn="state2" />
<s:Label y="50" text="label1" id="label2" includeIn="state2" />
<s:TextInput y="70" id="textInput2" includeIn="state2" />
<s:Label y="90" text="label1" id="label3" includeIn="state2" />
<s:TextInput y="120" id="textInput3" includeIn="state2" />
<s:Button y="180" y.state2="350" label="btn1" id="btn1" click="btn1_clickHandler(event)"/>
<s:Button y="250" y.state2="550" label="btn2" id="btn2" click="btn2_clickHandler(event)"/>
</s:Application>

Answer 1

Your code sample looks incomplete. I think we'll need to see more than just the state and transitions. IF you can provide a full running sample that would be helpful.
I assume this is a sample issue, but in your current code, the transitions toStates are not created in the document. Since you have three states, you may want to add a 'fromState' and explicitly design the transition from / to each state.
If I had to guess, you probably need to specify the 'includeIn' property on the relevant components. You can use a comma delimited list of states, something like this:
<s:Component includeIn="a" />
<s:Component includeIn="b,c" />
<s:Component includeIn="a,c" />
Where the first component would appear in state a, the second would appear in state b and c, and the third component would appear in state a and c.
Updated Posters Code:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
protected function btn1_clickHandler(event:MouseEvent):void
{
currentState="state2";
}
protected function btn2_clickHandler(event:MouseEvent):void
{
currentState="state3";
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:states>
<s:State name="state1"/>
<s:State name="state2"/>
<s:State name="state3"/>
</s:states>
<s:transitions>
<s:Transition toState="state2" >
<s:Parallel>
<s:Move targets="{[btn1,btn2]}" />
<!--<s:AddAction targets="{[label1,label2,label3,textInput1,textInput2,textInput3]}" /> -->
<s:Fade targets="{[label1,label2,label3,textInput1,textInput2,textInput3]}" alphaFrom="0" alphaTo="1"/>
</s:Parallel>
</s:Transition>
<s:Transition toState="state3" >
<s:Parallel>
<!-- <s:Move targets="{[btn1,btn2]}" />-->
<!--<s:RemoveAction targets="{[label1,label2,label3,textInput1,textInput2,textInput3]}" /> -->
<s:Fade targets="{[label1,label2,label3,textInput1,textInput2,textInput3]}" alphaFrom="1" alphaTo="0"/>
</s:Parallel>
</s:Transition>
</s:transitions>
<s:Label y="10" text="label1" id="label1" includeIn="state2" />
<s:TextInput y="30" id="textInput1" includeIn="state2" />
<s:Label y="50" text="label2" id="label2" includeIn="state2" />
<s:TextInput y="70" id="textInput2" includeIn="state2" />
<s:Label y="90" text="label3" id="label3" includeIn="state2" />
<s:TextInput y="120" id="textInput3" includeIn="state2" />
<s:Button y="180" y.state2="350" includeIn="state1,state2,state3" label="To State 2" id="btn1" click="btn1_clickHandler(event)"/>
<s:Button y="250" y.state2="550" includeIn="state1,state2,state3" label="To State 3" id="btn2" click="btn2_clickHandler(event)"/>
</s:Application>