a - buttons

15/11/2010 14:33

 This tutorial will show you how to create a simple button in Flash and how to code the ActionScript to make it direct you to a URL.

First, you need to make a button symbol.

1. Use your rectangle tool to draw a horizontally elongated rectangle.

2. Use the select tool to select the rectangle. Then press F8.

3. The Convert to Symbol box should pop up, and you should choose the Button option.


Image 1
Buttons Tutorial

4. You should now see the button symbol in your library.

5. Double click on the button you just made with the select tool to go into button editing mode. You can tell you're in button editing mode when you see the button name next to "Scene 1" as in the movie clip tutorial, and because the timeline will have changed. Your new timeline will look like this:


Image 2
Buttons Tutorial

The Up frame represents what your button looks like when you are not hoering over it with your mouse or clicking on it. It's when the button is just left alone.

The Over frame represents what your button will look like when someone is hovering over it with their mouse.

The Down frame is what the button looks like when it is being clicked.

The Hit frame is a little different. Whatever you draw in the hit frame is the area that will trigger the mouseover events. So if you leave the hit frame blank, your button will function like a normal button and the over and down events will be triggered when you hover over or click that button. If you make the hit area, say, three inches to the right of the button, then whenever you hover over or click three inches to the right of the button, those events will be triggered - instead of actually being triggered on the button area itself.

We're not going to use the hit frame here, but just so you know what it does! Now on with the steps.

6. Your button should still be selected in the button editing mode. Insert a keyframe (F6, or right click) under the "Over" frame. Then go to your color palette and click on a red color. In the "Over" frame, your button should be colored red.

7. Insert a keyframe in the "Down" frame as well, and click a yellow color.


Image 3
Buttons Tutorial

8. Exit the button editing mode by clicking on the "Scene 1." Press Ctrl + Enter to run your animation. Using your mouse, try hovering over your button and try clicking it.

Now what do you do to ensure that the button actually goes somewhere - to a URL? You have to insert ActionScript.

9. In your main timeline (scene 1), use the select tool and make sure the button is selected.

10. Go to the properties panel - see the box called <Instance Name>. You will need to name your button. Let's write "button1" there.


Image 4
Buttons Tutorial

11. Now, right click on your keyframe in Layer 1 and select "Actions."


Image 5
Buttons Tutorial

12. A space will pop up where you can write. Insert this text in, and then close the Action frame.

button1.addEventListener(MouseEvent.CLICK, click1);
function click1(event:MouseEvent):void 
navigateToURL(new URLRequest("URL"), "_self");

The bolded text is what you can change now. button1 is the name of your button. click1 is the function that happens when you click that button. If you have button2, you can write click2 there instead, or name it something else entirely. The URL is the URL you want the button to go to. _self means that the URL won't be opened in a new window. If you want a new window to pop up, you can write _blank instead.

There's your buttons basic! Have fun.