Adding Buttons, Actions, and Sounds

New Perspectives on Macromedia Flash 8, ComprehensiveTutorial 5

Tutorial 5

Adding Buttons, Actions, and Sounds

At A Glance

Adding Buttons, Actions, and Sounds

Creating Buttons

Quick Quiz

Understanding Actions

Quick Quiz

Adding Sounds

Quick Quiz

Classroom Activity

Key Terms

Discussion Questions

Adding Buttons, Actions, and Sounds

In this tutorial, students learn how to create buttons that are used to make Flash files interactive. They use predefined buttons and also create new buttons. Students will learn how to make buttons with rollover effects and they will see how to add actions to the buttons so that they can be used to control the animation.They will also learn how to add sound effects to buttons and how to add a background sound to the movie.

Creating Buttons

Start by reminding students about the symbols they learned to create in the previous tutorial. Review the three types of behavior that symbols can have. These are Movie Clips, Buttons, and Graphics. In this section they will be working with Button symbols. Remind students that symbols have their own Timeline, which only contains four frames. Each frame has a special purpose as discussed on page 217. Refer to Figure 5-2 to discuss sample button states for each frame.

Point out that not all frames need to have some content. A button that does not have a rollover effect only needs content in the Up frame. If a rollover effect is desired then the Over frame must contain some content that is different from the Up frame. A rollover effect occurs when the content on the Over frame is different from the content in the Up frame. When the user places the mouse pointer over the button, the content in the Over frame displays. A key point to emphasize to students is that in order to place some content into a frame they must first make it a keyframe.

You may want to elaborate on the purpose of the Hit frame since this can sometimes be a little harder for students to understand. Consider using an example like the one below where the button consists of text only. The Hit frame contains a rectangle that represents the active area of the button. This makes it easier for the user to click the button without having to click precisely on one of the letters.

Adding buttons to a document is made easier with the predefined buttons found in the Buttons library which is one of the Common Libraries that come with Flash.In the steps that start on page 218 students add one of the predefined buttons to the petshop2.fla document. Be sure to point out the folder icon seen in the Buttons library.Explain that symbols in the Library panel can be organized inside of folders. Also, point out that when you drag a Button symbol from the Buttons library to the Stage, the button symbol is automatically added to the document’s library. In these steps students add the playback-stop button from the Playback folder. Students may want to use a different button. If they do, tell them that some buttons have additional components. These components will automatically be added to the document’s library. Also, be sure to review the use of the options menu for the Library panel on page 219 (step 8). They use the options menu to close the Buttons Library.

Figure 5-4 shows the playback-stop button in the document’s Library panel. On page 220, the students see the button’s behavior by using the Enable Simple Buttons command from the Control menu. Tell students to be sure and deselect the button before testing its behavior. If the button is selected, it may be difficult to see its behavior when it is clicked.

Refer to Figure 5-5 to review the layers and frames of the playback-stop button. Students change the color of the small inner square in the Down frame. This color will display when the button is clicked.

Remind students to turn off the Enable Simple Buttons command as instructed in step 6 of page 222. Otherwise, they will not be able to select the button on the Stage.

Students are then instructed to add a text block above the button. See Figure 5-7. Point out that this text block is not part of the button.

Students also learn how to create buttons from scratch starting on page 223, in a section titled “Creating a Button”. Explain to students that they can convert a graphic on the Stage into a button or they can create a new Button symbol and then add instances of it on the Stage. The buttons they create will also have the four-frame Timeline just like the button they used from the Buttons library. In this case they need to create the content for the four frames.

For the steps that start on page 224, students create a new button by first drawing a rectangle on the Stage. This rectangle has rounded corners and should be drawn right next to the Mute button. Once they draw the rectangle students convert it into a symbol and assign the Button behavior to it. The button is then opened in symbol-editing mode. Students add text to the button in the Up frame and then they add a keyframe in the Over frame and modify the content. Remind students that when a keyframe is added, the content from the previous frame is automatically copied to the new keyframe. So when a keyframe is added in the Over frame, the contents of the Up frame are copied to the Over frame. All the students have to do is to change the color of the button’s fill to make it different from the fill’s color in the Up frame. Then on page 228, students are asked to add a keyframe to the Down frame and to modify the position of the button. They use the arrow keys on the keyboard to move the position of the button down and to the right three pixels. This will make the button appear to be pressed when it is clicked.

