Responding to trackball and D-Pad events

Some Android devices have additional physical inputs that we can take advantage of. For instance, the Motorola Droid has a slider keyboard, which includes a directional D-pad and the HTC Nexus One has a built-in trackball control.

How to do it...

We can respond to trackball and D-pad events through standard ActionScript event listeners.

  1. First, import the following classes into your project:
    import flash.display.Shape;
    import flash.display.Sprite;
    import flash.display.Stage;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.KeyboardEvent;
    import flash.text.TextField;
    import flash.text.TextFormat;
    import flash.ui.Keyboard;
    
  2. Declare a Shape alongside a TextField and TextFormat object. These will be used for interaction and visual feedback.
    private var traceField:TextField;
    private var traceFormat:TextFormat;
    private var box:Shape;
    
  3. We will then set up our TextField, apply a TextFormat, and add it to the DisplayList. Here, we create a method to perform all of these actions for us:
    protected function setupTextField():void {
    traceFormat = new TextFormat();
    traceFormat.bold = true;
    traceFormat.font = "_sans";
    traceFormat.size = 32;
    traceFormat.align = "center";
    traceFormat.color = 0x333333;
    traceField = new TextField();
    traceField.defaultTextFormat = traceFormat;
    traceField.selectable = false;
    traceField.mouseEnabled = false;
    traceField.width = stage.stageWidth;
    traceField.height = stage.stageHeight;
    addChild(traceField);
    }
    
  4. Next, construct a method to handle the creation of our Shape and add it to the DisplayList.
    protected function setupBox():void {
    box = new Shape();
    box.graphics.beginFill(0xFFFFFF, 1);
    box.x = stage.stageWidth/2;
    box.y = stage.stageHeight/2;
    box.graphics.drawRect(-100,-100,200,200);
    box.graphics.endFill();
    addChild(box);
    }
    
  5. Set an event listener on the Stage to respond to keyboard presses:
    protected function registerListeners():void {
    stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDown);
    }
    
  6. Now, we simply need to write a switch/case statement that will perform different actions in response to D-pad/trackball events. In this case, we change the position of our Shape and output the keyCode to a TextField:
    protected function keyDown(e:KeyboardEvent):void {
    var key:uint = e.keyCode;
    traceField.text = key + " pressed!";
    switch(key){
    case Keyboard.UP:{
    box.y -= 20;
    break;
    }
    case Keyboard.DOWN:{
    box.y += 20;
    break;
    }
    case Keyboard.LEFT:{
    box.x -= 20;
    break;
    }
    case Keyboard.RIGHT:{
    box.x += 20;
    break;
    }
    case Keyboard.ENTER:{
    box.x = stage.stageWidth/2;
    box.y = stage.stageHeight/2;
    break;
    }
    }
    }
    
  7. The result will appear similar to the following:

How it works...

We register listeners for these special controls just as we would the Keyboard.UP, Keyboard.DOWN, Keyboard.LEFT, Keyboard.RIGHT, and Keyboard.ENTER keys for any physical keyboard. In this example, we are shifting the target Shape in each direction and rest the location based upon the D-pad/trackball being pressed. We are also outputting the keyCode value to a text field.

There's more...

It is important to note that most Android devices do not have such specialized input mechanisms. If we do register events mapped to these keys, we should always supply and alternative as well.