Much of the documentation for Flex development has a heavy focus on implementing Flex applications in MXML. This is great for quick examples, and for structural elements in a large project. But for some projects, you need to know how to implement things in the Flex framework from straight ActionScript.

Recently, we had a project where we needed to be able to control visual states in an application in ActionScript. After looking through the documentation and online resources, I couldn't find any documented implementation of state management in ActionScript. They were all using MXML. So I spent a little time to go through and look at exactly how to control state and transitions via ActionScript.

This is a bit of an advanced topic, so I'm not going to go into FlexBuilder and how to create projects. Assuming a basic familiarity with FlexBuilder, or the Flex SDK, I'm going to show how you can create and control visual states and transitions in ActionScript 3.0.

What we're going to be building is a small application with two forms. The two forms should animate themselves in and out of visual scale between states. This is the example we're going to build (you can right click and select view source to access the source files):

Demo Application | Source Code

If you look a the source files, you'll see that the application is made up of four files. There is the main application MXML file in the root of the project. There are two MXML forms in the com.actionscript.forms package. Each of these forms extend the class "HideScaler" which is located in the com.actionscript.states package.

Let's start by looking at our root application file:

ActionScriptStateTransitions.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:as="com.actionscript.states.*" xmlns:forms="com.actionscript.forms.*" viewSourceURL="srcview/index.html"> <mx:Script> <![CDATA[ public function showName():void { nameForm.currentState = ""; addressForm.currentState = "hide"; } public function showAddress():void { nameForm.currentState = "hide"; addressForm.currentState = ""; } ]]> </mx:Script> <forms:Form1 id="nameForm" /> <forms:Form2 id="addressForm" currentState="hide" /> <mx:HBox> <mx:Button label="Name" click="showName()" /> <mx:Button label="Address" click="showAddress()" /> </mx:HBox> </mx:Application>

This file is used to display the two forms we are about to create, and to add two buttons to allow for some basic interaction to test the changing states between the two forms. As one of the two buttons are clicked, they will call the showName() or showAddress() methods defined in the script tag. These methods will set the currentState of both of our forms.

Our forms are two very basic forms. Since this is just an example, I didn't even give the text fields ids to access their data. These forms are just skeletons for visual display only.

Although our objective is to control states in ActionScript, the forms themselves are a very structural kind of asset, which is where MXML can be very handy when you need to define something in a declarative format.

Form1.mxml

<?xml version="1.0" encoding="utf-8"?> <as:HideScaler xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:as="com.actionscript.states.*"> <mx:Form id="mainForm"> <mx:FormHeading label="User Name" /> <mx:FormItem label="First Name"> <mx:TextInput id="firstName" width="300" /> </mx:FormItem> <mx:FormItem label="Last Name"> <mx:TextInput id="lastName" width="300" /> </mx:FormItem> </mx:Form> </as:HideScaler>

Form2.mxml

<?xml version="1.0" encoding="utf-8"?> <as:HideScaler xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:as="com.actionscript.states.*"> <mx:Form id="mainForm"> <mx:FormHeading label="Address" /> <mx:FormItem label="Street Address"> <mx:TextInput id="address" width="300" /> </mx:FormItem> <mx:FormItem label="City"> <mx:TextInput id="city" width="300" /> </mx:FormItem> <mx:FormItem label="State"> <mx:TextInput id="state" width="30" /> </mx:FormItem> <mx:FormItem label="Zip"> <mx:TextInput id="zip" width="75" /> </mx:FormItem> </mx:Form> </as:HideScaler>

Notice that the root tag in both forms are extending a custom class called "HideScaler". This is the class that we will use to implement our custom state and the animated transitions. Since this is where the real action is taking place, let's look at this file in two stages.

HideScaler.as (stage 1)

package com.actionscript.states { import mx.containers.Canvas; import mx.states.State; import mx.states.SetProperty; public class HideScaler extends Canvas { public function HideScaler() { super(); initState(); } private function initState():void { var hideState:State = new State(); hideState.name = "hide"; hideState.overrides.push(new SetProperty(this, "width", 0)); hideState.overrides.push(new SetProperty(this, "height", 0)); states.push(hideState); } } }

