AS: Listeners

[Sir-Davey]

AS: Main

Event Listeners
==========================================
=========================

Listeners in Flash make user interaction much easier to work with. You can intercept Key presses, mouse movements and clicks no matter which component is focused at the time. The 2 most interesting things about listeners is that they allow you to know when a key is released, or when the user uses the scroll wheel on his mouse!

The Basics
A listener is basically an object. To create a listener object, there are a few things you have to do:
-First, create a new object.
var ListenerObject:Object = new Object()

-Second, make it actually listen to things. For that we use the addListener(object) function that comes in the Key and Mouse classes:

//For a mouse listener
Mouse.addListener(ListenerObject);
//Or for a Key listener
Key.addListener(ListenerObject);

-Third, create the functions for the events that get triggered:

ListenerObject.onSomething = function()
{
//do something
};

Key Listeners
Key listeners allow you to know when a key is pressed, or when a key is released. The two event names are obviously onKeyDown and onKeyUp. In an onKeyXX event, youcan access the Key object, which stores the actual key pressed or released.

There are a few functions in the Key object, but the 2 main ones we need are :
-getCode() : A key code is a number used to store the key currently pressed or release. It is a special Flash-assigned number that can also keep track of when the space key is pressed, for example.
-getAscii(): This is to retrieve the ASCII value of the key. An ASCII value is also a number, but it is used to store what actual character the Key is. List of ASCII characters. This value can be used with the String function fromCharCode(Number).

Here is an example that traces what key is actually pressed, and also traces what key is released:

var ListenerObject:Object = new Object();
ListenerObject.onKeyDown = function()
{
trace("You pressed the "+String.fromCharCode(Key.getAscii())+" key");
}
ListenerObject.onKeyUp = function()
{
trace("You released the "+String.fromCharCode(Key.getAscii())+" key");
}
Key.addListener(ListenerObject);

Note: If a user holds down a key, the onKeyDown event will be triggered as long as the key is pressed. The frequency of the repetition all depends on the user's settings.

Mouse Listeners
Mouse Listeners allow you to know when the user clicks, releases or moves the mouse button, or when he uses the scroll wheel. The events are onMouseDown,onMouseUp,onMouseMove and onMouseWheel.

You've probably already used the first 3 in your games, etc. So I'm, just going to explain how to use onMouseWheel:
If you want to know by how much the mouse wheel has moved, you need to add a parameter to your function: a number. This parameter represents by how much the scroll wheel has moved. It's a positive number if the user scroll up, and a negative number if the user scrolls down.

Examples are worth a thousand words, so here's how you can make a movieclip move up or down using only the scrollwheel. Hopefully you actually have a scroll wheel on your mouse.

var ListenerObject:Object = new Object();
ListenerObject.onMouseWheel = function(inc:Number)
{
_parent.movingMC._y -= inc;
}
Mouse.addListener(ListenerObject);

Note: It is likely that a user won't have a mouse wheel. You should always add a key alternative to the mouse wheel!

This concludes this tutorial about Listeners. Hopefully it was clear enough, and I've made a small example that basically listens for every user interaction. Click here to view it.

[Denvish]

Cool tut, well explained, and nice example of use. The only thing I'd add is that generally Listeners are placed on the Main timeline - I normally add them to the code on the first frame.

