Working with Buttons in Flash CS5

In this tutorial you will create a button that has 3 different states and a "behavior" that will link the button to an external web site.  When complete place the button symbol in the Lower Right area of your scene. Let's start, retrieve BOAT5.FLA from your H: drive. 

Step One: Choose Edit > Deselect All to ensure that nothing is selected on the Stage. Create a new symbol (CTRL+F8), but make sure to select the Button type. Name the button `myButton`.

Step Two: Notice how this symbol editor is different? It has only four frames in the timeline:

Up, Over, Down, and Hit. Here's what each means:

Up: This is the natural state of the button before anybody has moved their mouse over it.

Over: This is the MouseOver state.

Down: This is what you seen when you press DOWN on the button.

Hit: This is kind of strange. Normally you won't use this because it defines the region that makes the button go active. Normally, the shape defined in the Up frame does this. Here's an example of how you would use this. If you wanted to make a text only button, you'd have the problem that the user would have to pass their mouse over the actual shape of the letters to click on it. If you create a filled rectangle in here the shape of the text region the user won't see it, but they'll be able to click anywhere on it's region.  

Other options: You can use a graphic or movie clip symbol in a button, but you cannot use another button in a button. Use a movie clip symbol if you want the button to be animated.

Step Two: OK, let's create a simple circle in the Up frame using the Oval tool. Set your fill color to yellow and your stroke color to none before you draw the circle.

Notice how the + sign (the origin piont of the symbol) is off-center? Let's align it. First, double click to select the graphic. It should look like this

Now, open up the align tool by pressing ctrl-k (or choose Align from the Modify Menu ). You'll get the align pallet. Click on the little icon below To Stage; (this will center the button exactly) then click the center icons.

Step Three: Design a simple face (eyes and mouth) using the Brush Tool . This will make up the "up" state of our button. The size of the brush can be selected using the Brush Size icon at the bottom of the tools panel.

Step Four: Now, add a KEYFRAME to the Over frame (press F6) then change your face a bit. Finally, add another KEYFRAME to the Down frame (press F6) and make another one. OK, your button is ready to be used.

Over Frame	Down Frame

Step Five: Return to the original scene in your movie by selecting Scene 1 in the upper left corner of the screen (remember you new button will be saved in the  movie Library F11). Create a New Layer , and name the layer Button. 

Step Six: Press F11 (Library) and drag the Button onto the new layer in the Lower Right area of the Stage. 

Step Seven: Now, select the button using the selection tool , and in the Properties Panel at the right side of the screen give the button an instance name, call it `button1`.

Step Eight: To see your button work, select Enable Simple Buttons under the Control menu.

Step Nine: See how it works. Pass your mouse over it.

Now, click on it

Step Ten: A button is pretty cool in and of itself. But, in order to really use it, we need to attach an Action. You cannot move or change a button as long as Enable Simple Buttons is selected. So, uncheck this from the Control menu. 

Step Eleven: Click on Frame 1 in the timeline on the Button, then hit F9 to open the Actions Panel. Click the Script Assist button once to deselect it and type the following code into the actions panel exactly as it`s shown.

Copy and past the following ActionScript 3 code (below in blue) into the Actions window in Flash:

button1.addEventListener(MouseEvent.CLICK,myButtonFunction);

function myButtonFunction(event: MouseEvent) {
var request:URLRequest=new URLRequest("http://www.jcarron.com");
navigateToURL(request);
}

Finally, fill out the URL box appropriately.  NOTE: Make SURE you always include "http://" .  Create a link to and internet site you want.

Step Twelve: To see this button work, we need to preview it in a browser. So, click on Publish Preview under the File menu. Select "HTML" from the fly-out menu.  Then try out your new button.  Save this as BOAT6.fla

Back to home