AS3 Converting MouseEvent to KeyboardEvent

Question

i'm working on a DDR game for my Game Programming course and I was able to get the arrows to work using the mouse. But a requirement is to also get it to work using the keyboard too. I can't exactly get it to work using the keyboard.

Here is my source code, how would I convert the MouseEvent's to work using KeyboardEvents for the up, bottom, left and right buttons?

import flash.events.KeyboardEvent;
import flash.display.MovieClip;
import flashx.textLayout.operations.ModifyInlineGraphicOperation;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.net.URLRequest;
import flash.media.Sound;
import flash.media.SoundChannel;

var pattern = new Array();
var buttons = new Array();
buttons.push(up, bottom, left, right);
var position = 0;
var playersTurn = false;
var mc_starttext:MovieClip;
var mc_background:MovieClip;

//generate the pattern
setTimeout(nextMove, 1000); // call after 1 second

// Expecting click from they keyboard

up.addEventListener(MouseEvent.CLICK, clicked);
bottom.addEventListener(MouseEvent.CLICK, clicked);
left.addEventListener(MouseEvent.CLICK, clicked);
right.addEventListener(MouseEvent.CLICK, clicked);

stage.addEventListener(KeyboardEvent.KEY_DOWN, onkeyPress);
stage.addEventListener(KeyboardEvent.KEY_UP, onkeyRelease);


mc_starttext.buttonMode = true;
mc_starttext.addEventListener(MouseEvent.CLICK, startClick)
mc_background.buttonMode = true;
mc_background.addEventListener(MouseEvent.CLICK, startClick)


function startClick(e:MouseEvent):void{
            dispatchEvent(new Event("START_GAME"));
        }

function hideScreen():void{
            this.visible = false;
        }

function showScreen():void{
            this.visible = true;
        }

function onkeyPress(event:KeyboardEvent):void{

    if (event.keyCode == 13)//enter
                {
                    this.mc_background.visible = false
                    this.mc_starttext.visible = false
                    //this.StartCover.visible = false; 
                    //this.StartText.visible = false;

                    //this.score.text = position.toString();
                    //this.score.visible = true;

                    //startPlay = true;
                    setTimeout(nextMove, 2000);//Call nextmove after two second

                }

    if (event.keyCode == 32)
    {
        trace("space bar");
    }
}

function onkeyRelease(event:KeyboardEvent):void{
    if (event.keyCode == 32){
        trace("space release");
    }
}

function clicked(clickInfo:MouseEvent){

    if(!playersTurn) return;

    if (clickInfo.target == pattern[position]){
        trace("right");
        position = position + 1;
        //Check to see if it is computers turn
        if (position == pattern.length){
            //CPUs turn
            position = 0;
            setTimeout(nextMove, 1000)
        }
        // play button animation
        clickInfo.target.gotoAndPlay(2);
    } else {
        trace("wrong");
    }

}

function nextMove(){

    if (position < pattern.length){
        pattern[position].play();
        position++;
        setTimeout(nextMove, 1000);
    } else {
        // Generate random number
        var randomNumber = Math.floor(Math.random()*4);
        pattern.push(buttons[randomNumber]);
        buttons[randomNumber].play();
        playersTurn = true;
        position = 0;
    }
}

Answer 1

See if this demo code helps you understand how to use one function to handle both Keyboard and Mouse events.

Just test by...

• Make a rectangle shape (draw on Stage or create by code).
  
• Give it the instance name of : box

Then add code below. It's self explanatory but ask anything you need. Hope it helps.

//variable "box" is a rectangle on Stage with instance name "box"

//# Both Mouse & Keyboard events point to one "control_Move" function
stage.addEventListener(KeyboardEvent.KEY_DOWN, control_Move);
box.addEventListener(MouseEvent.CLICK, control_Move );

//# Make function of generic-ish Event type
function control_Move ( evt:Event ) : void
{
    //trace ("evt.type : " + evt.type);

    if ( evt.type == "click" ) //# If mouse clicked
    {
        //# If click target is "box" then move "box" forward +5 pixels
        if ( evt.target.name == "box" ) { box.x += 5; } 

    }

    if (evt.type == "keyDown") //# If keyboard pressed
    {
        //# LEFT ARROW KEY
        if ( KeyboardEvent(evt).keyCode == 37)  { box.x -= 5; }

        //# RIGHT ARROW KEY
        if ( KeyboardEvent(evt).keyCode == 39)  { box.x += 5; } 

    }

}