|| Artifact Interactive || Tutorials ||

TUTORIAL: How to ensure that the flash file has the focus

Author: David Doull
Date: 22/04/01

Aim: For keyboard controlled games you need to ensure that the flash file has the focus, otherwise the key presses wont be detected. This tutorial explains two techniques to achieve this.

Assumed Knowledge: basic understanding of flash

OK, lets say you've developed a cool keyboard controlled game. The game worked fine when you tested it in the flash application but you have problems when you put it into a web page. You instruct people to move using the arrow keys, but all that happens when people press the down key is that the browser scrolls down.

What's going on?

For a flash file within a web page to detect key presses the flash file must 'have the focus'. In other words the flash file must be selected, which is typically achieved by clicking on the flash file.

There are two ways you can ensure that your flash file 'has the focus':

(1) get the user to click on the flash file

(2) use javascript.

I'll explain each of these.

1. Get the user to click on the flash file

It's as simple as it sounds, just ensure that the user clicks on the flash file before you start needing to detect key presses. For a game just set up a start button that the player has to click on to start the game. When they click on the button the flash file will have the focus and key presses will be detected by flash.

2. Use Javascript

You can use javascript to set the focus to the flash file once the web page is loaded.

In the html code for the page for your flash file you will need to ensure that the name and id tag elements are contained within the html for your flash file. In other words you need to ensure that your flash file has a name and an id.

These tag elements aren't always included by default. In Dreamweaver you can set these using the properties inspector.

Alternatively in HTML you need to :

Within the <OBJECT> tag include id="mygame" name="mygame"
Within the <EMBED> tag include name="mygame".
Replace mygame with whatever name you want to give your game.

Your HTML code for your flash file will look something like:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="http://download.macromedia.com/pub/
shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
id="mygame" name="mygame">
<PARAM NAME=movie VALUE="spaceflight.swf"> 
<EMBED src="spaceflight.swf" 
TYPE="application/x-shockwave-flash" 
PLUGINSPAGE="http://www.macromedia.com/shockwave/
download/index.cgi?P1_Prod_Version=ShockwaveFlash" name="mygame">
</EMBED>
</OBJECT>

Now, all you need to do is include the line onLoad="mygame.focus()" within the BODY tag. So your body tag will look something like:

Replace mygame with whatever name you want to give your game, just make sure its the same name you used for your id and name elements.

Recommendations.

If you are building a keyboard controlled flash game I strongly recommend that you use both of the above methods to make completely sure that the flash file has the focus.

Cheers David.