<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="initState()">
    <mx:Script>
        <![CDATA[
            private function initState():void {
                currentState='state1';
            }
        ]]>
    </mx:Script>
    <mx:Style>
        .active {
            corner-radius:10px;        
            border-color:yellow;
            border-thickness:2px;
        }
        .inactive {
            corner-radius:0px;        
            background-color:#dddddd;
        }
    </mx:Style>
    <mx:states>
        <mx:State name="state1">
            <mx:SetProperty target="{tareaStep1}" name="editable" value="true"/>
            <mx:SetProperty target="{tareaStep1}" name="styleName" value="active"/>
            <mx:SetProperty target="{but1}" name="visible" value="true"/>
        </mx:State>
        <mx:State name="state2">
            <mx:SetProperty target="{tareaStep2}" name="editable" value="true"/>
            <mx:SetProperty target="{tareaStep2}" name="styleName" value="active"/>
            <mx:SetProperty target="{but2}" name="visible" value="true"/>
        </mx:State>
        <mx:State name="state3">
            <mx:SetProperty target="{tareaStep3}" name="editable" value="true"/>
            <mx:SetProperty target="{tareaStep3}" name="styleName" value="active"/>
            <mx:SetProperty target="{but3}" name="visible" value="true"/>
        </mx:State>
    </mx:states>
    
    <mx:transitions>
        <mx:Transition fromState="state1" toState="state2">
            <mx:Parallel>
                <mx:Resize widthTo="200" widthFrom="100" target="{tareaStep2}"/>
                <mx:Resize widthTo="100" widthFrom="200" target="{tareaStep1}"/>
            </mx:Parallel>
        </mx:Transition>
        <mx:Transition fromState="state2" toState="state3">
            <mx:Parallel>
                <mx:Resize widthTo="200" widthFrom="100" target="{tareaStep3}"/>
                <mx:Resize widthTo="100" widthFrom="200" target="{tareaStep2}"/>
            </mx:Parallel>
        </mx:Transition>
        <mx:Transition fromState="state3" toState="state1">
            <mx:Parallel>
                <mx:Resize widthTo="200" widthFrom="100" target="{tareaStep1}"/>
                <mx:Resize widthTo="100" widthFrom="200" target="{tareaStep3}"/>
            </mx:Parallel>
        </mx:Transition>
    </mx:transitions>
        
    <mx:Canvas top="10" left="10" right="10" bottom="10">
        <mx:HBox>
            <mx:VBox>
                <mx:Label text="Step 1"/>
                <mx:Button id="but1" label="Done" click="currentState='state2';" visible="false"/>
                <mx:TextArea id="tareaStep1" width="200" height="100" editable="false" styleName="inactive"/>
            </mx:VBox>
            <mx:VBox>
                <mx:Label text="Step 2"/>
                <mx:Button id="but2" label="Done" click="currentState='state3';" visible="false"/>
                <mx:TextArea id="tareaStep2" width="100" height="100" editable="false" styleName="inactive"/>
            </mx:VBox>
            <mx:VBox>
                <mx:Label text="Step 3"/>
                <mx:Button id="but3" label="Done" click="currentState='state1';" visible="false"/>
                <mx:TextArea id="tareaStep3" width="100" height="100" editable="false" styleName="inactive"/>
            </mx:VBox>
        </mx:HBox>
    </mx:Canvas>
</mx:WindowedApplication>
