TechNote (Archived)

Using Flash to add background music to a Web page

This TechNote is the first 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).

In this first tutorial, the SWF file will play as background music as soon as the page loads. You can view and hear a sample end result of this tutorial in Example 1.

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

Note: the instructions below are written for Flash 5 but are still valid for later versions. In some situations, menu commands may differ slightly from the instructions.

Launch Flash and open a new file.
Import the audio file into the movie by choosing File > Import.
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.
Launch the Library by choosing Window > Library.
Drag the MP3 library item onto the stage.

Note:The only indication the MP3 has been added is the dash-like (-) mark in the first keyframe of the movie. By default, the sound object's sync property is set to Event. Leave it at the default.
Choose Modify > Movie. The Movie Properties dialog box appears.
Set the Dimensions to 18 px by 18 px (the smallest possible movie size setting allowed in Flash).
Set the Background color as desired. Bear in mind that if this color does not match the background color of the web page it will be inserted into, then the presence of the movie will be noticeable.
Save the Flash file by choosing File > Save. This will save the original FLA file (which is still editable).
Export the SWF file into your Dreamweaver site folder by choosing File > Export Movie. Make sure the Save as type is Flash Player (*.swf). Click OK on the Export Flash Player dialog box.

Note: Only the SWF file will be inserted into the Dreamweaver document.

Step 2: Bringing the SWF file into Dreamweaver

Launch Dreamweaver and open an existing document or create a new one. Make sure to save the page before embedding the SWF file.
Place the cursor at the insertion point. The SWF file can be inserted anywhere in the page, including within a table or a layer.

Note: Remember that the Flash movie is still an 18 x18 pixel square, so place the Flash movie where other content will not be shifted.
Insert the Flash movie by choosing Insert > Media > Flash.
Browse to find and select the SWF file created in the previous section above, then choose Select (Windows) or Open (Macintosh).
With the SWF file selected, launch the Property inspector (Window > Properties).
To make the audio begin playing automatically when the page loads in a browser, select the Autoplay option.
To make the audio loop indefinitely while the page is open in a browser, select the Loop option.

Additional Information

The other two tutorials in this series focus on adding JavaScript control to the embedded SWF file. Using Flash to play audio when a button is clicked (TechNote tn_15346) shows how to add JavaScript control to a button. In Using Flash to play audio in a specific frame on a timeline (TechNote 15347) you'll learn how to delay the start of the sound by placing the SWF file on a timeline.

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 section on using sound in the Using Flash documentation. For more information about working with audio in Dreamweaver, see the section on adding audio in the Using Dreamweaver documentation.