Join Todd Perkins for an in-depth discussion in this video Understanding events and event listeners, part of ActionScript 3.0 in Flash Professional CS5 Essential Training.
- View Offline
When building applications in Flash Pro, one of the programming elements you will work with most is called an event. Events are things that happen, like a mouse click, keypress, a video is loaded, et cetera. And event handlers are functions that run when a particular event occurs. Let's take this application I have here. Now, if you don't have the exercise files, all you need to do is create a movie clip and give it an instance name of boarder_mc.
So create a movie clip, select it on the main Timeline, go to the Properties panel, and in the Instance Name field type 'boarder_mc,' just as I have it here. We are going to talk a lot more about instance names and about manipulating movie clips later on, but for now this is all you need. Select the first keyframe of the actions layer, or create an actions layer, if you don't already have one, and open up the Actions panel.
Now, if you've used code snippets, you may have seen events in action, when you've applied a mouse click event handler to an object. So, you'll select an object and apply the mouse click through the code snippets. Here, we are going to add keyboard control to the character in the game. Now, the first thing to do to be able to respond to an event is to add something called an EventListener; that tells an object to wait for a particular event to happen. Now, if we are going to connect the boarder to the keyboard, you would think that we directly connect the boarder to listen for the keyboard press, but that's not how it works.
Keypresses are best controlled when connected to the Stage. So we're going to type the word Stage, and then I'm going to type dot. We'll talk more about what dots do in another movie. We'll type 'addEvent,' capital E, and you'll see addEventListener selected in the Code Hinting window before long, so you can just press Return, and Flash will write the rest of the code for you.
So, eventually I have a capital E, else Listener, capital L, and then the event that we want to listen to for is called KeyboardEvent.KEY_DOWN. So I just type a capital K. And Flash highlights that code for me. So I can press Return. Flash will type the import line of code, which makes sure that I can access a keyboard event through my code. We'll talk more about importing code later on, but for right now just ignore that. After KEY_DOWN, type a space and then type 'keyPressed' and a close parenthesis and a semicolon.
So, remember an EventListener, connects an event, and the event here is KeyboardEvent.KEY_DOWN, which represents when a key is pressed, to a function, which here is called keyPressed. Now, we haven't defined that function yet, but we'll define it in just a second. So, if connected pressing a key down to the stage. Keep in mind that an event can occur without anything happening, because you can press a key without a key to an EventListener. But when you add a listener, then you're able to respond to that keypress.
So, I'll go down a few lines, and I'll create a function. Type the word function then a space, and then keyPressed just as I typed it above. So, keyPressed, just likes that lowercase k, capital P, one word. Open parenthesis, and then I am going to type 'evt.' This is a parameter that represents the event that occurred. This is data that is going to be sent to the function when a key is pressed, and it's going to have information about the event that occur, which is going to be a keypress.
So type a colon and type Keyboard Event, capital K, capital E. Once it highlighted in the Code Hinting window, you can just press Enter or Return, close out the parentheses, type colon and then void, all lowercase. Go to the next line, create an open curly brace, add a return and depending on your settings, Flash will or will not create a close curly brace. If it's not there, make sure to add it yourself. And then inside of the curly braces, we are going to what happens when a key gets pressed.
The thing that we want to do is move the skateboarder. So, I am going to type boarder, all lowercase, _mc, also lowercase, dot x, plus equals five. That's going to move the boarder five pixels to the right. Well talk more about this code later on. For now you can just copy what I have on the screen.
So, test the movie, and then press any key on the keyboard and the boarder will move to the right. So here we have created a simple EventListener, and connected an event to a function, which is called an event handler, and inside of that function, we have moved the boarder. This is a pretty simple example of an event, but events are the backbone of your applications, and by applying EventListeners to objects, you can control what code is executed when an event occurs.
- Understanding the building blocks of ActionScript
- Working with the display list
- Using dot syntax
- Navigating the Timeline
- Creating document classes
- Linking classes to Library objects
- Adding drag/drop functionality to objects
- Creating a slide show
- Loading and running code in an external SWF
- Working with text
- Accessing XML data
- Playing audio and video with ActionScript