Why is this Flex 4 Transition not working? - apache-flex

Question

I have a test application here which was made using the following code:
<fx:Script>
<![CDATA[
public function comboBoxHandler():void{
var selectedItem:String = showComboBox.selectedItem;
if(selectedItem == "All results"){
currentState = "default";
return;
}else if(selectedItem == "Only results within tags"){
currentState = "tagInput";
return;
}
}
]]>
</fx:Script>
<s:states>
<s:State name="default"/>
<s:State name="tagInput"/>
</s:states>
<s:transitions>
<s:Transition id="showTagTextInput" fromState="default" toState="tagInput">
<s:Sequence id="t1p1" targets="{[tagsLabel,tagsTextInput,GoButton]}">
<s:Move duration="700"/>
<s:Fade duration="400"/>
</s:Sequence>
</s:Transition>
<s:Transition id="hideTagTextInput" fromState="tagInput" toState="default">
<s:Sequence id="t2p1" targets="{[tagsLabel,tagsTextInput,GoButton]}" >
<s:Fade duration="400"/>
<s:Move duration="700"/>
</s:Sequence>
</s:Transition>
</s:transitions>
<s:Label x="136" y="13" width="120" height="34" fontFamily="Arial" fontSize="15"
text="Lessons
Learnt" textAlign="center"/>
<s:Group id="group" width="100%" height="100%"
x.default="0" y.default="55" width.default="400" height.default="231"
y.tagInput="55" height.tagInput="256">
<s:Label x="45" y="38" width="50" height="22" text="Search" textAlign="center"
verticalAlign="middle"/>
<s:TextInput x="103" y="38" width="193"
useHandCursor.tagInput="false"/>
<s:Label x="45" y="89" width="51" height="22" text="Show" textAlign="center"
verticalAlign="middle"/>
<s:Button id="GoButton" x="253" y="137" width="43" label="Go" useHandCursor="true"
buttonMode="true" mouseChildren="false"
x.tagInput="254" y.tagInput="188"/>
<s:DropDownList id="showComboBox" x="104" y="89" width="192" change="comboBoxHandler();"
selectedIndex="0">
<s:ArrayCollection>
<fx:String>All results</fx:String>
<fx:String>Only results within tags</fx:String>
</s:ArrayCollection>
</s:DropDownList>
<s:Label id="tagsLabel" includeIn="tagInput" x="104" y="146" width="61" height="20" text="Tags"
textAlign="center" verticalAlign="middle"/>
<s:TextInput id="tagsTextInput" includeIn="tagInput" x="173" y="146" width="123"/>
</s:Group>
You can check, by clicking the link I gave, that this app performs some basic transition effect when you select different options from the DropDownBox.
The first (show) transition doesn't work so well, but the second (hide) transition does.
Does anyone know how to fix that? In the first transition, I would like the button to slide down first, only after that should the text input fade In. Why isn't this working?
Thanks in advance.

Answer 1

It is better to point particular effect target rather that pointing all the targets in <s:Sequence />. So place targets to <s:Move /> and <s:Fade />. Also you can perform additional transitions tuning by placing <s:AddAction /> and <s:RemoveAction /> with corresponding targets to point a place within sequence where transition should invoke includeIn and excludeFrom states declarations.
So these transitions works fine with your code:
<s:transitions>
<s:Transition fromState="default" id="showTagTextInput" toState="tagInput">
<s:Sequence id="t1p1">
<s:Move duration="700" targets="{[GoButton]}" />
<s:AddAction targets="{[tagsLabel,tagsTextInput]}" />
<s:Fade duration="400" targets="{[tagsLabel,tagsTextInput]}" />
</s:Sequence>
</s:Transition>
<s:Transition fromState="tagInput" id="hideTagTextInput" toState="default">
<s:Sequence id="t2p1">
<s:Fade duration="400" targets="{[tagsLabel,tagsTextInput]}" />
<s:RemoveAction targets="{[tagsLabel,tagsTextInput]}" />
<s:Move duration="700" targets="{[GoButton]}" />
</s:Sequence>
</s:Transition>
</s:transitions>

Answer 2

I would imagine it's because your tag input is only being included in the tagInput state, but the alpha is 100% and there's no transition between the states. Try this:
<s:Label id="tagsLabel" alpha.default="0" alpha.tagInput="100" x="104" y="146" width="61" height="20" text="Tags" textAlign="center" verticalAlign="middle"/>
<s:TextInput id="tagsTextInput" alpha.default="0" alpha.tagInput="100" x="173" y="146" width="123"/>
You might also want to set visible to false during 'default' state. Also, what Constantiner said is true.