Now that you've made a button, it's time to add the button to the movie and add some ActionScript to it. Actions that are added to a keyframe are triggered when that keyframe is reached in the timeline. Actions that are added to a button are activated when an event, specified in the ActionScript added to the button, is triggered. You don't want to add ActionScript to the keyframes inside a button, rather, you want to add it to an instance of the button that has been added to a movie clip or the main timeline. You shouldn't add button instances to graphic symbols or other button symbols, as the button might not work as expected.
-
Choose Edit > Edit Document. Add a new layer, named Menu. Place the Menu layer below the Actions layer, but above all of the other layers .
You should still have zoo22.fla open . Most likely you're still inside the new Visitor Info Button symbol, so go to the main timeline. You can go to the main timeline by choosing Edit > Edit Document or you click the Scene 1 icon.
Right now, you are going to add a button to this new layer, and later you will add a menu to this layer.
-
Insert a keyframe in frame 12 of the Menu layer. With the new keyframe selected, add an instance of the Visitor Info Button to the stage. Use the Property inspector to set the X to 100 and Y to 350 .
You can find the Visitor Info Button symbol in the library. Make sure the correct frame is selected, and then drag an instance of the symbol onto the stage. Use the Property inspector to set the X and Y properties for this instance of the symbol.
-
Add a blank keyframe to frame 13 of the Actions, Bitmap Mask, Bitmap Animation, and Welcome Text layers. Add a frame to frame 13 of all the other layers.
When you add a blank keyframe to frame 13 of the Bitmap Mask, Bitmap Animation, and Welcome Text layers, you ensure that the contents of those layers do not appear in that frame. There's nothing in the Actions layer, but you need to add a keyframe to frame 13 of the Actions layer so you can add a frame label, which you'll do next . Adding frames to frame 13 of all the other layers merely extends the length of those layers' animations, so you'll still see the logo, panda, background, and frame.
-
Select frame 12 of the Actions layer and type home in the Frame label box in the Property inspector. Then select frame 13 of the Actions layer and type blank in the Frame label box in the Property inspector.
When you select a keyframe, you should see one of the settings in the Property inspector is the Frame label. You can add frame labels to identify keyframes in the timeline. Adding a label is useful for targeting frames with ActionScript.
TIP
Keep your frame labels short as they are exported with the movie and can add to the file's size .
After you type the frame label, press Enter or Return to apply it. When you add the frame label to frame 13, a small red flag should appear in the keyframe you had selected. This red flag indicates that the keyframe contains a frame label. The flag may not appear in frame 12 because the a indicating there's ActionScript in that frame is taking up all the space.
TIP
If you'd like to see both the frame label flag and the ActionScript indicator, you can change the view of the timeline. Click the Frame View button in the top-right corner of the timeline, and choose Medium or Large.
If there's enough room between frames containing labels, you'll see the frame labels in the timeline to the right of each red flag. Otherwise you can move the pointer over the frame containing the label, and a Tooltip should appear indicating the label's name .
You can also add frame comments to keyframes. Comments are useful for making notes for you and other. For example, you might want to add a comment indicating which frame should have content added to it. Unlike frame labels, frame comments aren't exported with the movie, so you can make them as long as necessary. To make a frame comment, add two slashes (//) before the text in the Frame label setting. When you add a frame comment to the timeline, two green slashes (//) appear in the timeline before the text in the comment, similar to the red flag for a frame label.
-
Select the instance of the Visitor Info Button in frame 12 of the Menu layer. Double-click the goto action in the Actions panel.
Make sure you have the instance of the Visitor Info Button in frame 12 selectedyou can check the Property inspector to verify the selection. The title of the Actions panel should be Actions Button. This indicates that you have a button instance selected.
When you double-click the goto action, which is in the Movie Control category of the Actions category, Flash adds the following ActionScript to the script pane:
on (release) { gotoAndPlay(1); } The first line of this ActionScript tells Flash to do something on (release) , which means that when the mouse button is pressed and released, everything inside the curly braces ( {} ) should happen. This is known as an event handlerthe contents of the curly braces are triggered when the event, or events, specified in the parentheses occurs. All actions added to button instances must be contained in an event handler. The events that can trigger ActionScript on a button are press , release , releaseOutside , rollOut , rollOver , dragOut , dragOver , keyPress . You can use the keyPress event to trigger actions when a key is pressed.
The next line tells Flash to gotoAndPlay(1); . This line tells Flash to go to frame 1 and play the movie from there. The action portion of this line, gotoAndPlay , tells Flash what to do. The parameters portion, (1) , modifies the actionit provides additional information to Flash so it can perform the gotoAndPlay function. The last part of this line, the semicolon ( ; ) lets Flash know this line of code has ended. You don't need semicolons at the end of the first and last lines in this scriptthe curly braces ({}) suffice.
TIP
If you can't see all the ActionScript listed above in the script pane, try to increase the size of the Actions panel. You should also see a scroll bar on the right side of the Actions panelyou can use the scroll bar to scroll through the script pane.
-
Select the line that says gotoAndPlay(1); . Select the Go to and Stop option in the parameter pane. Set the Type to Frame Label and the Frame to blank.
Your ActionScript should now look like this:
on (release) { gotoAndStop(">blank"); } With only a few simple changes, you modified the ActionScript so that when the mouse button is released, the movie goes to and stops at the frame labeled blank.
The Type can be set to Frame Number, Frame Label, Expression, Next Frame, or Previous Frame. If you set Type to Frame Number, you can only set the value in the Frame setting to a number. In order to achieve the same effect as the ActionScript above, you could set the Type to Frame Number and then set the Frame to 13, but what happens if you need to add more frames to your movie, and frame 13 is no longer frame 13? You would have to go back and change the ActionScriptthis example illustrates the usefulness of frame labels.
The Next Frame and Previous Frame types change the appearance of the ActionScript in the script pane dramatically. Setting the Type to Next Frame changes the ActionScript to nextFrame(); , while setting it to Previous Frame changes it to prevFrame(); . These actions do not require parameters, as they simply tell the timeline to jump to the next or previous frame.
When you set the Type to Frame Label, the Frame setting has a drop-down menu containing all the labeled frames in the timeline, so you can select the necessary frame label from the menu. Or you can type the frame label into the box.
-
Choose Control > Test Movie to test your work. Save the movie as zoo23.fla.
When you test the movie, clicking the Visitor Info button should make the movie jump to the frame labeled blank, and the Bitmap Animation and Welcome Text should disappear.
NOTE
If you have any trouble clicking the button, make sure you added a rectangle to its Hit frame.
When you close the Test Movie window, you can also test the ActionScript added to the button by clicking Control > Enable Simple Buttons. Then when you move the playhead to frame 12 and click the button, the playhead should jump to frame 13. Just be sure to turn off Enable Simple Buttons if you want to use the arrow tool to select a button.
-
Save the movie before you continue and keep it open for the next exercise.
