Adding Keyboard Navigation to a Flash Catalyst project

Sometimes you might want to use the keyboard to control your Flash Catalyst application, but keyboard input is not directly supported. But with just a little bit of ActionScript code, you can create a prototype for navigating via your keyboard.

The first step is to create your Flash Catalyst application like you normally would. For this example, I have built a simple image viewer. Each image fades in, and a caption then fades over the image. Each adjacent state has a set of transitions applied to them. Don’t forget to have a transition to and from the first and final states.

Now, let’s import the FC project into Flash Builder. Remember to use Project > Flash Catalyst > Import menu and not the File >Open menu. This method preserves some of the metadata that Flash Catalyst uses for round-trip editing. In the Project Explorer, locate the Main.mxml file and open it.

Depending on if you have added any interactions, you might already have atag near the top of your file. If not, you will need to add it to your file. The first thing we need to create within this tag is a list of all the states that are used in the application. We are going to store these values in an array named theSlides.

private var theSlides:Array = ["State1","State2","State3","State4","State5"];

If you have forgotten what you named them, look for thetag in the Main.mxml file and you will see them listed.

We need to create a variable that will store the index value of our current state. Like I have written before, programmers love to start counting from zero, so the first state is actually 0 and 1. Since the number of states is not going to change, we can also store this value as well. It will be used to determine when the state is reached.

private var theCurrentSlide:Number = 0;
private var theNumOfSlides:Number = 5;

With our variables set up, we can now turn our attention to adding the code that will listen for our key press event. This is a three-step process. Your FC application might have an application_creationCompleteHandler function. If not, we need to add an attribute to thetag and write the function. For thetag, you will add this new attribute at the end.

To add this function, return to thetag, and after the variables that we defined, add the following:

protected function application_creationCompleteHandler():void
{
}

In this function, we will define the initial state of our application

currentState='State1';

Next, we need to add our basic mouseEvent listener. Wait, I thought we were going to be using the keyboard and not the mouse! The funny thing is for this to work correctly, we need to give focus to application, and not the browser. Hence the need for this bit of code:

this.addEventListener(MouseEvent.CLICK, clickHandler);

On the next line we can add our event listener for our key events

this.addEventListener(KeyboardEvent.KEY_DOWN, slideChange);

If you see little yellow triangles in your editor next to these lines, don’t fret. These are just warnings from Flash Builder saying that we have not written the functions that our event listeners will call when triggered. So, let’s fix these problems.

First, we can add the function to handle the mouse click event, and give our application the focus it deserves.

private function clickHandler(event:MouseEvent):void
{
    stage.focus = this;
}

Now let’s add the final piece of the puzzle, the keyboard event handler. This function is a bit more complex, so hang in there as we walk through it. The function looks similar to our other functions we have added:

private function slideChange(evt:KeyboardEvent):void
{
}
You might notice that this function accepts a keyboard event as a parameter. One of the items within this keyboard event is the numeric code that identifies which key the user pressed. The left arrow key’s code is 37, the right arrow key’s code is 39, the up arrow key’s code is 38, and the down arrow key’s code is 40. So with an if-else statement we can act properly upon each key press. Here is the framework for this:
if (evt.keyCode == 39) {
} else if (evt.keyCode == 37) {
} else if (evt.keyCode == 38) {
} else if (evt.keyCode == 40) {
}

Now that we have a framework, we need to apply the logic to change our application to the proper state. To advance to the next state, we need to increment our counter by one. Then we need to check if we have exceeded the total number of states (or slides). If we have exceeded, we then need to reset the counter back to zero. Once our counter has a valid value, we can look up the name of the next state, and tell our application to change to it. Here is the code for this:

++theCurrentSlide;
if (theCurrentSlide == theNumOfSlides) {
   theCurrentSlide = 0;
}
currentState = theSlides[theCurrentSlide];

If we want to view the previous state, the process is almost identical to the code above, we just need to subtract 1 from the counter, then check that the value is not less than 0. If it is, set it to the last index value. (Remember, programmers start counting from 0, so the last index value is actually 1 less than the total number of states).

--theCurrentSlide;
if (theCurrentSlide == -1) {
   theCurrentSlide = theNumOfSlides - 1;
}
 currentState = theSlides[theCurrentSlide];

For the up key, I have the application return to the first state. Conversely, the down arrow sets the application to the last state. I did not create transitions for these state changes, so the visuals will just pop in.

And that is it! It may seem like a lot when you write it all down, but in reality it is just a few lines of ActionScript. Here is FXP of the project, and here is the example working.

Advertisements

4 comments

  1. Hey Chris,

    This tutorial sounds great! I’m trying to understand how to apply this, but i can’t seem to open the fxp file. My Flash catalyst program saying that the file has been created in an incompatible version of flash catalyst. I’m currently using Flash Catalyst CS5. It would be great if i could still see the FXP example.

    Regards,

    Yan
    y.h.lo@student.tue.nl

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s