Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Once you have the buttons created, the next thing you want to do is add functionality to them, in other words, make them do something. That's what I want to do here is I want to make these four buttons work. The first place you need to start is to give them a specific name, an instance name. So I'm going to double-click on this content movie clip to enter inside of it and notice here are my buttons. I want to go through and give each one an instance name, starting with this one right here, the John Doe.
It is the home button. So in the Properties panel, I'm going to give it an Instance Name of home_btn. Don't use any special characters or any spaces. It should really just be one word _btn. About is going to follow the same pattern, btn, video_btn and portfolio. So really be mindful of what you're calling each button because that's probably where the most errors happen is with instance names. Okay.
So I'm going to start off with this home button. So I'm going to remember home_btn. But let's be aware that we are actually inside of the content movie clip. So I need to click back out on Scene 1, because on my main Timeline, all my ActionScript is going to be in this frame. So what I need to do is I need to give the content movie clip an Instance Name. So with the content movie clip selected, I'm going to go ahead and type in 'content_mc,' just like that. All right.
Now select that first frame in your ActionScript actions AS layer and go to Window and open up your Actions panel. Here is mine, loading in the random background. The first thing I want to do when I open up my Actions panel, since I always want this code to appear, I want to pin my code. So it's just pressing this pushpin. Now the code always stays up, regardless of what I click on. Next thing I want to do is just add a couple of lines.
Two forward slashes will enable me to add a comment. What I want to do is just go ahead and type in plain English what's going to happen. So in this case, I want to Listen For The Click Of The Buttons. These are going to be for all the buttons. Now, the first button I'm going to deal with is going to be the home button. Let's remember that it's inside of the content movie clip. So content_mc. That's my Instance Name. Inside of there, so I need to separate that with a period, is the home_btn.
I'm going to hit period again. What I need to do is I need to listen for the click of the home button. So I need to add an event listener. Again, I love the code hinting I get in here, because as soon as it highlights right here, I can go ahead and hit Return and it adds it. I am also given additional hints that can be pretty convoluted, but they are in there, because it is asking me for what type of listener I'm listening for. Well, I'm listening for the MouseEvent.CLICK to be more specific.
The great thing about how setting up listeners works is I can not only listen for a click, but I can also listen for many, many different things and you can peruse this at your leisure, but, you know, whether it's MOUSE_OVER or MOUSE_OUT, MOUSE_WHEEL, whatever it may be, it's all available right in here. So, in this case, it's just going to be the CLICK that I'm listening for. I'm going to add a comma and it's going to go ahead and listen for some sort of Function is what it's going ask for next. I'm just going to type in 'homeClick.' All right.
So homeClick is going to be a function that fires off when this button is clicked. So I need to create this function. As you start typing ActionScript, notice you'll quickly run out of space. Well, you can always minimize this panel off to the side, just by clicking that arrow, and now you have more room. All right. Now again, I want to create a function called homeClick. So just below that, function homeClick. It's going to accept a MouseEvent and it's going to be void.
as in it's not going to return anything. But in general, this is the structure for a function. Anything within these curly braces is going to execute when this function is being called and this function is being called when you click on the button. Now, I can go ahead and add whatever I want to add to this when it gets clicked on. And what I'm going to do now is just add a trace statement. Again, this is just for testing purposes to make sure everything is working, homeClick.
Go ahead and listen for and just print out in the Output panel, this word homeClick, just so I know that it's working for testing purposes. All right. It's looking pretty good and anytime you type a lot of code, feel free to hit this little Check Syntax button and it'll tell you that it contains no errors. Let's go ahead and test the movie. Now, here is my home button. So if I click on it, I can see that it says, I will move this out of the way, it says 'homeClick,' right there, so it's working out perfect and, of course, if I hit it multiple times, that's working great.
We're doing quite well. In fact, I want to go ahead and do the same thing for the other buttons. So I'm just going to condense this down. You can have line breaks all you want. If you want to condense it down, you can go ahead and remove the spaces if you want, but in order to make the others, it's going to follow the same format. So I want to just go ahead and Select All of this and then Copy it and then I'm just going to paste it right below. So I'm going to do the About button next. So for content_mc inside of content, that movie clip is going to be an about_btn.
Of course, it has an EventListener. I am listening for the click. Well, I don't want it to fire off this function up here. I want to create a new function called aboutClick. aboutClick is going to be right here. Then it's going to trace out aboutClick, just like that. Two event listeners written for two buttons, and again, it's the same process of just copying and then pasting and then changing, so video_btn, videoClick.
It's going to call this function, called videoClick. Oh, see? I almost mistyped right here. Be really careful that you don't mistype, of course. What you can always do is do a Copy and then Paste, literally, which is usually what I like to do, because it eliminates, or helps eliminate, errors, videoClick. One last time, for the portfolio_btn. I'll just keep that short and call it 'portClick,' but I want to be aware that that's what this function needs to be called, just like that, and then portClick. All right.
I want to be aware that these instance names exist inside of the content movie clip, but let's just go ahead and Check the Syntax. Great! Doesn't contain any errors, but let's go ahead and test this. Do our true test by clicking on, sure enough, our home button, then on the about button, works great, video button works great, and then, of course, the portClick as well. So again, if I just close this and go back to my code, what you're going to want to do is just write event listeners and that's all you need to do in order to make a button work, for the most part.
The great thing about event listeners is you can listen for pretty much anything, whether it's the clicking or rolling over or something, or potentially, even, say, listening for a video to complete, or until it's done playing, or a graphic to load. It's all done with event listeners. So as soon as you get comfortable with writing event listeners, you'll be able to do so much with them. Now, that the buttons are set up, I'm ready to make them navigate to their particular section.
Get unlimited access to all courses for just $25/month.Become a member
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.