Friday, June 24, 2011

Creating custom events using Actionscript 3: Part 1

When I was writing about events in Flex, I realised that I haven't written a tutorial about creating custom events using AS3. In this tutorial, I will show you how to do that.

Writing, listening and dispatching your own custom events might sound complicated and even scare some people away, but it is really not that hard, and when you get used to it - can be very helpful and simple.

For example, say I am creating an RPG game, where I have an NPC (Non-person character) that can say something to the player. When he sends a message to the player, a window should pop up with the content of the message. We can create a custom event and call it, for example, NPCEvent, that we will later dispatch when the NPC needs to say something. When this event occurs (aka when the NPC says something), we listen to it and display the content of the message.

First of all we need to create our NPCEvent class. It must extend flash.events.Event class, and we will use the NPCEvent function to pass the message of the NPC as a string value as a parameter:

package  {
import flash.events.Event;

public class NPCEvent extends flash.events.Event{

public function NPCEvent(msg:String) {
}
}

}

We need to set a public constant, which will be a type of an Event. There can be more than one, but in this tutorial - just one, you will understand later why. For example, the MouseEvent class has types CLICK, ROLL_OVER, ROLL_OUT, etc. Our event's type will be SAY_MESSAGE. It is a string value and it should be the string value of this type. We can set it to sayMessage. Later, when we receive the event object with our event handler function, we can do event.type and receive this string value.

We will also set a public variable Message, which will be a string. You don't have to set any, or you could set 100 variables - it all depends on what you're trying to achieve using your event class.

public static const SAY_MESSAGE:String = "sayMessage";
public var Message:String;

When that's done, we can modify the NPCEvent function. We'll super() the SAY_MESSAGE type. We will set the msg parameter to this.Message variable, so that later we can read it from the event object.

package  {
import flash.events.Event;

public class NPCEvent extends flash.events.Event{
public static const SAY_MESSAGE:String = "sayMessage";
 public var Message:String;

public function NPCEvent(msg:String) {
super(SAY_MESSAGE);
this.Message = msg;
}

}

}


In your main .fla or .as file, you'll need to import the Event, EventDispatcher and your class if you want to work with them.

import flash.events.EventDispatcher;
import flash.events.Event;
import NPCEvent;

We can listen to our event using the addEventListener() method:

addEventListener(NPCEvent.SAY_MESSAGE, eventHandler);

function eventHandler(evt:NPCEvent):void
{
trace(evt.Message);
}

You can dispatch an event (send it to the event flow) using dispatchEvent, like shown in the example below. We pass the message that the NPC says as a parameter of NPCEvent object.

dispatchEvent(new NPCEvent("Hello there!"));

Now we can make our NPC send messages, and we know how to listen when the message is sent.

However, you might already have noticed the flaws in the NPCEvent class - we can only have 1 event type, because in the function we call super(SAY_MESSAGE), but there might also be events like SHOUT_MESSAGE or WHISPER_MESSAGE. Then how do we know what to use super() on? We'll work on this in the next tutorial.

Thanks for reading!

Related:

Creating custom events using Actionscript 3: Part 2

No comments:

Post a Comment