Extending Flash Catalyst: Next & Previous buttons

Recently on the Flash Catalyst forums, someone was asking about an easy method to create Next and Previous buttons. They were trying to avoid having to go to each state and add the interaction to each button, over and over again. The programmer in me knew that this was an easy solution with a little bit of ActionScript.

Sample Project

I created a simple 5 state application in Flash Catalyst. I defined the state transitions (simple fades), and also gave each state a meaningful name (you do take the time to label your states and layers, right?!). Now you might have already started adding the individual interactions to go from state to state. Remove them. Flash Catalyst will create event handlers for each interaction you have, and since we want to have one set of interactions for the Next and Previous buttons, we only want one set. You can use the Make Same In All States function for you buttons.

Now launch Flash Builder 4.5, and then use Project > Flash Catalyst > Import Flash Catalyst Project.

Double click into the project until you open the Main.mxml file.

The first thing I like to do is clean up the handler names that Flash Catalyst generates, “button1_clickHandler” is not the most descriptive is it?

   <s:Button x="736" y="273" click="button1_clickHandler()" skinClass="components.RightButton"/>

Now do a find and replace on the value of the click attribute. This will change the reference in the component and in the event handler. Do this for both the Next and Previous buttons.

So we should now have components that look like:
   <s:Button x="25" y="273" click="leftButton_clickHandler()" skinClass="components.leftButton"/>
<s:Button x="736" y="273" click="rightButton_clickHandler()" skinClass="components.RightButton"/>

Let’s adjust the event handlers. Toward the top of the file, you should see the start of the <fx:Script> tag. It looks like this:

   <fx:Script>
<![CDATA[

We are interested in the two functions that our Next and Previous buttons call. They should start with:
   protected function rightButton_clickHandler():void

and

   protected function leftButton_clickHandler():void

But before we modify these functions, we need to define two variables. The first is an array of the states that the buttons will cycle through (and the order they should do so in).

   private var theAppStates:Array = ["MissionBay", "SanDiegoBay", "Family", "GoldenGate","Baja"];

The next variable we need is the critical one, the index of the the current state.

   private var theCurrentStateIndex:Number = 0;

Remember programmers love to start counting from 0 and not 1.

The basic goal of the function, is to add 1 or subtract 1 from our current index, get the state name from our array, and set the application’s (or component’s) state to the new value. We Also need to do some simple checks to see if we have reached the end or beginning of our array.

So we replace the existing Next and Previous button event handlers with this:

protected function rightButton_clickHandler():void
{
++theCurrentStateIndex;
if (theCurrentStateIndex == theAppStates.length) {
theCurrentStateIndex = 0;
}

   currentState = theAppStates[theCurrentStateIndex];
}

protected function leftButton_clickHandler():void
{
--theCurrentStateIndex;
if (theCurrentStateIndex == -1) {
theCurrentStateIndex = theAppStates.length - 1;
}

   currentState = theAppStates[theCurrentStateIndex];
}

And that is it. We now have a “smart” Next and Previous button for a Flash Catalyst based project.

Here is the final demo and a link to the source code.