Feb 21 2010

Custom Event Listener

Category: AS3admin @ 2:22 am

When writting your AS3 projects, you will need events. The main thing that events do is to help you make a bridge between your instances of classes. take the adobe’s MouseEvent as an example. you add a MouseEvent.CLICK listener to a movieclip so that when you click on a movieclip instance it will dispatch the “CLICK” event. it works like below as you know.

import flash.events.MouseEvent;
mc.addEventListener(MouseEvent.CLICK, onClick);
function onClick(e:MouseEvent):void
{
    trace("mc is clicked")
}

this is all good, you have used an event being built by adobe (there are many other premade events by flash if you just check the package flash.events)

what you have done above is very nicely OOP because you can call the function “onClick” on your document class without being worried about that when you are writting the code inside your mc class. because you know your mc instance which has extended MovieClip will automatically dispatch the MouseEvent.CLICK event and all you have to do is to add a listener to grab that dispatch and do something with it.

now, let’s see why custom events are useful. imagine you are building a game in which there is a counter which will let users play the game for 60 seconds only. the counter will count down untill it reaches the value 0 and as soon as the value is 0 you want to stop the game and let the user know about that.

so you can call it an event, right? the event of TIME_OUT, for example, ok? so this event is not something available by default in flash events. so you will know that your mc class will not dispatch anything when the counter value reaches zero. so you must dispatch that yourself! it’s so easy, you can dispatch it inside your mc class like this:

if(counter == 0)
{
    dispatchEvent(new Event("timeOut"));
}

if you notice the code above, you will see that we have used the Event class. this is good enough and you can add a listener in your document class to grab this event whenever it is dispatched. you may add a listener in your document class like this:

addEventListener("timeOut", onTimeOut);
function onTimeOut(e:Event):void
{
    trace("game is over!");
}

But I can give you fair good reasons why you would need to build a custom event class! keep reading and you will be convinced!

when I say a custom event class, I mean creating a class which will extends the flash.events.Event class. in our example, let’s create the custom event class with the name of McEvent.as and put the below code in it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
package
{
    import flash.events.Event;
   
    public class McEvent extends Event
    {
        public static const TIME_OUT:String = "timeOut";
        private var _param:*;
       
        public function McEvent(type:String, data:*=null, bubbles:Boolean=false, cancelable:Boolean=false):void
        {
            _param = data;
            super(type, bubbles, cancelable);
        }
       
        public function get param():*
        {
            return _param;
        }
    }
}

now that you have build your custom event class, you may dispatch the timeOut event from your mc class, like below:

if(counter == 0)
{
    dispatchEvent(new McEvent(McEvent.TIME_OUT));
}

and in your document class, you can add the listener like this:

addEventListener(McEvent.TIME_OUT, onTimeOut);
function onTimeOut(e:McEvent):void
{
    trace("game is over!");
}

you may say this is just some extra unnecessary process! but take a look at the bright side, you have a nicely orgenized events being introduced for your mc class! you may have other events and you can put them all in one place and you can make sure you are not mistyping the name of the events. because they are now some constants being introduced in McEvent class.

the advantage is not limited to a better project orgenizment only. the main advantage is that you can send extra values along with your dispatch! take another look at your custom event class, McEvent, you see the variable

private var _param:*;

The variable _param is of type anything which means you can save and transfer any data through it while you are dispatching the event. in our example, imagine you want to send the player score along with the timeOut event. you can dispatch that event like this:

if(counter == 0)
{
    dispatchEvent(new McEvent(McEvent.TIME_OUT, 99)); // 99 is the player score!
}

now you are dispatching the event and you are also sending some parameters. you can grab and use this parameter in your document class like this:

addEventListener(McEvent.TIME_OUT, onTimeOut);
function onTimeOut(e:McEvent):void
{
    trace("game is over!");
    trace("Your score is: " + e.param);
}

This is just a simple sample of why you may need custom events :) when you use it in your projects, I’m sure you will love how it will help you code bettr OOP.

I hope that helps,
Hadi

Tags: , , , , , , ,

7 Responses to “Custom Event Listener”

  1. Addis Abebayehu says:

    This is excellent!!!. I I need your help please. I wanted to build a separate video playlist with a separate
    video player. This means that the video playlist swf file needs to communicate with the player swf file.

    when ever the user select a video from the list the play which is the tp of the page plays. The video player list is all the way down to the page.

    Would you please help me how I am going to this? I tuck on dispating the url of the video to the player.
    Please help

  2. Addis Abebayehu says:

    Thank you for quick response!! It looks like the player and the video list is in one swf. I want the playlist to be in separate swf. IS your player and playlist are in a separate swf? Please guide me how I am going to link the player with the plylist swf. I have to have the player and the playlist in separate swfs.This means that I have to dispatch a mouse click event with the url of the video to the player. The player then play the video. How I am going to do this? Help please!

    • admin says:

      of course the player and the playlist are two separated swf files… This is not the place to talk about our video player… I’m sending you and email now.

  3. Addis Abebayehu says:

    I was trying to use your example above and still not working. I keep getting “undefind object in both the sender and receiver action script file.

  4. Addis Abebayehu says:

    Can you show me a just a sample how to do swf communication passing an event with prameter please. Thank you!

    • admin says:

      well, I think I will try posting an article about intra-swf data transfer in AS3 but can’t just give a date mate, we need to keep up to our schedules.

Leave a Reply

*