Problem
You want to create a button.
Solution
Create a new button symbol in the library, and then drag an instance of it onto the stage.
Optionally, use a movie clip symbol.
Discussion
Flash buttons are a convenient way to add user interaction to your movies. In order to use buttons in your movie, you must first create a button symbol in the library. Flash allows you to define up, over, and down states for your button symbols, and it automatically displays them when the user has used the mouse pointer to activate the button states. Then, after you have created the symbol, you can place instances of that symbol on the stage within your movie.
Here are the steps to create a button from scratch:
Create a new symbol. You can accomplish this by choosing Insert  New Symbol from the menu, or by pressing Ctrl-F8 or Command-F8. This step will open up the Create New Symbol dialog box. In the Create New Symbol dialog box, enter a value in the name (exp 3pod.com) field. This name (exp 3pod.com) is what appears in the library next to the symbol to help you to locate it. So use a descriptive name (exp 3pod.com)a name (exp 3pod.com) that indicates what the button is used for or how the button looks. A good example would be something such as SendEmail-Button or BeveledOvalButton. In the Behavior section of the Create New Symbol dialog box, select Button, so that Flash will know to treat the symbol (and its instances) as a button. Button symbols have specialized timelines, so it is important that you select Button as the behavior before you add any content to the timeline. Click the OK button to close the dialog box and finalize the creation of the new symbol. After you have clicked OK, Flash will automatically open the new symbol for editing. You will see a timeline with four specially named frames in itUp, Over, Down, Hit. All buttons have this special timeline. Create artwork in the default layer on the keyframe at the Up frame. You can add artwork using the drawing tools by placing an instance of a movie clip symbol or graphic symbol (but not another button symbol) or by importing an image. This artwork is how the button will look by defaultwhen the user is neither hovering over it with the mouse nor clicking on it. Insert a keyframe and contents at the Over frame. Flash will automatically display this frame when the user moves the mouse over the button. If you want to copy the same contents from the Up frame to the Over frame, select the Over frame in the default layer and choose Insert Keyframe or press F6. This is a convenient way to create an exact copy of the previous frame if you want to modify only some aspect of the up contents (such as changing a fill color). Otherwise, if you want to add completely different content to the Over frame, add a new blank keyframe by selecting the frame and choosing Insert Blank Keyframe or pressing F7. Insert a keyframe and contents at the Down frame. Flash displays this frame when the user clicks on the button. Follow the same instructions from step 7, but apply them to the Down frame instead of the Over frame. At this point, you are done editing the button symbol. (You can read more about using the Hit frame in Recipe 9.3.) You should return to the timeline to which you wish to add an instance of the button. You can return to the main timeline several different ways: Choose Edit Edit Document Choose the scene (by default, Scene 1) from the Edit Scene menu in the Scene toolbar Choose the scene (by default, Scene 1) from the Navigation menu in the Scene toolbar
Open the library either by choosing Window Library or by pressing F11 or Ctrl-L or Command-L. From the library, select the button symbol, and drag an instance of it onto the stage where you want it.
That is all there is to
creating the button. If you test your movie (Control Test Movie) and experiment by moving the mouse over the button and clicking on it, you should see the button change states.
When you create a button, it is not absolutely necessary that you define over and down states. If there are no keyframes defined for either of those states, Flash will simply continue to display the up state when the user mouses over or clicks on the button.
Button symbols have the advantage of built-in state detection (up, over, and down). However, there are certain inherent limitations with buttons. The limitations start to get more apparent as you start to use more ActionScript code. Most notable is that buttons cannot reference themselves via ActionScript code, nor can they be added to the stage with code. Although these issues may seem irrelevant to the beginning Flash developer, they can have rather significant implications with regard to building highly dynamic Flash applications. For that reason, many Flash developers who use a lot of ActionScript code tend to give preference to movie clips over buttons. Movie clips can reference themselves, and it's possible to add movie clip instances to the stage using code. Furthermore, movie clips can respond to the same events as buttons (such as mouse-overs, clicks, and so on). The only disadvantage of movie clips is that they don't have built-in state detection, as do buttons. However, with a little finessing, you can actually create a movie clip that does handle button states. To do so, complete the following steps:
Create a new symbol by pressing Ctrl-F8 or Command-F8. Enter a name (exp 3pod.com), and select Movie Clip as the behavior. When you click OK, the symbol will open in editing mode. rename the default layer to Artwork, and create two more layers named Labels and Actions. Create keyframes for the first three frames of each of the layers. Select the first keyframe of the Actions layer, open the Actions panel (F9), and add the following line of code:
stop();
Add frame labels to the keyframes on the Labels layer. Use the labels of _up, _over, and _down. Add artwork to the keyframes of the Artwork layer. The artwork on the frames should correspond to the up, over, and down states.
After you've created the symbol by completing the preceding steps, you can return to the main timeline and create an instance of the symbol as described in the steps for a button symbol instance. The only difference between how the movie clip instance and button instance will behave is that the movie clip instance requires you to add the appropriate ActionScript code for event handling before it will respond to the up, over, and down states. The button instance will respond with those states even if no event handling code has been applied to it.
At this point, you have successfully created a button or movie clip that responds to mouse events such as rolling over and clicking. It responds by displaying the corresponding button state as you have defined it in the symbol's timeline.
|
