keyboardEvent issue: Event doesn't function unless you click on Stage

I'm trying to wrapup a slideshow for a client and the client asked for keyboardEvents in addition to buttonEvents. So I went ahead and added a stage.addEventListener and it works but only if you click on the stage first. In Flash CS4 itself when you test a movie, the problem doesn't happen but when you test it in a browser, the problem exists. Go to http://www.designmg.com/new/portfolio/promotion.html and see what I mean. Try the keyboard left and right arrows first. Then click on the stage and try again. How can I make it get focus on the stage on startup?

I don't think you can. Flash must have keyboard focus to listen to keyboard events. You can try setting stage.focus = stage, and that might work. Or you can try to call some javascript which will set the focus to the flash embed.

The usual solution is to put in a splash page or something that the user clicks on to proceed. That click will set the focus.

I alreadt tried stage.focus = stage; as well as this.focus = stage; at variois points in the script but nothing changed.

This is really frustrating. I can't believe you have to click on the stage first to enable to keyboard events when the idea is to not use the mouse at all. That's why I would think the keyboard event exists. If I recall, you didn't have issue in AS2. Which makes it all the more unusual and ridiculius.

You should have the exact same issue in AS2, since it is the browser determining whether the flash player gets keyboard focus in the first place.

As I said, you may be able to write some javascript which gives focus to the flash on the html page load.

Well, easier said than done. I looked at a ton of Javascripts and most of them only work in IE. Even Adobe's own example (http://kb2.adobe.com/cps/155/tn_15586.html) works only in IE and only after you press the spacebar or enter key. The ones that say work with Firefox or Safari, don't so if you're a Mac guy like or my client, you're essentially screwed.

you could capture the key events in javascript (in the browser), then send them to Flash and react with ExternalInterface.

How do you do that? Examples?

just use standard javascript methods to capture keypresses, then send them tot he flash object...

the basic idea might look like this (untested):

PHP Code:

---

// javascript
document.onkeydown = function(event){
  document.getElementById("swf").sendKey(event.keyCode);
} 


---

PHP Code:

---

// actionscript
import flash.external.ExternalInterface;
// typed to * cos i don't know what datatype the keycode would be
function getKey(key:*):void{
  trace(key);
  switch(key){
    // do whatever you want with the key
  }
}
ExternalInterface.addCallback("sendKey", getKey); 


---

of course, you'd need a good xbrowser implementation of javascript key event receipt.

You can listen to Keyboard presses in Javascript and call a function inside flash. But the problem will be that it won't put your flash movie on focus. But if its just a slide show, then you'll probably be only looking to listen for left right or space bar buttons. These can be easily listened in Javascript from there on you can use JS to call the function inside flash that shows next or previous slides.

I should have refreshed the thread occasionally rather than spend all the time it took to build the javascript/externalInterface key intercept thing. Oh well. Here's a zip file. This uses standard jquery and swfobject (not included). I tested in Firefox and Chrome on Windows vista.

I downloaded the .zip file and ran it and just got the text 'Hi there, this is a keyboard focus demo.' and white. Added a gs folder since it was calling it but no change. Also, does all that code have to be in an external .as file?

Quote:

---

This uses standard jquery and swfobject (not included)

---

did you include the jquery and swobject .js files?

Yes.

The swf is white. That was probably a bad decision, but it was the default. If you press any key, you should see a message appear that says "Key Hit Detected: " and whatever letter was hit.

Also, because of the way I happen to have my local server set up, swfobject.js and jquery.js are expected to be one folder higher than the index.html.

Because this uses ExternalInterface, it will only work on a server, not accessed directly from the filesystem. Do you have a local instance of apache or some other webserver to test with?

nice demo 5tons

also, it doesn't need to be on a server - ExternalInterface methods will work locally

Thanks.

Using firefox 3.5.1 on vista, I'm finding that the externalinterface stuff only works when served from a webserver. That server can be http://localhost (and is, in my case), but when accessed with a file:// url it does not work.

just tested using file:// protocol in chrome, IE, FF and Safari... works in chrome and safari, does not work in IE or FF

then ran from localhost, got same results...

interesting...

No, I don't. You mean it needs a server to work?

In my experience, yes. ExternalInterface only works properly when served from a server. Of course, moagrius got different results, so your mileage may vary.

This is all...really interesting...please fill my head with more of this.

Is there any JS code that will work in all browsers or no?

I think that if you call a javascript function that focuses your swf from the swf, it will work - don't try to focus until you know the swf is loaded. swfObject is a bit slow to load on mozilla.

I used that approach in the demo. On initialization, the swf calls a javascript function which sets up the event listeners in the html document. I wasn't able to find a cross browser solution for actually setting the focus to the swf. In IE, calling focus() on that object element should work, but that doesn't work in other browsers. Passing on the keyboard events is the next best solution.

jQuery should abstract all the cross-browser javascript issues away. But I didn't have access to enough browsers to fully test it.

Without some cross-browser solution like jQuery, the event key properties will vary according to browser. Some use keyCode, some charCode, and some a property called 'which'. As well, the process for adding the event listeners to catch the event in the first place will probably differ.