TechNote (Archived)

Using Flash to play audio when a button is clicked

This TechNote is the second in a series on adding sound to a Dreamweaver document using a Flash SWF file. For more information about this series, see Using Flash to add sound to a Web page: an introduction (TechNote tn_15660).

This second tutorial shows how to trigger the playing of the SWF file by attaching a JavaScript control behavior to a button or linked text. Example 1 shows several types of buttons that play a sound embedded in a SWF file.

Step 1: Creating the SWF file with an embedded MP3 audio file

1. Launch Flash and open a new file.
2. Import the audio file into the movie by choosing File > Import. To see a sampling of the user interface in Flash, view Example 2.
3. Browse to find and select an MP3 file, then choose Open (Windows) or Add, then Import (Macintosh). This imports the audio file into the Library for the Flash file.
4. In the Timeline, double-click on the first frame. This will activate the Frame Actions panel.
5. In the Frame Actions panel, click the plus (+) button.
6. In the pop-up category list, select Actions > Stop. This will cause Flash to stop on the first frame of the movie instead of playing the audio file automatically when the movie loads in the browser.
7. Close the Frame Actions panel.
8. Click on the second frame in the Timeline.
9. Choose Insert > Keyframe.
10. Launch the Library by choosing Window > Library.
11. Drag the MP3 library item onto the Stage.
    
    Note: The only indication that the MP3 has been added is the dash-like mark (-) in the second keyframe of the Timeline.
12. Choose Modify > Movie.
13. In the Movie Properties dialog box, set the Dimensions to 18 px by 18 px (the smallest possible movie size setting allowed in Flash).
14. Set the Background color as desired. Bear in mind that if this color does not match the background color of the Web page, then the presence of the SWF file will be noticeable.
15. Save the Flash file by choosing File > Save. This will create the original, authoring FLA file.
16. Export the SWF file into your Dreamweaver site folder by choosing File > Export Movie. Make sure the Save as type (Format for Macintosh) is Flash Player (*.swf). Click OK on the Export Flash Player dialog box.

Step 2: Bringing the SWF file into Dreamweaver

1. Launch Dreamweaver and open a file or create a new document. Make sure to save the file before embedding the SWF file.
2. Place the cursor at the insertion point. The Flash movie can be inserted anywhere in the page, including within a table or a layer.
   
   Note: Remember that the Flash movie is still an 18 by 18 pixel square, so place the Flash movie where other content will not be shifted.
   
   Also note: Flash content will appear above other content (such as layers) as explained in Layers appear below other elements on a page (TechNote tn_15126).
3. Insert the SWF file by choosing Insert > Media > Flash.
4. Browse to find and select the SWF file created in the previous section above, then choose Select (Windows) or Open (Macintosh).
5. With the SWF file selected, open the Property inspector (Window> Properties). Name the Flash movie in the Property inspector (see Example 3).
6. The JavaScript "control" behavior can only be applied to any link. A commonly used approach is to create a null link, and attach the behavior to it. Select some text or an image, and typejavascript:; into the Link entry of the property inspector.
7. Select the link.
8. Launch the Behaviors panel by choosing Window > Behaviors.
9. Click the Plus (+) button.
10. Select Control Shockwave or Flash.
11. On the Control Shockwave or Flash dialog box, select the Go to Frame option.
12. Type 2 in the Go to Frame text box.
13. Click OK.
14. Notice the Events column in the Behaviors panel. OnMouseDown will appear as the mouse event which will trigger the playing of the SWF file. It is a good default. Should you want to change it, however, click on the OnMouseDown event for the Control Shockwave or Flash behavior. Then click the downward-pointing arrow to see the list of other mouse events.

Additional Information

---

The third tutorial in this series demonstrates how to trigger the playing of the audio by the passage of time: Using Flash to play audio in a specific frame on a timeline (TechNote tn_15347).

Note: Controlling a Flash movie with JavaScript does not work in all browsers, as described in Not all browsers support JavaScript control of embedded content (TechNote tn_15431).

For more information about working with audio in Flash, see the following Flash TechNotes and articles:

• Flash sound
• Supported audio import formats (TechNote tn_14068)
• Streaming and file optimization techniques for Flash Player

For more information about working with audio in Dreamweaver, see the following Dreamweaver TechNotes and articles:

• Adding sound and video to your Web site
• Troubleshooting the Dreamweaver 2 Control Sound behavior (TechNote tn_14049)
• What can prevent JavaScript control over audio? (TechNote tn_14285)
• Playing a sound completely before opening a page (TechNote tn_12903)

Search Support

---