Fading out a component that is removed from a view state

The

first
way of making sure the effects are visible is to not make
use of a transition when going back to the base state. Instead, 
you
use the effect triggers of the component itself to trigger the
effect. When the component is removed, you need to use the

removedEffect
trigger like in the following example:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
  <!-- The font needs to be embedded for the texxt to fade out
       as well. Otherwise, the button will fade, but the text
       will simply remain fully opaque throughout the effect -->
  <mx:Style>
    @font-face {
      src: local("Verdana");
      fontFamily: myFont;
      fontWeight: bold;
    }
 
    global {
      fontFamily: myFont;
    }
  </mx:Style>
 
  <!-- This is the Fade effect we are going to use when the 
       component is removed from the display list -->
  <mx:Fade id="fade" alphaFrom="1" alphaTo="0" 
           duration="2000"/>
 
  <!-- Define the view state -->
  <mx:states>
    <mx:State name="extraButton">
      <mx:AddChild>
        <!-- This button will fade in through the transitions. 
             It will fade out via the removedEffect trigger -->
        <mx:Button id="btn2" label="Click me now" 
                   click="currentState=''" 
                   removedEffect="{fade}"/>
      </mx:AddChild>
    </mx:State>
  </mx:states>
 
  <!-- Define the view state transition -->
  <mx:transitions>
    <mx:Transition fromState="" toState="extraButton">
      <mx:Fade target="{btn2}" alphaFrom="0" alphaTo="1" 
               duration="2000"/>
    </mx:Transition>
  </mx:transitions>
 
  <!-- This component will be visible by default and triggers
       the second view state -->
  <mx:Button id="btn1" label="Click me" 
             click="currentState='extraButton'"/>
  
</mx:Application> 

The problem with this approach is that the transition effects are scattered throughout your code. However, there is also a second, in my opinion more appropriate way of dealing with this transition problem and that is through the use of transitions. This means that all of your transitional code will be located in 1 spot and this is so much easier to maintain.

But how do we solve the issue of the effect not being shown? Well, in fact (and this is not often mentioned in books and courses), you do have total control of when an item is being added or removed considering the effects that need to be played on the component. To do this, you can simply use the &ly;mx:AddChildAction> and <mx:RemoveChildAction> tags. Just place them in the right order within a <ms:Sequence> tag after the appropriate effect and your effect will be displayed properly. Just take a look at this example code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
  <!-- The font needs to be embedded for the texxt to fade out 
       as well. Otherwise, the button will fade, but the text 
       will simply remain fully opaque throughout the effect -->
 
  <mx:Style>
    @font-face {
      src: local("Verdana");
      fontFamily: myFont;
      fontWeight: bold;
    }
 
    global {
      fontFamily: myFont;
    }
  </mx:Style>
 
  <!-- Define the view state -->
  <mx:states>
    <mx:State name="extraButton">
      <mx:AddChild>
        <!-- This button will fade in and out through 
             the transitions -->
        <mx:Button id="btn2" label="Click me now" 
                   click="currentState=''"/>
      </mx:AddChild>
    </mx:State>
  </mx:states>
 
  <!-- Define the view state transition -->
  <mx:transitions>
    <mx:Transition fromState="" toState="extraButton">
      <mx:Fade target="{btn2}" alphaFrom="0" alphaTo="1" 
               duration="2000"/>
    </mx:Transition>
 
    <!-- The fade out effect is accomplished by adding
         a sequence with the RemoveChildAction after 
         the effect -->
    <mx:Transition fromState="extraButton" toState="">
      <mx:Sequence target="{btn2}">
        <mx:Fade alphaFrom="1" alphaTo="0" duration="2000"/>
        <mx:RemoveChildAction/>
      </mx:Sequence>
    </mx:Transition>
  </mx:transitions>
 
  <!-- This component will be visible by default and trigger 
       the second view state -->
  <mx:Button id="btn1" label="Click me" 
             click="currentState='extraButton'"/>
 
</mx:Application>