Once they have tested the Stop button and verified that the rollover effects work, students are asked to make a duplicate of the button symbol. This duplicate will be used to make a Play button by changing the duplicate’s text to Play instead of Stop. The fill color of the new button is also changed so that it is green instead of red. Once the duplicate button is modified an instance of it is added to the Stage as shown in Figure 5-16.

With three buttons now added to the Stage, the students get to use the Align panel to properly align the buttons. Refer to the table of Figure 5-17 to review the Align panel’s options. All three buttons should be selected at the same time as shown in Figure 5-18 and then the Align Bottom Edge and Space Evenly Horizontally options are applied.

Quick Quiz

1. To create a button from scratch, you first open the Flash Buttons library. True/False? (Answer: False)
2. A button has a four-frame Timeline. The frame used to create a rollover effect is the ______frame. (Answer: Over)
3. To test a button within the Flash program window, click the ______command in the Control menu. (Answer: c)
4. Enable Simple Actions
5. Enable Simple Frame Actions
6. Enable Simple Buttons
7. Enable Button Actions

Understanding Actions

This section covers actions, which provide the instructions that make a Flash movie interactive. The buttons created in the previous section do not control anything until actions are added to them. Besides adding actions to buttons they can also be added to frames. Examples of both types of actions are discussed.

The Flash programming language, ActionScript, is mentioned in this section to make the point that actions are instructions that tell the computer what to do just like instructions in other programming languages. However, emphasize to the students that they do not need to learn how to write a computer program to use Flash actions. Instead, Flash contains many actions that can be easily added to buttons and frames. Flash adds the script or code needed without them having to write any code. Also mention that ActionScript is a very powerful programming language that is used to create complex animations and Web sites. ActionScript is covered in detail in a later tutorial.

Figure 5-20 introduces the Actionspanel which is used to add actions to buttons and frames. When you add an action, Flash creates the script needed for that action to work in your document. Be sure to have students review the example of a script in Figure 5-19.

In the steps that start on page 238, students add the stop action to the Stop button and the play action to the Play button. Be sure to point out that actions added to buttons must be added to the button instances on the Stage and not to the button symbol in the library. Once actions are added to the buttons, the students are asked to test them to make sure that they work correctly.

Another type of action is a frame action which is added to frames as opposed to buttons. Point out to students that frame actions do not have event handlers. Instead, frame actions are played when the frame is played. Refer to Figure 5-22 which shows a sample action added to a frame. Point out that the action is in a separate layer and is denoted by a small “a” in the frame. Emphasize the use of a separate layer for actions. This makes it easier to keep track of the actions in a document and additional layers do not add to the overall size of the final document. Figure 5-22 also shows an example of a loop where a group of frames is played repeatedly.

When working with frame actions, it is often necessary to refer to a specific frame. Students are encouraged to use frame labels when referring to frames instead of frame numbers. This prevents errors when a document gets more complex. Also, encourage students to place the frame labels in a separate layer. This makes it easier to find the labels. Also, explain to students that frame labels are added in the Frame textbox in the Property inspector as shown in Figure 5-25.

Another important point to make is that frame actions and frame labels can only be added to keyframes. Students often click a frame and then try to add an action or label to it only to realize that the action or label is added to an earlier frame. Tell them to make sure they add a keyframe first and then the action or label.

In the steps starting on page 242, students are asked to add an action to a frame. Figure 5-26 shows the added frame action. On page 243, students are instructed to test the frame action by using the Test Movie command.

Quick Quiz

1. Events can be used to trigger the execution of an action in a script. True/False? (Answer: True)
2. A(n) ______is a set of one or more actions that perform some function.(Answer: script)
3. ______are actions with prewritten ActionScript scripts that assign controls and transitions to an object on the Stage.(Answer: a)

1. Behaviors
2. Parameters
3. Event handlers
4. Events

Adding Sounds

This section explains how sounds can be added to Flash documents. The first part discusses the two types of sounds used in Flash, which are Event and Stream sounds. Be sure to explain the difference between these two types and point out that most of the sounds used in this tutorial will be event sounds.

