[flexcoders] why are these KeyboardEvent handlers not being called?

[Brian]

I'm trying to mock up an example of a problem I'm having in a larger
app. I'm hoping to reproduce the problem in a smaller app that I can
post here. I'm just trying to move the image around in response to the
user pressing certain keys. But I'm having an even more fundamental
problem with the mockup. The KeyboardEvent handlers are never being
called for this Canvas. 

Any ideas why? 

Here's the mxml. You should be able to almost cut&paste this and have
it work, except you'll need your own little image. 

FYI, the original problem has to do with handling the user holding
down a movement key. Originally, that created events too fast for the
image to render, and the image skipped around. So I added a timer so
that it wouldn't accept the next event until the timer was done, like
40 ms later. That works for awhile, and then it mysteriously stops
working and the image stops moving. That's the 'root' problem I'm
trying to solve. I've included the code I'm using for that in the app
below as well in case anyone is intrigued by that.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
layout="absolute"
        creationComplete="initApp()" width="800" height="600" >

        <mx:Script>
                <![CDATA[
                        import mx.controls.Image;
                        import flash.events.KeyboardEvent;
                        import flash.utils.Timer;
                        
                        [Embed(source="../images/tiles13x13/man.gif")]
                        public static var MAN:Class;
                        
                        const KEY_DOWN:String = "2";
                        const KEY_UP:String = "8";
                        const KEY_RIGHT:String = "6";
                        const KEY_LEFT:String = "4";
                        
                        var tileSize:int = 13;
                        var curX:int;
                        var curY:int;
                        
                        var keyEventReady:Boolean = true;
                        var timer:Timer;
                        
                        function initApp():void {
                                trace("into initApp");
                                map.addEventListener(KeyboardEvent.KEY_UP, 
keyUpEventHandler);
                                map.addEventListener(KeyboardEvent.KEY_DOWN, 
keyDownEventHandler);
                                image.source = MAN;
                                curX = 10;
                                curY = 15;
                                image.x = curX * tileSize;
                                image.y = curY * tileSize;
                                
                                timer = new Timer(40, 1);
                                
timer.addEventListener(TimerEvent.TIMER_COMPLETE, timerHandler);
                        }
                        
                        public function 
keyDownEventHandler(e:KeyboardEvent):void {
                                trace("got into KeyDownEventHandler");
                                if(keyEventReady) {
keyEventReady = false;
                                        var char:String = numToChar(e.charCode);
                                        if(char == KEY_DOWN) {
                                                curY++;
                                        } else if(char == KEY_UP) {
                                                curY--;
                                        } else if(char == KEY_LEFT) {
                                                curX--;
                                        } else if(char == KEY_RIGHT) {
                                                curX++;
                                        }
                                        image.x = curX * tileSize;
                                        image.y = curY * tileSize;
                                        
                                        timer.reset();
                                        timer.start();
                                }
                        }
                        
                        public function keyUpEventHandler(e:KeyboardEvent):void 
{
                                trace("into KeyUpEventHandler");
                                timer.stop();
                                keyEventReady = true;
                        }
                        
                        public function timerHandler(e:TimerEvent):void {
                                keyEventReady = true;
                        }
                        
                        function numToChar(num:int):String {
                        if (num > 47 && num < 58) {
                            var strNums:String = "0123456789";
                            return strNums.charAt(num - 48);
                        } else if (num > 64 && num < 91) {
                            var strCaps:String = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
                            return strCaps.charAt(num - 65);
                        } else if (num > 96 && num < 123) {
                            var strLow:String = "abcdefghijklmnopqrstuvwxyz";
                            return strLow.charAt(num - 97);
                        } else {
                            return num.toString();
                        }
                    }
                ]]>
        </mx:Script>
        <mx:Canvas id="map" left="6" top="32" right="148" bottom="132"
backgroundColor="#010101" >
                <mx:Image id="image" />
        </mx:Canvas>
        
        
</mx:Application>