Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this movie I'll explain the various mouse events and how to respond to them. If you'd like to follow along, I'm in the MouseEvents file and that's inside the chapter 04 folder with all the other exercise files. Let's click on the first keyframe of our actions layer and open up the Actions panel. Here we have the code that we wrote in the last movie that has an event handler, right here. We added an event listeners to boarder_mc, and we set the button mode to true so the hand cursor will show when you roll over the boarder.
Let's just add a simple rollover and rollout effect to the boarder. So, what I'm going to do is after the semicolon on line 1 I'm going to press Enter and I'm going to type boarder_mc.addEventListener. Make sure the E of Event and the L of Listener are capitalized. And then I'll type MouseEvent with a capital E, dot capital R then I'll press down on my keyboard to go to ROLL_OVER in the code hinting area.
And I'll just double-click that. Then I'll type a comma and a space. After the comma we specify the function that runs when we rollover with our mouse. I'm going to type boarderOver with a capital O, close parentheses and a semicolon. Press Enter a few times to go down a few lines and now we'll write the event handler for the rollover event. And this is going to be identical to our onClick, so I'm just going to copy that.
Let's select all of the onClick event handler. So from all the way at the bottom curly brace, all the way up to the function at the top. Right click it or Ctrl+Click on the Mac, select Copy. Click on a blank line. Right click and select Paste. Now I'm just going to change the event handler name. So instead of onClick, I will call this boarderOver with a capital O and it's still going to receive an event that is a mouse event type.
So now let's just erase this code in the middle Gonna gut it. And let's just say event.target. And that's going to be the target that we roll over, so it'll be boarder_mc event.target.alpha -= .5; So when you roll over the alpha will go down 50%.
Now if test the movie, roll over the boarder. Roll out, nothing happens. Roll over again and alpha is 0, so let's just say alpha equals .5 instead of equals minus .5. Now let's just create a roll out event so that when we roll back out the alpha goes back to normal. So I'm going to select line 2. Press Cmd+C or Ctrl+C on the PC to copy that line of code. After the semicolon, I'll go to the next line, and then paste the code by pressing Cmd or Ctrl+V.
All we need to change here is where it says MouseEvent.ROLL_OVER, change it to ROLL_OUT, just make sure it's all capitalized. Just like that. It should be blue when you're done typing it. We'll change the function name to boarderOut and then we'll copy the boarderOver function from the word function all the way to the close curly brace. Press Ctrl or Cmd+C to copy. Go down a few lines and paste the code using Ctrl or Cmd+V.
We'll change the function name to boarderOut and inside of the function in or inside of the curly braces we'll set the value of alpha to 1. Test the movie. Check out the animation. Roll over the boarder, turns transparent. Rollout, goes back to normal. And the click event still works. And there we have it. We can respond to a roll over and a rollout.
And that's how to capture and react to different mouse events.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 103149 Viewers
61 Video lessons · 89816 Viewers
71 Video lessons · 73436 Viewers
56 Video lessons · 104986 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.