Flex 3 - How to define 2 states and transition between them?

Question

My first steps with Flex (currently using Flex 3) and I want to define 2 states where in the first I have a list and a panel with some button bellow it. When clicking one of the buttons in that panel, I'm expecting to change the state to the "ListState". How should I define which component bellong to which state in this case? How can I also animate the transition between them by enlarging the list and "move" the panel down outside the application? The expected behavior is presented in the following picture:

Thanks in advance

Answer 1

You can achieve This without States. As I have understood your task. I will suggest you to use Canvas with 100% height and width. inside canvas You use List and Panel

List will <mx:List id="List" height="{cnvas.height-panel.height}" width="100%"/>

panel will <mx:Pannel id="panel" height="300" y="{cnvas.height-panel.height}" width="100%" paddingTop="10">

Now When you click button set slideUP.play() and pannel.height=0.

Addition to this you have to set annimation:
<mx:AnimateProperty id="slideUP" target="{panel}" property="y" fromValue="{cnvas.height-panel.height}" toValue="{cnvas.height}" duration="400" />