Our stage 1 look at this class has our basic class definition. HideScaler extends the Flex UIComponent Canvas. As a container, we can use a Canvas to build complex components by composing groups of other components together.

In our constructor, we're calling super() to initialize the Canvas super class and then calling initState() to create the "hide" state of our forms.

We create a new State object, assign it's name property with the name of our state (in this case "hide"). Next we have to add two SetProperty objects to the state overrides array. The overrides array is an assortment of various objects used to change specific aspects of a UIComponent's state. In this case, we're changing the width and height properties, so we can use the mx.states.SetProperty class to manage this change for us. Other classes used for overrides could be mx.states.SetEventHandler and mx.states.SetStyle.

Finally, we push the new state into the states array of our HideScaler (or form) instance so that it will be available when we want to use it.

If we test the application at this point, you'll see that you can now use the buttons to switch between the two visual states of our forms. But you'll notice that the change is an immediate visual change and not a smooth transition and certainly not taking advantage of the rich media experience.

So, let's add a few more lines of code to our initState() method to make our state change look a bit more polished.

HideScaler.as (stage 2)

package com.actionscript.states { import mx.containers.Canvas; import mx.states.State; import mx.states.SetProperty; import mx.effects.Parallel; import mx.effects.Resize; import mx.states.Transition; public class HideScaler extends Canvas { public static const STATE_HIDE:String = "hide"; public function HideScaler() { super(); initState(); } private function initState():void { var hideState:State = new State(); hideState.name = HideScaler.STATE_HIDE; hideState.overrides.push(new SetProperty(this, "width", 0)); hideState.overrides.push(new SetProperty(this, "height", 0)); states.push(hideState); var transEffect:Parallel = new Parallel(this); transEffect.duration = 400; transEffect.children.push(new Resize(this)); var stateTransition:Transition = new Transition(); stateTransition.toState = stateTransition.fromState = "*"; stateTransition.effect = transEffect; transitions.push(stateTransition); } } }

In order to create the transition animation, we have to set up a few objects. This is where it can get a little confusing, so I've tried to boil this all down to a few basic steps.

The first thing we need to create to animate our state change is a Transition Effect. A transition effect is simply a class that defines how long the transition should last, what UIComponent it should affect and what type of effects it should produce (in our case a Resize).

There are two basic types of transition effects to choose from, Parallel or Sequential. Parallel transition effects animate all children in a UIComponent at the same time (in parallel) and Sequential transitions animate each child in a UIComponent in order (sequentially). Since we only have our one form as a child that will animate, it really doesn't matter which we choose in this case. So, we went with Parallel.

var transEffect:Parallel = new Parallel(this);
transEffect.duration = 400;
transEffect.children.push(new Resize(this));

This first line creates a new Parallel transition effect and provides a reference to this class to it's constructor so that it will affect this particular class. We then set the duration of the transition to 400 milliseconds.

Next, we push a new Resize object (this is the class that manages the tweening of our "height" and "width" changes defined in our SetProperty objects). Check out the classes in the mx.effects package to see other objects (aside from Resize) that can be used to animate other properties of a UIComponent.

The last object we need to instantiate is our actual Transition object. This is the object that ties our state, our effect, our UIComponent all together to create an animated transition.

var stateTransition:Transition = new Transition();
stateTransition.toState = stateTransition.fromState = "*";
stateTransition.effect = transEffect;

This code creates a new Transition instance. We set both the toState and fromState to "*" to apply this transition to all states this class may be displayed in. If we wanted to use two different transitions between two different states, we could customize this transition and add additional ones to handle those specific cases.

The last line of code in this section assigns our Parallel transition effect to the "effect" property of our transition.

Lastly, we push our new transition into the "transitions" array of our class:

transitions.push(stateTransition);

That's pretty much it. If you run the application now, you should see a nice smooth resize animation between the two states.

Conculsion

State management and transitions don't get the same attention to us as developers as some of the other hard-core capabilities of ActionScript 3.0 and Flex2. But with just a few lines of code, you can turn a fairly drab application into a very rich media experience. You don't have to be a super designer/animator to take advantage of this free eye-candy in your projects. Most of all, your clients will absolutely love it!