Transitions & States - question

[aftershock]

Two view states, one is the base view state. The second view state add a HBox with a given size. I want this to fade in when the view state changes from the base state. Yes that works (see code below).

Problem, I now want to fade out this HBox when going back to the base state. It does not work. I have tried everything any ideas on this? I must have overlooked something big!


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">

<mx:Script>
<![CDATA[
public function changeState(event:Event):void
{
if(chk1.selected == true)
{
currentState = "state1"
} else
{
currentState = ""
}
}
]]>
</mx:Script>

<!-- View states -->
<mx:states>
<mx:State name="state1">
<mx:AddChild relativeTo="{panelBase}" position="lastChild">
<mx:HBox x="16.5" y="60" width="203.5" height="227" backgroundColor="0xcc0000" id="hbox1" >
</mx:HBox>
</mx:AddChild>
</mx:State>
</mx:states>

<!-- Transitions between states -->
<mx:transitions>
<mx:Transition fromState="" toState="state1">
<mx:Parallel>
<mx:Fade target="{hbox1}" />
</mx:Parallel>

<!--<mx:Fade target="{panel1}" duration="500"/> -->
</mx:Transition>

<mx:Transition fromState="state1" toState="">
<mx:Parallel>
<mx:Fade target="{hbox1}" />
</mx:Parallel>
</mx:Transition>
</mx:transitions>

<!-- Base state -->
<mx:Panel x="310" y="143" width="250" height="337" layout="absolute" id="panelBase">
<mx:RadioButtonGroup id="radGrpChoose" />
<mx:RadioButton id="chk1"
x="66.5"
y="10.0"
label="Viewstate 1"
groupName="radGrpChoose"
click="changeState(event)"/>

<mx:RadioButton id="chk2"
x="66.5"
y="34.0"
label="Basestate"
groupName="radGrpChoose"
click="changeState(event)"/>
</mx:Panel>

</mx:Application>



This is a simplified version my production app has a VBox added via a viewstate into another VBox that is already holding content. Its this new content that I want to fade in, then when the state changes back to the base state, fade back out.

[SpaceHunter]

Your adding a new control when you change state. Therefore when you go back to the "base state", the newly added control will no longer appear.

Anyhow (just realized how old this thread is), check out the changes I made:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">

<mx:Script>
<![CDATA[
public function changeState(event:Event):void
{
if(chk1.selected == true)
{
currentState = "state1"
} else
{
currentState = ""
}
}
]]>
</mx:Script>

<!-- View states -->
<mx:states>
<mx:State name="state1">
</mx:State>
</mx:states>

<!-- Transitions between states -->
<mx:transitions>
<mx:Transition fromState="" toState="state1">
<mx:Parallel>
<mx:Fade target="{hbox1}" alphaFrom="0" alphaTo="1" />
</mx:Parallel>

<!--<mx:Fade target="{panel1}" duration="500"/> -->
</mx:Transition>

<mx:Transition fromState="state1" toState="*">
<mx:Parallel>
<mx:Fade target="{hbox1}" alphaFrom="1" alphaTo="0" />
</mx:Parallel>
</mx:Transition>
</mx:transitions>

<!-- Base state -->
<mx:Panel x="310" y="143" width="250" height="337" layout="absolute" id="panelBase">
<mx:RadioButtonGroup id="radGrpChoose" />
<mx:RadioButton id="chk1"
x="66.5"
y="10.0"
label="Viewstate 1"
groupName="radGrpChoose"
click="changeState(event)"/>

<mx:RadioButton id="chk2"
x="66.5"
y="34.0"
label="Basestate"
groupName="radGrpChoose"
click="changeState(event)"/>
<mx:HBox x="10" y="60" width="203.5" height="227" alpha="0" backgroundColor="0xcc0000" id="hbox1" >
</mx:HBox>
</mx:Panel>
</mx:Application>