Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
To create a button symbol in Flash, you can pretty much start out with any artwork you would like. On the Stage here I have a graphic symbol, but of course you can start out with just text, a bitmap image, or just a symbol of vector shape. I'll select my object on the Stage and then go to Modify > Convert to Symbol. For the Name I'll type Button 1 and for the Type I'll choose Button and I'll click OK. Now when I have the instance selected, you can see that I have an instance of Button 1. And if I double-click the button, I'll enter its timeline. So we have the Up, Over, Down and Hit frames.
For simplicity's sake, I have already built the states for this button, but you can add any artwork you would like. I'll create keyframes at the Over, Down and Hit frames. For the Over and Down keyframes, I'll press F6, but for the Hit keyframe I am going to press F7. We will draw the Hit state later on in this movie. So let's go to the Over frame and I am going to swap this instance out with another one. So I'll select the instance on the Stage and click this Swap button in the Properties panel. I'll swap it out with btn1Over. Then I'll go to the Down button and repeat the process.
I'll select the instance on the Stage, click the Swap button, choose btn1Down and make the change. Now for the Hit state, I am going to use the Rectangle tool, and I am going to remove this stroke. I am doing that because with a Hit state, a stroke is not counted anyway. So I'll use a bright color that I am not using anywhere else in my application. And then I am going to draw a rectangle. But what's important to me is that I draw a rectangle around the actual space of the button, and right now I can't see the button on the Stage.
To get a preview of what the button looks like so I can get the size right when I am drawing the Hit state, I am going to turn on Onion Skin. So I'll click the Onion Skin button at the bottom of the timeline. I'll drag the markers so that I only see the Down state. If that yellow color for you is hard to see, you can expand the markers to cover all the states of the button. Then click and drag on the Stage to draw a rectangle that covers all the artwork for the button. Now I'll turn off Onion Skin and test the movie in the Flash Player. So here is my button, and when I roll over anywhere that's included in the Hit state, the Button will be activated.
So I see my Over state, when I hold my mouse down, I'll see the Down state, when I release the mouse button, I'll see the Over state again and when I roll out, I'll see the Up state. So to recap, you can create a button just like any other symbol. Just choose Button in the Symbol Type. Then you can define the different states of the buttons in Symbol Editing mode.
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.