FLASH: Capturing keyboard events to trigger Flash actions (per request)

[Nigel Randsley-Pena]

José et al. :


Those of you that follow this list with closer attention might remember

a post by José Sávio Ponte where

http://users.skynet.be/cynapsa/flash/labo01.htm was referred.

At the time José asked if there was a simple way to understand how this

was done. as promised here follows a short tutorial on event handlers

for keyboard events and how to use them in Flash.

Before I go into it be aware that these are JavaScript 1.2 features and

as such will work only in type 4 browsers. All code include was tested

in IE4.01SP1 and NS4.06. It has been simplified so as to give sufficient

understanding of the principals involved and as such is still open to

evolution. Please feel free to use these snippets in whatever way you

like.

OK let's get down to it.

First of all please create a simple Flash movie with one symbol on the

stage ( a red ball for example ). Make the movie 25 frames long and

starting  from the left position the ball each frame more to the right

so that by the last frame it is at the right of the stage. Place stop

actions on every frame and when done aftershock it making sure to set

play = false and select support fo FSCommands. Let's call this movie

movie.swf to be original.


Now fire up you favourite html editor, personally I use the

HomeSite/Dreamweaver combo and find it great, start a new html document

and insert the following JavaScript code :

<!-- Cut from below


<SCRIPT LANGUAGE="JavaScript">

	document.onkeydown = keyHandler;

	var IE=(typeof window.event=='object');

	

	function keyHandler (e) 

	{

		if (IE) 

		{

			alert ("You pressed : " + event.keyCode + " or " +

String.fromCharCode(event.keyCode));

		}

		else

		{

			alert ("You pressed : " + e.which + " or " +

String.fromCharCode(e.which));

		}

		return false;

	}

	

</SCRIPT>


<--  Till above


Ok save this first example and try it out in IE or NS. When the page

loads hit any key on your keyboard. You'll see an alert box jump up at

you telling you what was hit.


OK look at the code, you'll notice 'document.onkeydown = keyHandler;'

What we've done here is to bind a event handler to our document in this

case a keydown handler, what we're telling the browser is that it should

intercept the following action 'the user depresses a key' and after that

we tell it what to do 'keyHandler'. Notice that even though keyHandler

is a function we left off the () that's because event handlers expect a

function so we just have to tell it what function it is.

Next line is one of those famous situations where we have to  test if

we're running in IE or NS. As you would expect both browsers act in

different ways so this is just a test for which browser we're on.

Now for the meaty part the keyHandler function.

IE returns an event object and the info we want is in keyCode it a

number representing the Unicode value of the key. We could use this if

we wanted but it's easier to use the ASCII representation of the code so

we convert it with String.fromCharCode(keyCode) that's much easier to

understand. This is done in the if (IE) part, the else covers NS

browser, and now you see why we declared keyHandler to have an argument.

Yes NS's onKeyDown returns the info in e and what we want here is the

keyCode value that's contained in e.which. As we did in IE we can

convert this value to the ASCII representation of the keyCode.

Note : NS defines the event (correctly) as onKeyDown but will work with

onkeydown so it does simplify your coding.


OK if your still with me and not bored to death or utterly confused I

guess you're ready for the best part. How to use this in Flash.

Remember the movie ? OK now's the time to use it.

You should have the html aftershock created. Open it up and let's start

editing.

First as we're not receiving events from the movie but sending them we

won't need the function movie_DoFSCommand(cmd,args) so just skip it over

or delete it along with it's VBScript buddy.


Now place the following JavaScript code


<!-- Cut Below

<SCRIPT LANGUAGE="JavaScript">

	document.onkeypress = keyHandler;

	var IE=(typeof window.event=='object');

	var theMovie = IE ? movie : document.movie;

		

	function keyHandler (e)

	{

		if (IE)

		{

			theKey = String.fromCharCode(event.keyCode);

		}

		else

		{

			theKey = String.fromCharCode(e.which);

		}

		react (theKey);

		return false;

	}


	function react (key)

	{

		if ( key =='a' || key =='A' )

		{

			if ( theMovie.TCurrentFrame(_level0)== 25)

				theMovie.TGoToFrame(_level0, 1);

			else

				theMovie.TGotoFrame(_level0, TCurrentFrame(_level0) + 1);

		}

		if ( key =='s' || key =='S' )

		{

			if ( theMovie.TCurrentFrame(_level0)==1)

				theMovie.TGoToFrame(_level0, 25)

			else

				theMovie.TGotoFrame(_level0, TCurrentFrame(_level0) -1);

		}

		return false;

	}


</SCRIPT>


<-- Cut above

						

OK, that's it. If you followed the code you should be asking, Hey what's

this onkeypress stuff ?

Well it's similar to the onkeydown event but onkeydown fires once when

the user presses the key, while onkeypress will fire when the user

presses the key and will continue firing while it's pressed as soon as

the keyboard repeat feature kicks in.

You'll notice that we're only interested when the user presses the 'a'

or 's' keys, checkout how we included the uppercase versions of both,

always think like this 'assume nothing' it's a bit like Mulder's 'trust

nobody' in the XFiles.

So what does the code do when we press 'a' or 'A' ?

Yes ! you've got it by Jove ! it advances the movie to the next frame,

also if we're at the last frame it will jump back to the first.

So you have no problem understanding what pressing the 's' or 'S' key

will do !


Well that's about it. I guess this might help get more Flash Games

popping up, if so don't forget to share your results with the Flasher

list, that's all I ask if you do care to use the code.


Happy Flashing and please find it in your hearts to excuse me for the

extreme length of this e-mail.


------------------------------------------------------------------------

To UNSUBSCRIBE send: unsubscribe flasher in the body of an

email to

list-managershocker [dot] com

.  Problems to:

ownershocker [dot] com

N.B. Email address must be the same as the one you used to subscribe.

For info on digest mode send: info flasher to

list-managershocker [dot] com