Flasher Archive

[Previous] [Next] - [Index] [Thread Index] - [Previous in Thread] [Next in Thread]

Subject: FLASH: Capturing keyboard events to trigger Flash actions (per request)
From: Nigel Randsley-Pena
Date: Mon, 31 Aug 1998 00:34:00 +0100

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
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

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

function keyHandler (e)
if (IE)
alert ("You pressed : " + event.keyCode + " or " +
alert ("You pressed : " + e.which + " or " +
return false;


<-- 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
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
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);
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);
theMovie.TGotoFrame(_level0, TCurrentFrame(_level0) + 1);
if ( key =='s' || key =='S' )
if ( theMovie.TCurrentFrame(_level0)==1)
theMovie.TGoToFrame(_level0, 25)
theMovie.TGotoFrame(_level0, TCurrentFrame(_level0) -1);
return false;


<-- 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-manageratshocker [dot] com. Problems to: owneratshocker [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-manageratshocker [dot] com

  Re: FLASH: Capturing keyboard events to , ali_kim

[Previous] [Next] - [Index] [Thread Index] - [Next in Thread] [Previous in Thread]