Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this movie we're going to write something called an event handler that will respond to our click event. An the event handler is a function that responds to an event. So instead of being triggered when you tell it to be triggered by using open and close parentheses, like we did before, it's triggered when an event happens. If you'd like to follow along, I'm in Handlers.fla in the chapter 04 folder. So on the Stage, we have boarder_mc. Then let's go to the actions layer and open up the Actions panel.
This is the code that we wrote in the last movie. We added an event listener, so we told boarder_mc to listen for a mouse click and then it's going to run a function called onClick. So all we need to do now is write a function called onClick. So after the semicolon, I'm going to press Enter a few times to go down a few lines and I'm going to type function space onClick with a capital C, open parentheses.
Now when this function runs, or any kind of event function runs, it receives an event. So it doesn't just run if I put a close parentheses, it wouldn't work properly. When an event handler runs it receives this MouseEvent.CLICK, or rather just the mouse event. After the open parentheses, I'm going to type the word event. That's what we're going to use inside of the function. It's going to be the variable that represents the event that happened. Then type a colon, then type Mouse with a capital M, then type Event with a capital E, no spaces here.
Close parentheses, colon, void with a lowercase v. Let me just explain what we've written so far. When you click on boarder_mc, this click function runs, this onClick function runs and the mouse event, the click is passed into that function. And it's not going to return anything so we have :void. After void, I'm going to press Enter, open curly brace Enter again, close curly brace, up arrow and then Enter. Inside of these curly braces I'm going to write what happens when you click on the boarder.
I'm going to write trace ("click!!!!!!!!"); You could put anything you want in this trace statement. I just want to check to make sure that this click is functioning properly. So all that should happen when I test the movie is when I click on the boarder I should get a message in the Output window. And it says click. Click a whole bunch of times, look at the Output window, it runs every time you click the button.
Now if you're wondering why you're not seeing a hand cursor when you roll over the boarder. Let's fix that right now. Let's go back into our actions by selecting the keyframe of the actions layer opening the Actions panel. After the curly braces of the onClick event handler, and remember event handler just a fancy name for a function that reacts to an event, I'm going to the press Enter a few times to go down a few lines and then I'm going to type boarder_mc .buttonMode, capital M = true. All button mode does is says use the hand cursor if it's listening for some sort of mouse event. Test the movie now.
Roll over the boarder and we get that cool hand cursor and we're still getting a message in the Output window. Since we no longer need that trace statement, I'm going to click right before the word trace, back in my Actions panel and type two //. You could also select it and then click the Insert single line comment button. After the semicolon of the trace statement, I'm going to press Enter, and then I'm going to type boarder_mc.y -= 15; What this line will do, it will subtract 15 from whatever current y property is on the boarder_mc which will move it up 15 pixels every time.
Press Enter after the; And then type boarder_mc.rotation += 45; This will increment the rotation by 45 every time we click the button. So every time we click on the boarder he'll move up to 15 pixels and rotate 45 degrees. Now I'll press Cmd+Return or Ctrl+Enter on the PC to test the movie.
Click on the boarder and watch him fly. Closing out that movie, let's go back to the code. There's one more thing I'd like to show you that we can do when we're using an event handler. When you click on the boarder, click on any object that has an event listener. The information that's passed into the event handler holds what object was clicked. Instead of boarder_mc and its event handler I can tell it something else.
So let's select it and let me show you how that works. I'm going to select boarder_mc. And I'm going to replace that with event, all lower case, just like I wrote it in the onClick area where it accepts a mouse event. Then I'm going to type a dot, then I'm going to type target That means the target movie clip, or the target object that was clicked that initiated this mouse event. Let's replace the lower boarder_mc with event.target as well.
So now if I ever want to apply this to another object, it'll just increment the rotation and y properties as well. So I can apply a listener to boarder2_mc or boarder3 if I had those on my timeline, and the same thing would happen. This actually makes an event handler a lot more recyclable if we use event.target instead of the object name that we're clicking. So now I'll test the movie by Cmd+Return and the same thing happens. Let's close out that player window. So that is how to write an event handler and you again an event handler simply a function that executes when an event happens. Now that you understand how to write event handlers, in the next movie I'll explain that how to use a few more different events and we'll start with mouse events.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101167 Viewers
61 Video lessons · 87925 Viewers
71 Video lessons · 71806 Viewers
56 Video lessons · 103670 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.