In vielen Rich Internet Applications, ändert sich die Benutzeroberfläche, je nachdem welche Aufgabe der Benutzer ausführt.
Zum Beispiel, ändert sich ein Bild oder ein Eingabeknopf wenn man mit der Maus drüberfährt (Mouseover).
Es ist aber auch möglich da die gesamte Benutzeroberfläche anzupassen.

Mit Hilfe von States lassen sich die Zustände der Elemente definieren. Ein States beinhaltet dabei Properties/Eigenschaften, die sich auf ein Ziel-Element (Target) beziehen, welches beim Aufrufen des States verändert wird.

States werden mit dem Tag <mx:States> definiert:

<!-- Arbeiten mit States -->

<mx:states>

    <mx:State name="zweiterState">

        <mx:SetProperty target="{transButton}" name="width" value="220"/>

        <mx:SetProperty target="{transButton}" name="x" value="520"/>                

    </mx:State>

</mx:states>

Nachdem ein State definiert wurde, muss nur noch der State beim Klicken, oder Mouseover des Elements zugewiesen werden:

<mx:Button id="transButton" x="90" y="331" label="State-Button" 

click="currentState='zweiterState'"/>

Dies ist eine sehr elegante Methode um Benutzeroberflächen an den jeweiligen Vorgang anzupassen.

Denkbar ist zum Beispiel folgender Einsatz: Nach Eingabe eines Login-Fenster, wird dieses kleiner, und ein anderes Fenster vergrößert sich. 

Standardmässig geschieht der Übergang (Transition) zwischen 2 States direkt. D.h. es sind keine Übergangseffekte definiert, die die Veränderung "weicher" erscheinen lassen. Möchte man zum Beispiel ein Label von x=100 nach x=500 bewegen, und den Knopf langsam von links nach rechts bewegen lassen, benötigt man dafür Transitions.

Transitions und States sind eng verbunden. Eine Transition findet immer zwischen States statt. Es gibt eine Vielzahl von Transitions die von Flex bereitgestellt werden. Es können auch Bildfilter verwendet werden, die zum Beispiel den Knopf weichzeichnen (Blur) etc. Dies geschieht mit dem folgenden Code und dem Blur-Filter:

<!-- Arbeiten mit Transitions -->

<mx:transitions>

    <mx:Transition>

        <mx:Sequence target="{transButton}">

            <mx:Blur blurXFrom="0" blurXTo="100"/>

            <mx:Blur blurYFrom="100" blurYTo="0"/>

        </mx:Sequence>

    </mx:Transition>

</mx:transitions>

 

Eine komplette Übersicht über die Möglichkeiten von Transitions liefert der Adobe Flex Developer Guide in Kapitel 25:
http://livedocs.adobe.com/flex/3/devguide_flex3.pdf