My application

For this example, we'll have 2 Buttons, a BitmapImage and a SimpleText component :

<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/halo" minWidth="1024" minHeight="768">
  <!-- Layout -->
    <s:layout>
      <s:VerticalLayout/>
    </s:layout>
  <!-- Components -->
    <s:SimpleText id="abText" text="Hi there, my name is Bumblebee !" />
    <s:BitmapImage id="abPicture" source="@Embed('assets/autobot.jpg')" />
    <s:Button id="abButton" label="Click me to roll Bumblebee out !" />
    <s:Button id="driveButton" label="Click me to drive Bumblebee" click="{Alert.show('Just kidding !');}"/>
</s:Application>

(See picture 1)

States declarations

First, you have to explicitly declare the states of your components. These nodes don't contain any states information but names. Besides, the default state of your component is not longer "" but the first one of your declaration (here, "default") :
  <!-- States -->
  <s:states>
    <s:State name="default" />
    <s:State name="transformed" />
  </s:states>

Change the event listener

I want my button to change the "currentState" property of my component when the user clicks on it. To do that, we'll use the new state syntax :   

<s:Button id="abButton" label="Click me to roll Bumblebee out !" click="{currentState='rolledOut'}" click.rolledOut="{currentState='default'}" />
That's right! No more use of the "SetEventHandler" class!

Change the value of a property

Changing the value of a property is basically the same than changing the handler of a specific event. In this example, I want to change the source of my picture and the label of my button :
<s:SimpleText id="abText" text="Hi there, my name is Bumblebee !" text.rolledOut="Okay, now I'm a car... Great..." />
<s:BitmapImage id="abPicture" source="@Embed('assets/autobot.jpg')" source.rolledOut="@Embed('assets/autobot_car.jpg')" />

As you can see, you now have to use the propertyName.state="value" syntax. That means your states name have to be "xml-attribute compliant".

Include a component only in a specific state

Finally, I want the "drive button" to be visible only if we are on the "transformed" state. We could do that changing the "visible" property of the component, but we'll use the "includeIn" property instead :

<s:Button   id="driveButton" includeIn="transformed" label="Click me to drive Bumblebee" click="{Alert.show('Just kidding !');}"/>

A few words about this property. If you want to display a component only in a few states, use the "includeIn" attribute (you can specify several states, just use a comma to separate them). On the contrary, if you want to exclude components from states, you'll use the excludeFrom property which basically works the same way as the includeIn one.

Conclusion :

As you can see, no more "RemoveChild", "AddChild", "SetProperty" or "SetEventHandler" but this new syntax instead. It makes much easier to have flexible components!