Search code examples
apache-flexanimationflex3transitionstates

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

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: enter image description here

Thanks in advance

Solution

  • 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" />