One of the questions/problems that I hear a lot about is the fact that the Listener continues to monitor for onKeyDowns after the key has been pressed (ie, when it's held down).
To get around this, I generally suggest using a boolean value to check whether the key has been released, and only run the onKeyDown code if it hasn't.
This example 'does stuff' only when the SPACE key is pressed; if the SPACE key is held down, it doesn't repeatedly 'do stuff'.

bleh=0; //boolean variable
kl = new Object();
kl.onKeyDown = function () {
if (Key.getCode() == 32 && bleh == 0){
//Do stuff
bleh=1; // Disallows the code running until SPACE key is released
}
}
kl.onKeyUp = function () {
if (Key.getCode() == 32){
bleh=0; //Reset boolean
}
}
Key.addListener(kl);

[IWantSomeCookies]

Awesome tut man!

I have never come across Listener's before its really instering..so I did something else with it, only simple but yeah.. if you want to have it displayed in a textbox, just make a dynamic text-box with var 'pressed' and add:

Example first..

var ListenerObject:Object = new Object();
ListenerObject.onKeyDown = function()
{
_root.pressed = "You haven't pressed or released any key!";
}
{
_root.pressed = "You pressed the "+String.fromCharCode(Key.getAscii())+" key";
}
ListenerObject.onKeyUp = function()
{
_root.pressed = "You released the "+String.fromCharCode(Key.getAscii())+" key";
}
Key.addListener(ListenerObject);

If you want it, so when you only press it counts, just replace the 'You released the xx key' with You havent press any key! And replace the first line with You havent press any key, instead of realease iswell.

[krazed428657]

what about putting listeners in classes

[Dark-Volcano-Sam]

Very useful indeed. I was wondering about listeners, since I am trained to become a professional game designer/developer. Perhaps, I shall use it for any game I was thinking of.

[SuicideMessiah]

can i use a listener to make it so you can only press C if the space was pressed before it?

[GuyWithHisComp]

another useful thing to do with listeners which you haven't mentioned in your tutorial is to remove listeners.
adding listener
button.addEventListener("click", oListener);
removing listener
button.removeEventListener("click", oListener);

[Mehrdad14]

how can i make is so that it comes as random letters or numbers then you have to press that number or letter to go to a certain frame and if you dont nothing happens....(when i mean nothing happens i mean you wait till 5 sec then it says "you lose"...something like that)

i hope you understand...

[Delta66]

I'm making a mouse avoider and I want a listener to stopo cheaters.I want it on the ALT key becasue that button is a cheat code.CAn you help me get a script for it?

[sniffy-gerbil]

So like a text field component could be created?

class Frame extends _root{
myListener:Object = new Object();
myListener.addListener();
str:String = "";
myListener.onKeyDown = function():Void{
str = str + String.getCharCode(Key.getASCII());
}
}

[GeoKureli]

At 3/17/07 07:03 PM, sniffy-gerbil wrote: So like a text field component could be created?

class Frame extends _root{
myListener:Object = new Object();
myListener.addListener();
str:String = "";
myListener.onKeyDown = function():Void{
str = str + String.getCharCode(Key.getASCII());
}
}

you'd better use the built in textfeild component

//as2
createTextField("myText", 1, 100, 100, 300, 100);
myText.type = "input";
myText.text = "change me";

//as3
var myText:TextField = new TextField()
addChild(myText);
myText.width = 100;
myText.height = 100;
myText.x = 300;
myText.y = 100;
myText.type = "input";
myText.text = "change me";

[sniffy-gerbil]

Cool, thanks for giving the AS3 example as well it seems to be a lot more powerful; it was smart to make a TextField class.

[malakesh]

using denvish's code as an example

bleh=0; //boolean variable
kl = new Object();
kl.onKeyDown = function () {
if (Key.getCode() == 32 && bleh == 0){
//Do stuff
bleh=1; // Disallows the code running until SPACE key is released
}
}
kl.onKeyUp = function () {
if (Key.getCode() == 32){
bleh=0; //Reset boolean
}
}
Key.addListener(kl);

how do i make it so that 2 keys have to be pressed e.g. up arrow and left arrow??

[Pedochu]

malakesh: Use the '&&' operator. '&&' just means 'and'. Example:

if (Key.getCode() == 32 && Key.getCode() == <insert_keycode_here> && bleh == 0){
//Do stuff

But why bump this thread? Make a topic on it.

[malakesh]

At 7/11/07 03:55 PM, Pedochu wrote: malakesh: Use the '&&' operator. '&&' just means 'and'. Example:

if (Key.getCode() == 32 && Key.getCode() == <insert_keycode_here> && bleh == 0){
//Do stuff

But why bump this thread? Make a topic on it.

i no what the && lol but this doesnt work i think becasuse you telling the flash file to do the same thing twice but get two different answers from it so tht doesnt work im not sure if it is possible but i dont no any otherway to do what i need

[sergeantx]

At 10/17/05 10:05 AM, Denvish wrote:

: Cool tut, well explained, and nice example of use. The only thing I'd add is that generally Listeners are placed on the Main timeline - I normally add them to the code on the first frame.

One of the questions/problems that I hear a lot about is the fact that the Listener continues to monitor for onKeyDowns after the key has been pressed (ie, when it's held down).
To get around this, I generally suggest using a boolean value to check whether the key has been released, and only run the onKeyDown code if it hasn't.
This example 'does stuff' only when the SPACE key is pressed; if the SPACE key is held down, it doesn't repeatedly 'do stuff'.

bleh=0; //boolean variable
kl = new Object();
kl.onKeyDown = function () {
if (Key.getCode() == 32 && bleh == 0){
//Do stuff
bleh=1; // Disallows the code running until SPACE key is released
}
}
kl.onKeyUp = function () {
if (Key.getCode() == 32){
bleh=0; //Reset boolean
}
}
Key.addListener(kl);

thank you so much for this code. i had no idea how to do this until now. thx!