Flash Buttons Lesson 5

NOTE: Before reading this article make sure that you have read Part 1, Part 2, Part 3, and Part 4. Topics are talked about that were mentioned in previous chapters.

Buttons are symbols that allow you to control your movies or navigate to sites. There are more uses for Buttons, but for now we will concentrate on these two features.

For this exercise you will be using Action Script 2. Create a new file and click a new AS2 file.

Getting Started

Begin by drawing a blue square.

Image

Select your square with the Selection Tool.

Image

While selected hit F8 on the Keyboard to convert it into a symbol. You will make this into a Graphic.

Image

You should now have a Graphic in your library.

Image

Next draw another square on Stage.

Image

Select your square with the Selection Tool and hit F8 on the Keyboard.

Image

Turn this square into a MovieClip.

Image

You should now have a Graphic and a Movie Clip in your Library.

Image

Next draw another square on Stage.

Image

Use the Selection Tool to select your square.

Image

While your square is still selected hit F8 on your Keyboard. This time you will convert your square into a Button.

Image

Now you should have a Graphic, MovieClip, and now a Button in your Library.

Image

Double Click your Button you created so we can modify if further. As you see once inside you have a few frames with Labels. UP, OVER, DOWN, and HIT. These are the states that your Button will have.

Think of the UP frame as the Default of what the Button will be. Normally UP is whatever your Shape is.

Image

Next is the OVER state. This is used to change the color of your button when you move your mouse over it. Click on the OVER frame and hit F6 to insert a new Keyframe.

Image

Change the color of the green square to a lighter shade of green.

Image

The next state is the DOWN state. This is the color of the button when the button is clicked.

Image

The next state is the HIT state. The size of the shape here determines your hit area for your button. You must have a hit area of some kind. This shape does not necessarily have to be the same size as your button.

Image

Now that you have finished adding the different states to your Button go to the main timeline. Now just because it’s finished doesn’t mean you are done. You need to tell your button what to do. To do this you need to do a bit of Coding. Don’t worry it’s nothing complicated.

Image

Hit F9 on your keyboard to bring up the Actions Property. Click your Button you just created on stage and copy this link. Now obviously you put in your link to where you want to go for this example I used my site.

Image

Now that you have added your link, try out the button below.

See how easy that was to create a link. Now there are better ways of creating buttons for links which will be explained in other lessons.

For this next example I will show how to navigate through a flash file. We will continue to use the same Button we just created, just erase the code for the link above. This example will show how to manually change frames with the click of a button.

Add 5 Keyframes as shown below.

Image

Next add a New Layer and create 5 New Keyframes like before. On each new frame of the new layer number them 1-5 as shown below. For the first frame add number 1. Remember to add text use the Text Tool.

Image

On frame 2 and the number 2.

Image

On frame 3 and the number 3.

Image

Do the same for frames 4 and 5.

Now move the Playhead to Frame 1. Click on the button in Frame 1 and click F9 to bring up Actions. This is where you will add the code to make the button navigate where we want.

Image

Make sure that you have your button selected in the first frame and hit F9 to bring up the Actions. Copy this code in to the Actions. What this code is saying is very simple. When a user clicks on this button on Frame 1 we want it to go to Frame 2. So you write on release – which means when the user clicks and releases the mouse. Next you are telling your button what to do when you release the mouse. In this case we want to go to frame 2. So write gotoAndPlay ( 2 ). The number in parenthesis is the frame you want to navigate to.

Image

Next go to frame 2, click on your button and hit F9.

Image

Copy this code to your button. This will navigate to frame 3.

Image

Do the same for frame 3, 4, and 5, however, on frame 5 you want to tell it to go to frame 1. So that it will repeat for this example.

Now that you have added the code for all your buttons publish your file by hitting Ctrl + Enter on the Keyboard.

You will notice that your published version is cycling through the frames. This is because Flash plays your movie unless you specify for it not to.

Create a New Layer and on that layer create separate Keyframes as we did earlier. On Frame 1 hit F9 to open the Actions.

Image

We want the movie to stop so we can use our buttons. So copy this into the Actions.

Image

Put a stop on all Keyframes for Layer 3. You will know if all your Keyframes have code on them by the little “a” that appears on the frames. ( See Below )

Image

Now your Button is complete and you can now test your file. If everything went well your file should cycle through frames 1-5 when you click the button.

These features are easy ways of adding simple navigation and interactivity to your movies. I hope these basic tutorials have taught you a bit more then you knew about Flash to begin with.

Keep an eye out for more Tutorials in the future.

Leave a Reply