judah’s blog

One of the things that was hard to wrap my head around when learning Flex was transitions. But they couldn't be simpler. Although this bug caused me to abandon them at first. Please vote for this bug to get fixed. Before we get into this article take a look at this site http://www.flexcapacitor.com/flashusers/. This site uses transitions and states. When you click on the links in the upper right hand corner you are taken from one state to another. As you move between each state you can see the transitions applied.

Before I go into how transitions work I want to share somethings I've learned about them. When your application uses states, I recommend that you create a new base state off of the master state and then add states to that. So your design one level deep and then the content two levels deep. This way you can very easily have different designs and layouts in the same application. This allows you also to transition in the first state and it will provide you with a few other benefits that you will notice as you work on your project.

So lets move on to the definition of transitions. Taken from the documentation:

The Transition class defines a set of effects that play in response to a change of the view state. While a view state definition defines how to change states, a transition defines the order in which visual changes occur during the state change.

To understand how transitions work you first need to understand how states work. Transitions define the animations or effects, the order of those animations and also the order of the changes that happen when switching between states.

So Flex allows you to define different states in your application. One state can have a graph and chart. Another state might remove that graph and chart and add a submission form. Each state definition instructs the framework with what to add, remove or change. With a state you define in mxml what changes from the base state. When you switch states the Flex framework handles applying those changes. Summarized from the documentation:

The State class defines a view state, a particular view of the Application or view of a component. You can only define states at the root of an application or a custom component, not on child controls. For example, the base state of the application could be the home page and include a logo, a sidebar, and some welcome content. When the user clicks a button in the sidebar, the application dynamically changes its appearance (its state), replacing the main content area with a purchase order form but leaving the logo and sidebar in place.

In Flex, you can add this kind of interactivity with view states and transitions. A view state is one of several views that you define for an application or a custom component. A transition is one or more effects grouped together to play when a view state changes. The purpose of a transition is to smooth the visual change from one state to the next.

You change view state by setting the currentState property to the id of the view state. When the state changes components are added or removed, properties and styles can change along with event handlers.

You use the "State" class in the "states" property of the Application class or custom component to define states. The State class defines all the actions that will change from the base state. This includes adding or removing components from the base view state, setting properties, setting styles or setting event handlers. In the transitions class you define the order of all of those actions. Transitions and states are very much interrelated. The changes that occur in the state are declared again in the transitions definition. If you do not apply a transition to a state the changes of that state are applied instantly and no transition occurs.

Lets look at example code:

You can have different transitions from different states. You use the toState and fromState properties of the Transition class to specify what states to apply the transition to. By default, both the fromState and toState properties are set to "*", meaning apply the transition from any state to any state.

You can use the fromState property to explicitly specify a view state that your are changing from, and the toState property to explicitly specify a view state that you are changing to. If a state change matches two transitions, the toState property takes precedence over the fromState property. If more than one transition match, Flex uses the first definition in the transition array.

With transitions you can specify to run the changes in Parallel or Sequence order. For example,

Parallel effects run in parallel. Sequence run in order one after another. Lets take a look at an example project. In this example we have two states...

(vote for this project in the comments)

This entry was posted on Thursday, January 10th, 2008 at 1:43 pm and is filed under AIR, Flex. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.