Join Todd Perkins for an in-depth discussion in this video Responding to events, part of Flash CS4 Professional: Object-Oriented Programming .
Now we are going to look at listening for and responding to events. For our example we will use a mouse click, but rest assured listening for and responding to any event is pretty much the same process. On the stage here I have a button that is clearly anxiously awaiting being clicked, that says click me on it and it's a button symbol. So if you are going to communicate with a display object or a visual object on the stage using ActionScript, it should be either an instance of a movie clip or a button.
From there it will need an instance name. You can assign an instance name in the Properties panel. So select the button on the stage and on the Properties panel, click in the Instance Name field that says text field at the top and then type the instance name. Here I called it my_btn. This _btn suffix is just so you get code hinting in the Actions panel. So it's not mandatory; it's just for code hinting. When you are naming an instance, make sure to fall the same naming conventions you use when naming variables. So you don't want to use any spaces or special characters or anything. Let's go to the first keyframe of the Actions layer and open up the Actions panel and here what I'm going to do is listen for the event.
Now events in ActionScript 3.0 require two parts. First you have to have an event listener and you have an event handler. An event listener connects an object to an event. So, for example, you want to connect this button to the mouse click event. Event handler is a function that runs that responds to the event. So let's take a look at how to define an event listener first. So I'm going to type my_btn and then a dot, so use dot syntax in ActionScript 3.0 to manipulate properties and methods of objects. What we are going to do here is run a method which is actually a function attached to a class.
It's called addEventListener. So add, all lowercase, Event and by then it should be highlighted in Flash's code hinting. So you can just press Enter or Return on your keyboard to have Flash type it out for you. You should also see code hinting for the event in the Actions panel. So Flash is first asking for a type and then a listener, which is function. So the type is a string. Now, you are actually never going to type a string here. You are always going to use the formal way, which is typing the event class and the event property of that class.
So, anything you do with the mouse, like a rollover, a click, mouse move, etcetera, is in a mouse event class. So here we are going to type the class. So MouseEvent. It's all one word. It should turn blue when you type it correctly, and then a dot. This property that we are going to use is actually connected to the class, not an instance of the MouseEvent class. So it's called a static property. All the events are what are called constants meaning they don't change. Constants are always created with all caps. So MouseEvent.CLICK in all caps.
You should be able to start typing click and it should get highlighted in the code hinting area. Press Enter or Return and it get written out for you there. So the event that we are listening for is a mouse click. So again, all events related to the mouse are held in the MouseEvent class. So type a comma and a space; the space is actually not necessary. It's just for prettiness in code writing and now I'm going to type the name of a function that I'm going to run when the button is clicked. So I'm going to call this btnClick, close out the parenthesis, type a semicolon, then we go down a few lines.
That's important to know that it doesn't really matter where this function is. It could be above the addEventListener code or below it, because what's going to happen is when the event happens, Flash is just going to look for the button click function and run it wherever it is. So we will define a function called btnClick and whenever you are working with an event your function needs to receive the event data. So I'm going to type some parenthesis here. I'm going to receive it in a parameter I'm going to call event. Now you can call this whatever you want. I just have the habit of calling it event all the time. So whenever I'm responding to event, parameter name is going to be event.
So the data type is going to be MouseEvent. So that's going to match the data type of the event class, so MouseEvent in the case of anything related to the mouse. The return data type is always void for events, type some curly braces and here I'm just going to use a trace statement. So I'm going to type trace("button clicked!"). Now we will test the movie and preview this. So notice that we don't see anything appear in the Output window, because we actually have to click the button to trigger the event. So click on the button and there is the message in the Output window. Click on it multiple times and the function will run multiple times causing multiple trace statements to appear in the Output window. Nice! Let's close the preview window and return to the code. Not only can we run a block of code when a function runs but we can actually access data about that event.
So whenever we click something, the event object that we are receiving as a parameter has information about that event including the event type, like whether it was a mouse event like a click event or a rollover or whatever. You can access that through the event object's type property, so event.type. You test the movie, click the button, and I'll see 'click' in the Output window. Back to the code. Then if you want to access the object that was clicked, use the target property. So event.target. This is going to prefer to the object that initiated the event. So if I click on my_btn, event.target is going to be my_btn. So test the movie, click on the button. We don't see my_btn there, because the button is an ActionScript object. So in your code you will see object SimpleButton.
But let's say we wanted to get the button's instance name for some reason. I can use event.target and then type .name after that and that will give me the instance name of the button. So the name property is a property of my_btn. So when we type event.target, we are making a reference to the button and we can access that button's properties through dot syntax after target. So event.target.name will give us the value of the name property of my_btn, because that's the instance name of the button. Test the movie, click the button, and there is my_btn in the Output window.
Now this isn't that impressive right now, because we already know the name of the button. But let's say we had 100 event listeners added to the various objects writing the same btnClick function and we wanted to do essentially the same thing when a button was clicked, and that's to do something with the button's name. By using this event.target.name property this can be a more dynamic function that can be used for multiple objects to perform the same task. So in other words, this can represent the name of whatever button that was clicked and not just my_btn. So to recap, when you are working with events, you are first going to need to add an event listener to your object. So we are adding an event listener to my_btn and adding an event listener is a method of just about every object. So, every interactive object in ActionScript 3.0 has this addEventListener method.
So you call that object's method and in the parentheses you pass in first the event to listen for and the format for doing that is the event class, which in this case is MouseEvent, dot, the event name, which is CLICK in this case, and event names are always in all caps with words separated by underscores and then a comma and then the name of the function that you are going to run when the event occurs. Then you define that function like a normal function. You receive an event object and this event can be called anything. I just happen to call it event all the time, but it needs to have the same data type as the event class. So, MouseEvent in addEventListener and then MouseEvent for the data type in the btnClick function.
Inside of your event handler function, you can access properties of the event through the event object. So this event parameter here has the property target, which refers to the object that triggered the event. In this case, it's my_btn. We can access its properties through event.target, just like here where we are accessing the object's name.
- Loading external text, images, and XML files
- Creating essential properties for a View class
- Defining a Model class
- Building and implementing interfaces and designs
- Debugging projects
- Building applications with Controller-class buttons