Play Sound With Flash

playsoundflash100x100In this tutorial you will learn how to import and play a sound file with Flash. You can stop or start playing it via buttons!

 

 

First let’s have a look of what we will create:

 

 

Before getting started, we need some resources to work with:

+ Background (450×299):

playsound_background

 

+ Music file (just a demo, you should use a MP3 file): download here

+ Play & stop button:

playsound_start    playsound_stop.png

Download them to your hard driver or use your own for this tutorial

 

Step 1: Create a new document and press Ctrl-J to open the Document Properties dialog and set your document’s dimensions to 450px width and 299px height to fit with our background

 

playsoundflash1

Step 2: Import all the resources above to the Library by going to File>Import>Import from Library and select your files to import to the library

playsoundflash2

(Press Ctrl-L to open your Library panel if it is not on your document)

 

Step 3: Right click on your sound file in the Library panel and select Linkage to open up the Linkage Properties. Tick on the “Export for ActionScript” check box and type “mySound” in the Identifier textbox. Later you will use a variable to link to this file via its Identifier

 

Drag the background picture and place it on your document, name this layer “Background”.  Go to Insert>New Symbol(Ctrl-F8) to create a new symbol, in this case a “play” button, so click on the Button type and name it “On Button”

 playsoundflash4

Step 4: Drag the Play button image from the Library to place it on the center of the workspace

playsoundflash5

Step 5: Select Over, Down and Hit events of this button and press F6 to insert keyframes for each of them. If you don’t do this step, your button will not show up when playing

playsoundflash6

Step 6: Create another button (Insert>Symbol>New Symbol) but this time name it “Off Button”. Drag its image from the Library and place it on the workspace then select Over, Down, Hit events and press F6 to insert keyframes like you did as previous steps

playsoundflash7

Step 7: Now turn back to your main scene (Scene 1). Create a new layer, name it “On Button” layer and drag your “On Button” button from the Library and place it on this layer. Do not mistake your “On Button” button for your “On Button” image (playsound_star.png)

playsoundflash8

Step 8: Repeat step 7 with “Off Button”. You should place them on separate layers for later modification if necessary

playsoundflash9

Step 9: Create a new layer and name it “action”. It is the place where we put our initial settings. Click on frame 1 of this layer and press F9 to open up the ActionScript tab. Type in as following:

playsoundflash10

 

var sndMusic = new Sound();

sndMusic.attachSound(“mySound”);

sndMusic.start();

The first line declares a variable, sndMusic, which belongs to class Sound. The second line attachs this variable to our sound file by using its Identifier. The last line will trigger our sound file when our program is first launched. Now you can pressCtrl-Enter to understand how it works but notice that our buttons still don’t work

Step 10:  Next we will make our buttons work by adding some code for them. Click on your Play button in the workspace to select it (please don’t click on frame 1 of the “On Button” layer, it’s totally wrong!), open your ActionScript tab and type in:

playsoundflash11

on (release)
{
sndMusic.start();
}

 

The first line identifies that this script will be run when your button is released after being pressed down and it will run our sound file with the  “sndMusic.start()” command

Step 11: Click on your “Stop button” and place these code on it (not on frame 1!)

playsoundflash12

 on (release)
{
sndMusic.stop();
}

It’s all! Press Ctrl-Enter to see your result now!