title: currentStateChange and currentStateChanging do not fire in Flex
body: <p>I wanted to use the currentStateChange event in my application but whatever code being called in this event was not executed so I thought may be there's something wrong with my code so I tried testing it on one of the examples in adobe live docs.
  So I took this example 
  <a href="http://livedocs.adobe.com/flex/3/html/transitions_3.html#209003" rel="nofollow noreferrer" title="here">here</a></p>
  
  <pre><code>&lt;mx:states&gt;
      &lt;mx:State name="One"&gt;
          &lt;mx:SetProperty target="{p1}" name="x" value="110"/&gt;
          &lt;mx:SetProperty target="{p1}" name="y" value="0"/&gt;
          &lt;mx:SetProperty target="{p1}" name="width" value="200"/&gt;
          &lt;mx:SetProperty target="{p1}" name="height" value="210"/&gt;
          &lt;mx:SetProperty target="{p2}" name="x" value="0"/&gt;
          &lt;mx:SetProperty target="{p2}" name="y" value="0"/&gt;
          &lt;mx:SetProperty target="{p2}" name="width" value="100"/&gt;
          &lt;mx:SetProperty target="{p2}" name="height" value="100"/&gt;
          &lt;mx:SetProperty target="{p3}" name="x" value="0"/&gt;
          &lt;mx:SetProperty target="{p3}" name="y" value="110"/&gt;
          &lt;mx:SetProperty target="{p3}" name="width" value="100"/&gt;
          &lt;mx:SetProperty target="{p3}" name="height" value="100"/&gt;
      &lt;/mx:State&gt;
      &lt;mx:State name="Two"&gt;
          &lt;mx:SetProperty target="{p2}" name="x" value="110"/&gt;
          &lt;mx:SetProperty target="{p2}" name="y" value="0"/&gt;
          &lt;mx:SetProperty target="{p2}" name="width" value="200"/&gt;
          &lt;mx:SetProperty target="{p2}" name="height" value="210"/&gt;
          &lt;mx:SetProperty target="{p3}" name="x" value="0"/&gt;
          &lt;mx:SetProperty target="{p3}" name="y" value="110"/&gt;
          &lt;mx:SetProperty target="{p3}" name="width" value="100"/&gt;
          &lt;mx:SetProperty target="{p3}" name="height" value="100"/&gt;
      &lt;/mx:State&gt;
  &lt;/mx:states&gt;
  
  &lt;!-- Define Transition array with one Transition object.--&gt;
  &lt;mx:transitions&gt;
      &lt;!-- A transition for changing from any state to any state. --&gt;
      &lt;mx:Transition id="myTransition" fromState="*" toState="*"&gt;
          &lt;!-- Define a Parallel effect as the top-level effect.--&gt;
          &lt;mx:Parallel id="t1" targets="{[p1,p2,p3]}"&gt;
              &lt;!-- Define a Move and Resize effect.--&gt;
              &lt;mx:Move  duration="400"/&gt;
              &lt;mx:Resize duration="400"/&gt;
          &lt;/mx:Parallel&gt;
      &lt;/mx:Transition&gt;
  &lt;/mx:transitions&gt;
  
  &lt;!-- Define the Canvas container holding the three Panel containers.--&gt;
  &lt;mx:Canvas id="pm" width="100%" height="100%" &gt;
      &lt;mx:Panel id="p1" title="One" 
              x="0" y="0" width="100" height="100"
              click="currentState='One'" currentStateChange="Alert.show('change')" currentStateChanging="Alert.show('changing')" &gt;
          &lt;mx:Label fontSize="24" text="One"/&gt;
      &lt;/mx:Panel&gt;
  
      &lt;mx:Panel id="p2" title="Two" 
              x="0" y="110" width="100" height="100"
              click="currentState='Two'" &gt;
          &lt;mx:Label fontSize="24" text="Two"/&gt;
      &lt;/mx:Panel&gt;
  
      &lt;mx:Panel id="p3" title="Three" 
              x="110" y="0" width="200" height="210" 
              click="currentState=''" &gt;
          &lt;mx:Label fontSize="24" text="Three"/&gt;
      &lt;/mx:Panel&gt;
  &lt;/mx:Canvas&gt;
  </code></pre>
  
  <p>And all what I did is placing an alert in both events currentStateChange and currentStateChanging of panel One and I didn't get the alerts when clicking on the panel.
  I also tried replacing the inline code with a call to a function that makes the alert also nothing happened.</p>
  
  <p>What's wrong with what I am trying to do here?</p>
  
  <p>Thanks</p>