Explain to students that sounds cannot be created within Flash. Instead they need to be imported into Flash from other sources. Figure 5-27 shows an example of a Web site that has sounds that can be downloaded and then imported into Flash. Flash Kit is an excellent resource for Flash developers and students can choose from a variety of sound effects and sound loops. These sounds can be previewed,as shown below, and then easily downloaded for use in their Flash movies.

Encourage students to explore the Flash Kit Web site as well as the other sites mentioned in the tutorial to find sounds. Remind them, however, about the licensing issues discussed in this section before they publish Flash movies with sounds they download.

Review the types of sounds that Flash will accept. These include WAV, AIFF, and MP3 formats. Mention that MP3 is an excellent type to use with Flash movies because of their excellent quality and small size.

Once sounds are imported into a Flash document, they reside in the document’s library as shown below.A sound is previewed in the Library panel as a waveform as shown in Figure 5-28 (and below). Show students how they can play a sound by clicking the controls in the preview section of the Library panel. Point out that a sound is stored in the library just like symbols. Also, multiple instances of a sound can be used in the document yet the sound is only stored once.

Also point out to students that the sounds you add to the document’s library are also available from the Property inspector as shown below. To add a sound to a frame, you can either select the frame and drag the sound from the library to the Stage or you can select the frame and then select the sound from the Property inspector.

The steps that start on page 247 instruct the students to add a sound effect to the Stop button. In order to get the sound to play when the button is clicked, they add the sound to the Down frame in the button’s Timeline.

Once a sound is added to the document, some sound effects can be added using the Property inspector as shown in Figures 5-31 and 5-32. For example, a sound can be made to fade in as it plays.

Other options you can set in the Property inspector are discussed on page 250. Review these options, especially the purpose of the Start and Stop sync settings.Explain how event sounds will play in their entirety once they are started. You can use the Stop sync setting to prevent a sound from playing more than once at the same time.

The steps starting on page 250 instruct the student to add a background sound to the banner. Point out the sound’s waveform in the Timeline once it is added as shown in Figure 5-33. Tell students to make sure that they place the sound in the document in a separate layer. This makes it easier to work with the sound.

Finally, to complete the banner, the students are instructed to add an action to the Mute button. They add the stopAllSounds action, which will cause any sound that is playing to stop. This completes the banner.

Quick Quiz

1. Sounds to be used in Flash must first be imported into the document’s library. True/False? (answer: True)
2. When you add a sound to a document, it resides in the document’s ______. (Answer: library)
3. Which of the following file formats is not a type of sound file format Flash can use? (Answer: d)

1. AIFF
2. WAV
3. MP3
4. SWF

Key Terms

Term / Definition
Interactive / A Flash movie over which the user has some level of control such as being able to stop or play its animation.
Up frame / The frame that contains a button’s default state.
Over frame / When the pointer is over a button, the content in the Over frame is displayed.
Rollover effect / A behavior exhibited by a button where the button content changes when a user rolls the mouse pointer over it.
Down frame / The frame that shows what a button looks like when you click it.
Hit frame / The frame which represents the clickable or active area of a button.
Buttons / Symbols that contain a Timeline with only four-frames. Each frame represents a different state of the button and may contain different content.
Actions / Pre-coded instructions that are used to control how a movie plays. Actions may be added using the Behaviors panel.
ActionScript / Flash’s programming language used to create actions.
JavaScript / Web language used to add interactive elements to Web pages.
Script / A set of one or more actions that perform some function.
Event / Occurs when the user interacts with a button such as clicking a button with the mouse and then releasing it.
Behaviors / Pre-written ActionScript scripts which are used to add interactivity to a document without having to write ActionScript.
Event handler / Used within a script to tell Flash how to handle an event.
Script Assist mode / The mode in which Flash provides actions you select from the Actions toolbox, located on the left side of the Actions panel.
Parameters / Additional settings required by some actions.
Loop / Occurs in an animation where a group of frames is played repeatedly by having the playhead go back to an earlier frame.
Event sounds / Sounds that will not play until the entire sound has downloaded completely. Event sounds are added to keyframes so that the sound plays each time the keyframe is played.Event sounds are not synchronized with the Timeline.
Stream sounds / Sounds that are synchronized with the Timeline and begin playing as soon as enough data has downloaded.
Royalty-free / Applies to sounds that you add to a Flash movie which require no additional usage fees when distributed with your projects.
Waveform / A graphical representation of a sound.

Page 1 of 8