| The Button symbol is different from the other two major symbols because it has a unique timeline, as you will see, and cannot have ActionScript within this timeline. However, buttons are very important to a Flash document because they provide a quick and easy way to enable the user to interact with your movie. Buttons have four distinct states on their unique timeline, as shown in Figure 5.5: Up When the mouse cursor is not over the button. Over When the mouse cursor is over the button, but the mouse button is not pressed. Down When the user presses the mouse button over the button itself. Hit This is a nonvisual state that enables you to define the area that will activate the buttons other states.
Figure 5.5. The four states of the Button timeline.
Follow these steps to create your first button: 1. | Create a new Flash document and save it as button1.fla. | 2. | On the stage, draw a small square about 100x100 in size with a red fill color (0xff0000). | 3. | Select the square (both stroke and fill) and choose Modify, Convert to Symbol (F8). | 4. | In the Convert to Symbol dialog box, give it the symbol name squareB and choose Button as the behavior. Because this example is not concerned with rotation or resizing of the button, the registration point is not important, so leave it at the default. | 5. | Click OK; now the shape has become a button symbol on the stage. If you tested right now, whenever you moved the mouse over the square, the cursor would turn to a pointing hand. | 6. | Now you want to edit the different states of your button. Select the button on the main stage and choose Edit, Edit Selected (or you can double-click it). | 7. | You should see something similar to Figure 5.5 with the four button states that are unique to the Button symbol. As you can see, the Up state is already done for you, so select the Over frame and choose Insert, Timeline, Keyframe (F6). | 8. | A copy of the Up frame is made, so all you have to do is change the fill color to green (0x00ff00). | 9. | Repeat the preceding step for the Down frame and change its fill color to blue (0x0000ff). | 10. | The final frame is the Hit frame, which defines the area of the button that interacts with the user. It does not have to be the same shape as the other states, but in this case it will be. Select the Hit frame and choose Insert, Timeline, Frame (F5). |
Test again and you will see that as you move the mouse over the button, the color changes to green, and if you click the button, the color changes to blue. TIP One thing you should remember when building buttons with text in them is to never use the text in the Hit state. This will cause unpredictable interactions with the user. Always use a shape for the Hit state. You can also test buttons on the main stage by choosing Control, Enable Simple Buttons (PCCtrl+Alt+B, MacOption+Open Apple+B). The next step, after learning how to create a button, is to learn how to use a button. An Interactive Button Although the button you just created is somewhat interactive with the mouse cursor, true interaction with the user requires some coding. And all code associated with a button must be placed in the object actions of the button, or must reference the button (by its instance name) in a movie clip's timeline (which is discussed in more detail later in this book). For right now, you will add code to the object actions of the button itself. Within the object actions of a button, all ActionScript must fall within one or more of an event like this: on(release){ _root.stop(); } With the preceding code, if the button is pressed at runtime, the root timeline will stop playing. Following is a list of all button events: press When the user clicks down on the button. release When the user releases the mouse click while still hovering over the button itself after the button has been pressed. releaseOutside When the user releases the mouse click while no longer hovering over the button itself after the button has been pressed. rollOver When the user moves the mouse cursor over the button without the mouse being clicked. rollOut When the user moves the mouse cursor off the button without the mouse button being pressed. dragOver When the user moves the mouse cursor over the button with the mouse being clicked. Can occur only after a dragOut event. dragOut When the user moves the mouse cursor off the button with the mouse still being clicked. keyPress "key" When the user presses a defined key that is surrounded by quotes. An example is if you wanted to capture the lower case "a." on(keyPress "a"){ trace("a"); }
Now that you see the basic events for the button, you can add some code to the one you have previously created to see how it interacts. 1. | Continuing from the previous example, select the button on the main timeline and open the Actions panel by going to Window, Actions (F9). | 2. | Put these actions within the panel: on(release){ //fade the button out _alpha -= 5; } |
Now you can test the movie and see that the more you click the button, the more transparent it becomes. Of course, you can put the code that does the fading in any one of the other events of the button as well. So far you have learned how to create a visual button and how to add ActionScript to it for a more interactive button. But sometimes you will want the functionality of a button without the visual aspect of it. This is where the invisible button comes in. Memoirs of an Invisible Button Many times, when you're working with graphics on the web, you might want to make certain sections of a single graphic "hot spots" so that the user can click them for interaction. This is a perfect opportunity for invisible buttons. An invisible button is nothing more than a button with all but the Hit state left empty. It is invisible only at runtime; during authoring it looks like Figure 5.6, a semitransparent turquoise shape. But even though it is invisible at runtime, it will act as a normal button would, including having the capability to place ActionScript within it to increase interactivity. Figure 5.6. The invisible button is invisible only at runtime. You can still work with it in Flash as you would any other button.
Follow this walkthrough to see how to make and use invisible buttons: 1. | Create a new Flash document and save it as invisibleButton.fla. | 2. | Draw a square in the top-left portion of the stage about 50x50 in size. | 3. | Double-click just the stroke of that square and delete it. | 4. | Select the square itself now, and choose Modify, Convert to Symbol (F8). | 5. | Set the symbol name to invisibleB, choose Button as the behavior, and click OK. | 6. | Select the square on the stage and choose Edit, Edit Symbol (Ctrl+E). | 7. | The first frame (Up) should already be selected, but if not, select it. | 8. | Drag this frame to the Hit frame. This should make the previous frames empty, like Figure 5.7. Figure 5.7. Invisible buttons are simple to make because they have content only in the Hit frame.
| 9. | Go back to the main stage and you should see that the square is still there, but it is semitransparent and the color turquoise, like Figure 5.6. | 10. | Select the button and open the Actions panel. | 11. | Place these actions within it: on(release){ //send a message to the output panel trace("I'm invisible"); } |
Test the movie, and when you click the invisible button (after you locate it in the top left), a message is sent to the output panel. Now you have seen a lot of what buttons have to offer. Next up is the final symbol covered in this chapter, the Movie Clip symbol. |