Beginning Of Event and EventListeners With Actionscript 3.0

August 16, 2008 – 9:42 pm

Event class had a big change with Actionscript 3.0. Those changes effect and make thins much easier for developers. The main idea behind that is having better controls on objects. Better control on codes it will decrease number of the errors. Also will help you too manipulate your code after while.

For example: You have made a project with Actionscript 3.0. Couple months after you finish project your costumer or employee wants to add a new functionality. Main problem over here will be adding code on a working system with out breaking functionality that is exist. Usually is hard to add some code on a system that is working. In this point is matter how good you can control your objects. If you can control your objects easily adding new codes will be easy. If is not you will have more serious problems about adding new functionality. And for more control you should definitely use the event class good.

What is Event?
Event is respond of an object to the other objects in Actionscript when some action happen. Best and easiest example is actions that happen when you click a button in Actionscript. But do not think of that only for buttons. Events can be in lots of types. Beginning of an animation, ending of animation, image that start to be load or anything like this can be an event. Any action that happens is beginning or ending of an event.

Event Listeners
Event listeners check or listen to object for any change or action. Event listeners give us information of did animation start, did some click button, did image loaded, did connect to server or any information like this. When expecting event occur event listeners run block of code which had been specified before.

Basically Creating Event Listener
Creating new event listener is not hard. Basically you can do it in two steps, first is adding event listener to object that you want to listen. Second is making the function ready which will work when the event happen. For example we will add a simple event listener to button and our event listener will listen to mouse click on button. When you click the button function will work. Now add a button to stage and give “my_btn” as an instance name. After wards you can open your action panel and start to write to codes. First we need to add a event listener;

  1. my_btn.addEventListener(MouseEvent.MOUSE_DOWN, btnDown);

After name of object(my_btn) we are adding the addEventListener method. And than we are adding the parameters we are going to send to event listener. addEventListener method gets 5 parameter. First two of them is required the others three parameters are optional. First parameter (MouseEvent.MOUSE_DOWN) is type of event that you want to listen. We are listening the MOUSE_DOWN event of MouseEvent class. Type of event over here represent the event that you want to listen. If you want to listen a timer object you need to use Timer event (TimerEvent.TIMER) .
Second parameter is function which will work when event is dispatched.

Now let’s take a look at the function which will work when event dispatched. Function at below is except a parameter called event. Type of this variable is MouseEvent.

  1. function btnDown (event:MouseEvent) {
  2. //Butona tıklandığında çalışacak olan kod bloğu
  3. trace("Butona tıklandı");
  4. }

So what is that mean? When button is clicked new event is dispatching and getting some information about the object which is dispatching the event and passing those information’s to function. Because of somehow that information must have been catch that’s why we are adding to event parameter. Now you can write any code you want in function. But you should always be careful about type of event you assign to parameter function. The type of event you assign to function parameter is must be same as dispatched event type.

How To Use Parameters
Event parameter that we assign to function is not only helping us to know that event is dispatching, also carry some information about the object which dispatches the event. For example when you click a button on the stage you can get all the properties of that button with event parameters. The x and y coordinates, alpha value name of button and properties like this and more. Now let’s change our function like this;

  1. my_btn.addEventListener(MouseEvent.MOUSE_DOWN, btnDown);
  2. function btnDown (event:MouseEvent) {
  3. trace(event.target.x);
  4. trace(event.target.y);
  5. trace(event.target.width);
  6. trace(event.target.height);
  7. trace(event.target.alpha);
  8. trace(event.target.scaleX);
  9. trace(event.target.name);
  10. }

When you look the code above there is only a small difference and that is a target properties. Target is our event target. Let’s say you have 10 different buttons on stage and you click one of them, when you click the information of that object is passing to the target properties. You can think of that as target is being copy reference of object on the stage. Of course as we have object we can change or manipulate any information we want.

If you have a question in your mind like: “I all ready now the name of object, I can get pr set those properties with out event class, so why I do need an event class?”

Answer is simple: think of you have 10 different button on the stage. What would you do? Would you make event listener for each button on stage? Or would you put them all in a movie clip and only assign 1 event listener for 10 buttons. So when ever any button has been click you can be informed by event listener.

Removing Event Listeners
When you are coding you may not need to listen the events anymore or you may not need to event listeners. In this case you can use the removeEventListener method for removing the event listener. For example at below there is code which is listening the ENTER_FRAME event. First we are adding event listener, and than in function we are increasing the “i” variable. This is helping us to count how many times event function did work. When function works 5 times than we are removing the event listener.

  1. this.addEventListener(Event.ENTER_FRAME, run);

var i:uint=0;
function run(e:Event) {
i++;
trace(”Number of event listener function work : “+i);
if (i==5) {
this.removeEventListener(Event.ENTER_FRAME, run);
}
}
Controlling Objects With Event Listeners
Event listeners getting information of object which dispatch the event. If we can reach the properties of an object, we can also change those properties. At below there is an example how we can change that;

  1. my_btn.addEventListener(MouseEvent.MOUSE_DOWN, btnDown);
  2. function btnDown (event:MouseEvent) {
  3. event.target.x=150;
  4. event.target.y=150;
  5. event.target.width=200;
  6. event.target.alpha=0.5;
  7. }

As you see in code by using same way we can change the properties of an object.

Upshot
Yes, basically event listeners are working like this. Of course this is a small part of an event listener class. Or better if I say is beginning level. If you are working with OOP you should definitely learn how to use event class effectively.

Take Care
Engin!



Leave a Reply