Working With Buttons and Creating Buttons

This lesson will show you how to use the buttons in the Library as well as how to create your own buttons.

1. Open the file you created in a previous exercise, lesson5.fla.

2. Right-click over Frame 1 of the Actions/Labels layer, choose Properties. Delete the Play Action. Add a Stop. Go to Frame 2 of the Actions/Layers layer and create a Keyframe using F6. Right-click over this frame, choose Properties, and set the Label for this frame to Step 2. Make sure there is no Action. This will assure that when the movie loads the user will see the Bird, and we will have a button that will animate the Bird by going to and playing from Frame 2 (now the Step 1 Keyframe).

3. While still on the Actions/Labels layer, go to Frame 9 and insert a Keyframe using F6. Add a Stop. Add Keyframes for Frame 19 and Frame 29.

4. Right-click over Keyframe 19, choose Properties and add a Stop Action. Do the same for Keyframe 29. This will assure that for each step, the animation will play and stop and the end before going on to the next step and the next animation. It also means the movie will not automatically start. We will use some buttons to do all of this.

5. Lock the Graphics and Text layer.

6. Click on the label for the Graphics and Text layer, then click the Add Layer tool to create another layer. Drag it so that is is the third layer. Double-click to change the name to Buttons.

7. For this layer, insert Keyframes at 10, 20, and 20 to coincide with the Keyframes for the other two layers.

8. Click in Keyframe 1 of this layer to select it. Open the Buttons Library and drag the Blue Diamond button to the bottom-right side of the Stage.

9. Make the button smaller. While it is still selected make a copy using the Copy tool on the Tool Bar. Use the Paste command to paste the copy onto the Stage using the Edit, Paste in Place command. Move the copy to the side so that the buttons are side by side at the bottom-right side of the Stage. Create a text box above each. Type Start for the one on the left, and Next for the one on the right.

10. Click the Arrow tool and shift-click to select all these objects and click the Copy tool on the Tool Bar.

11. Paste th copy to Keyframes 10 and 20 using the Edit, Paste in Place command from the Menu Bar. Change the text for the Start box on Frame 10 and Frame 20 to Back.

12. Return to Frame 1 and make sure nothing is selected. Right-click over this button. Select Edit in Place.

13. You now obtain the editor for the button as shown below.

14. This editor shows the four button states: Up, Over, Down, and Hit. Click on the words Up, Over, Down, and Hit to observe the different graphic that is used for each state. A later step will show you how to create your own graphics for each of these states.

The Up state is what normally is visible to the user. The Over state is what the button changes to when the mouse moves over it. The Down state is what is shown when the button is clicked on. The Hit state defines the area where the mouse pointer changes to a hand, allowing the button to be clickable.

15. Click on Scene 1 to return to the Scene.

16. Right-click over the Start button and select Properties. From the Instance Properties dialog box, choose the Actions tab.

17. Click on the Plus sign to add an Action. Choose Go To. Check Label and choose Step 1. Make sure Go to and Play is checked at the bottom of the dialog box. Return to the Scene.

18. Repeat the previous two steps for the Next button and set the Go to and Play Action to the Label named Step 2.

19. Go to Frame 10. Make sure nothing is selected. Use the right-click menu (Properties) to set the Go to and Play Action to the Label named Step 1 for the Back button. Set the Go to and Play Action to the Label named Step 3 for the Next button.

20. Go to Frame 20 and set the Go to and Play Action for the Back button to the Label named Step 2 using the right-click menu. Set the Go to and Play Action for the Next button to the Label named Stop using the right-click menu.

21. Use the Control, Test Movie command to test the buttons and the animations.

You should have wound up on Frame 30 which is currently blank. You will now create a Restart button on this Frame.

1. While on Frame 30 of the Buttons layer, use the Ellipse tool to draw a large ellipse in the middle of your page. Choose a Red Line Color and a Green Gradient Fill Color.

2. Use the Text tool to create a text box. Set the Font to Arial, Bold, 28 with a Red Text Color. Type Restart in the box and center it over the ellipse.

3. Use the Edit, Select All command to select the ellipse, the line around it, and the text box.

4. Use the Insert, Convert to Symbol command to obtain the Symbol Properties dialog box. Name this symbol Restart Button and make sure Button is selected. Click OK to continue.

5. Right-click over this button and choose Edit in Place.

6. Click in each of the Over, Down, and Hit frames and use the F6 key to create Keyframes for each.

7. Click on the word Over to select that Keyframe. Click on the Ink Bottle tool and select a Bright Yellow for Line Color and set the Style to 2.0 and Solid. Click over the edge of the ellipse to change the line around it. This means that there will be a thick bright-yellow line around the button when the mouse moves over it.

8. Click on the word Down to select that Keyframe. Click the Arrow tool, select and highlight the text : Restart in the text box. Change the Text Color to a Light Grey.

9. There is no need to change the graphic for the Hit state unless you want to make the Hit area larger than the actual button.

10. Return to the Scene when done. Use the Control, Enable Button to enable this button. Move the mouse over it to observe the effect.

11. Right-click over this button, choose Properties, and then Actions. Set the Action to Go to and Stop and the destination to the Label named Start.

12. Use the Control, Test Movie command to test the buttons. Make sure that the Restart Button takes you back to the Bird and that the bird does not animate until the Start button is pushed from that Frame.

13. Save this fla file as lesson7. Use the File, Export command to obtain the Export Movie dialog box. Locate a directory where you are storing your files and give this movie a name, ie lessson7.

14. Accept the defaults from the Export Flash Player dialog box. Click OK to conclude the Export process.

The finished Movie should look similar to the one below.

This lesson showed just one of several different ways that you can use the buttons to set up navigation throughout this movie using the Play, Stop, Go to and Play, and Go to and Stop Actions. Experiment with the various options here to see what you can come up with.