Category Archives: Flash Audio Tutorials

Flash Audio: Creating a Sound On/Off Button

This tutorial will teach you how to create a Sound On / Off button for the music loop you have just added in the first flash tutorial.
This tutorial is built on top of the the tutorial ‘How To Import And Add Sound To A Movie‘ that deals with the basics of importing sounds to Flash. This means that this tutorial assumes that you have a sound loop imported into the library of your movie. With the music loop in your library we can start building a button.

Go to Insert -> New Symbol or press Ctrl + F8 (Image 1).

on off audio button in flash

Ok, now the dialog box titled ‘Create New Symbol’ appears. Type in the name box ‘SoundOnOffButton’ for type select ‘Button’ and click ‘Ok’. Before clicking the Ok button, you button should look similar to image 2.

sound on off button in flash project

The button appears in the library and you should be now in the editing mode of the button. Take a look at the image 3 so will know what I’m talking about.

sound on off button in flash

Rename the layer to ‘Speaker Graphic’. As you can suggest, the layer  will display a graphic with a simple speaker. I used the line tool to draw something like this on the image 4. It’s not fancy, I know, but you get the idea.

sound on off button in flash audio project

With this button, you can go to the main timeline by clicking on the back button above the timeline of the button (Image 5).

sound on off button in flash audio project

On the main timeline add an additional layer ‘Actions’. Now you should have two layers in the main timeline. The upper one renamed ‘Actions’ and the layer below renamed to ‘Content’. Select the first frame of the layer ‘Content’ and drag the SoundOnOffButton from the library somewhere on the stage. In my sample I placed it on the upper right corner of the Stage (Image 6). When placed on the stage, in the Properties panel, give it an instance name of ‘sound_btn’. To do this, keep the button selected on the stage, open the properties panel (Window -> Properites) and type ‘sound_btn’ in the left text box where it says ‘<Instance Name>’. See image 6.

audio loops in flash on off button

The next step you should do is to add a linkage name to your imported sound loop. To do this, open up the library, right click the sound file in select ‘Linkage…’ (Image 7).

soud on off button in flash

The ‘Linkage Properties’ dialog box appears. Check the option ‘Export for ActionScript’ and in the ‘Identifier’ text box, type in ‘myTrack’. Make sure the dialog box looks similar to image 8 and then click Ok.

sound on off button in flash how to

Now select the first frame of the layer Actions and open up the Actions layer (press F9). Type in (or paste) the following lines of code code:

var mySound:Sound = new Sound();
mySound.attachSound("myTrack");
mySound.start();
var soundStarted:Boolean = true;
sound_btn.onRelease = function() {
    soundStarted = !soundStarted;
    if (soundStarted) {
        this._alpha = 100;
        mySound.start();
    } else {
        this._alpha = 30;
        mySound.stop();
    }
};

Flash Audio: Pausing Sounds in Flash

This tutorial will show you how to create a pause button for the music loops you have added in the first tutorial.
This tutorial is built on top of the the tutorial ‘Creating a Sound On/Off Buttons’. You should complete the tutorial successfuly. Click here to open the tutorial. When you complete it you can come back here. Open the library from this tutorial and double click the button in library. Rename the button the ‘PauseSoundButton’ (Image 1).

creating a pause button for ausio in flash

Right click on the button and click ‘Edit…’. Remove the speaker graphic and add a simple text like ‘Pause Sound’ (Image 2).

creating a pause button for audio in flash

It’s noting spectacular as you can see, but up to you how you create your graphics. You can add what you want into the button.

As left from the previous tutorial, the button should be placed in the upper  right corner. Now click on the first frame of the ‘Actions’ layer, press F9 to open up the Actions panel. Remove the code from the previous tutorial and add the following code:

var mySound:Sound = new Sound();
mySound.attachSound("myTrack");
mySound.start();
var soundStarted:Boolean = true;
var lastPosition:Number = 0;
sound_btn.onRelease = function() {
    soundStarted = !soundStarted;
    if (soundStarted) {
        this._alpha = 100;
        mySound.start(lastPosition);
        //mySound.
    } else {
        this._alpha = 30;
        mySound.stop();
        lastPosition = Math.floor(mySound.position / 1000);
    }
};

That’s it! You have a functional pause button!

Flash Audio: Sound Fade In / Fade Out

Assuming you have successfully completed the previous tutorials I expect that I do not have to show you how to create buttons, import sounds, add graphics to sounds etc. In this tutorial we need to concetrate on the ActionScript that fades in/out the played sound.

Follow these steps to do this:

1.    Import a sound loop to you Flash Movie
2.    Give it a linkage ID ‘myTrack’
3.    Create to buttons. One with a plus sign inside and the other one with a minus sign inside. Place the on the stage like on the image 1.

Flash tutorial

4.    The plus button should have the instance name ‘fadeIn_btn’, the minus button ‘fadeOut_btn’.

The button should be placed on the layer ‘Content’. Above this layer, create a layer called ‘Actions’, select the first frame and open the Actions Panel (press F9). Paste the following code:

var mySound:Sound = new Sound();
mySound.attachSound("myTrack");
mySound.start();
var soundStarted:Boolean = true;
var lastPosition:Number = 0;
var id:Number;
fadeIn_btn.onRelease = fadeInSound;
function fadeInSound():Void {
    if (id) {
        clearInterval(id);
    }
    mySound.start(lastPosition);
    var volume = mySound.getVolume();
    id = setInterval(fadeIn, 10);
    function fadeIn():Void {
        mySound.setVolume(volume++);
        if (volume>=100) {
            clearInterval(id);
        }
    }
}
fadeOut_btn.onRelease = fadeOutSound;
function fadeOutSound():Void {
    if (id) {
        clearInterval(id);
    }
    var volume = mySound.getVolume();
    id = setInterval(fadeOut, 10);
    function fadeOut():Void {
        mySound.setVolume(volume–);
        if (volume<=0) {
            clearInterval(id);
            mySound.stop();
            lastPosition = Math.round(mySound.position/1000);
        }
    }
}

Flash Audio: Adding Sound Loops

Adding sound loops to a Flash Movie is a simple task. The first thing you have to do is to find the appropriate loop for your Flash Movie. We have lots of free royalty free music loops on our home page at Partners In Rhyme.com that you can download and use with these tutorials.
You can add sound loops for your animations such as cartoons or intros. The whole thing is very easy. If you have a Flash movie with content, like on image 1.

Flash audio tutorial

To add a loop to your movie, follow these steps:

1.    Add an extra layer called “Sound”.
2.    Import a sound loop the you Flash Movie.
3.    Select the first frame of the layer
4.    In the properties panel, in the “Sound” drop down menu, select the imported sound.

That’s all, now you can specify the number of times to loop! On image 3, you can how the image should know look like.

adding music loops to flash

Flash Audio: Streaming MP3′s in Flash

This tutorial will shortly explain the importance of the loadSound method. This method is used when you want to load external MP3 files. Here is the syntax:
public loadSound(url:String, isStreaming:Boolean) : Void
Let’s see how it works!
As I already said, this loads an MP3 file into the Sound object you created. The parametar isStreaming is interesting. You can use it to indicate whether the sound is an event or a streaming sound.
Just like it is the case with every sound, event sounds must be completely loaded before they play. They are managed by the ActionScript Sound class and respond to all methods and properties of this class.
Streaming sounds play while they are downloading. Playback begins when sufficient data has been received to start the decompressor.
All MP3s (event or streaming) loaded with this method are saved in the browser’s file cache on the user’s system. Here is the overview of the two parameteres:
url:String – The location on a server of an MP3 sound file.
isStreaming:Boolean – A Boolean value that indicates whether the sound is a streaming sound (true) or an event sound (false).
Let’s create an example!
Open up a new Flash document. Place an input text field onto the stage (Image 1).
Streamign Audio on Flash

Give it an instance name songName_txt (Image 2).

Streaming MP3 audio in Flash

Add a simple button besides the text field and give it the instance name startSound_btn.(Image 3)

Load sound flash tutorial

Ok, now add an additional layer and name it „Actions“. Rename the layer with the text field at the botton to „Text Field“ (Image 4).

Make sure you have MP3 tracks in the same folder where the Flash movie resides.
Select the first frame of the layer Actions and add the following ActionScript:
var soundToLoad:Sound = new Sound();
startSound_btn.onRelease = function () {
    var song = songName_txt.text;
    soundToLoad.loadSound(song, true);
}
soundToLoad.onLoad = function () {
    this.start(0, 1);
}
Test the movie. Type in the name of one of your tracks and press the start button. The mp3 file should load and play!

Flash Audio: Creating Stereo Sound

Welcome back to our series about Flash Audio. Now we will deal with some more complicated stuff, stereo and mono sounds. To accomplish that, I have to instroduce you to the Transform object in Flash. Sounds complicated, but it’s not that complicated. In ActionScript, you have the “Object” DataType. Like this:

//define an object in ActionScript
var myObject:Object = new Object();

//add properties
myObject.name = “SomeBody”;
myObject.surname = “SomeSurname”;

Now you have an object with the properties name and surname.

But what has this to to with the sound? Here is the answer. The sound in Flash is transformed eg. divided into speakers. When the stereo sound is on (by default it is stereo), then the right speaker has the percentage of 100 and the left too. In ActionScript, it is written like this:

ll = 100
lr = 0
rr = 100
rl = 0

What the heck? It’s not that complicated. Ll stands for Left input on left speaker. Lr stands for left input on right speaker. Rr for right input on right speaker and rl for right input on left speaker. The variables can have values from 0 – 100. As you suggest, you adjust the values to create mono or stereo sound.

//sample mono on left speaker
ll = 100
lr = 100
rr = 0
rl = 0

//sample mono on right speaker
ll = 0
lr = 0
rr = 100
rl = 100

So now that you understand the show transform object you have to know how to apply this to the sound object. Assume you have a track in your Flash document library with the linkage ID set to “myTrack”. The code would look similar to this:

//create the new sound object
var mySound:Sound = new Sound();

//attach the track from the library
mySound.attachAudio(“myTrack”);

//create the mono sound transform object for the right speaker
var monoSoundRight:Object = new Object();
monoSoundRight.ll = 0
monoSoundRight.lr = 0
monoSoundRight.rr = 100
monoSoundRight.rl = 100

//apply it to the sound object
mySound.setTransform(monoSoundRight);

So, it is now very easy to create a Flash movie with buttons that switch between left and right speakers. Here is how it is done:

Open a new Flash document. Import a new sound into the library (Image 1).

Stereo audio in Flash

Give it the linkage ID “myTrack” (Image 2).

flash stero audio tutorial

Create two layers on the main timeline: “Actions” and “Content”. Make sure the “Actions” layer is above the “Content” layer (Image 3).

stero audio in flash

Create two buttons for the right and the left speaker. Place them on the stage and give the left button the instance name “left_btn” and “right_btn” to the right button (image 4).

flash audio tutorial

Paste the following code into the first frame of the Actions folder:

var mySound:Sound = new Sound();
mySound.attachSound(“myTrack”);

mySound.start(0, 50);

right_btn.onRelease = function () {
mySound.setTransform(rightMonoSound);
}

left_btn.onRelease = function () {
mySound.setTransform(leftMonoSound);
}

var leftMonoSound:Object = new Object();
leftMonoSound.ll = 100;
leftMonoSound.lr = 100;
leftMonoSound.rr = 0;
leftMonoSound.rl = 0;

var rightMonoSound:Object = new Object();
rightMonoSound.ll = 0;
rightMonoSound.lr = 0;
rightMonoSound.rr = 100;
rightMonoSound.rl = 100;

var stereoSound:Object = new Object();
rightMonoSound.ll = 100;
rightMonoSound.lr = 0;
rightMonoSound.rr = 100;
rightMonoSound.rl = 0;

Flash Audio: Import/Add Sound To A Movie

The first thing you have to do of course is to start Flash. In this tutorial I use Flash 8 Professional, but the tutorial here can be applied to Flash MX 2004 or Flash MX. Go to File -> Import -> Import to Library….

How to add audio to Flash project

A dialog box appears asking you to choose a file from your hard drive.

Add audio to your flash project

Because you need only sound formats and the rest can be ignored, the next thing you have to do is to filter the sound files using the “Files of Type” drop down menu and selecting “All Sound Formats”.

Add music and sound effects to your multimedia flash project

add wav file to flash audio project

Select an MP3 (or other sound format) on and click “Open”.

The track appears now in the Library of the Flash Movie. You can open the library through Window -> Library. Open the library to see the imported MP3 file.

add mp3 audio file to flash

As you can see, you can preview the file in the library and perform some optimization in the settings. But that’s not the focus of this tutorial, we just want to add some sound to our movie. Go to the timeline of the movie and add an additional layer (Insert -> Timeline -> Layer).

sound layer, content layer in flash audio tutorial

Now you have 2 layers on your timeline. Rename the upper layer “Sound”, the layer below rename to “Content”. That’s it. Your timeline should now look like on image 7.

timeeline for audio in flash tutorial

Select the first frame on the layer “Sound” and open the first properties panel (Window -> Properties). In the panel, find the “Sound” drop down panel and select the imported sound file.

sound drop menu in flash tutorial

You can now test the movie clicking on Control -> Test Movie or pressing Ctrl + Enter.

Embedding Audio Files

How do I put background music on my web page?

It’s fairly simple to add background music to your web page but first you have to consider your visitors. Never put a sound that plays automatically in the background with no option for the user to turn it off. In fact, it would probably be best to give your visitors the choice of turning on the music only if they want to hear it.

 The <EMBED> tag is the most common way of adding sound to a Web page. Its advantage over the <BGSOUND> tag is that it is supported by both browsers, and more consistently across the PC and Mac platforms. The <EMBED> tag introduces many features that aren’t supported by <BGSOUND>. Furthermore, while the <BGSOUND> tag only supports background sounds, the <EMBED> tag also features an interactive interface (including various buttons to play, stop, and handle the sound). Let’s take a look at the <EMBED> tag in action
(requires a sound-enabled browser)

The HTML code that generates a control panel is very simple:

This code:
<EMBED height="20" SRC="http://www.partnersinrhyme.com/indexmidis/BLUES.MID" VOLUME="50" loop="true" controls="console" AUTOSTART="FALSE" width="128">

Will produce this console:

This version uses a WAV file instead of a midi:
<EMBED height="20" SRC="http://www.sound-effect.com/sounds/loops2/SweetDreams.WAV" VOLUME="50" loop="true" controls="console" AUTOSTART="FALSE" width="128">

If you find a sound you like somewhere on the web and decide you want to use it on your web page make sure you download the file to your hard drive then upload it to your own server. Do not under any circumstances link directly to the server you found the file on. Hot linking to someone else’s server is considered bandwidth theft and is against the law.

The attribute, "autostart=true," specifies whether the file should start playing automatically after it loads. If autostart is set to "false," then the file will load into the sound player utility but the user will have to click on the "play" button of the sound player utility in order to start the playing of the sound file.

The LOOP attribute tells the browser how many times you want the the sound to repeat. If you added LOOP="10" to the <BGSOUND> tag, the sound would play 10 times and then stop LOOP="TRUE" will play the loop until the user stops it.

If you need more music loops you can always download free royalty-free music loops here.

 

If you find a sound you like somewhere on the web and decide you want to use it on your web page make sure you download the file to your hard drive then upload it to your own server. Do not under any circumstances link directly to the server you found the file on. Hot linking to someone else’s server is considered bandwidth theft and is against the law.

The attribute, “autostart=true,” specifies whether the file should start playing automatically after it loads. If autostart is set to “false,” then the file will load into the sound player utility but the user will have to click on the “play” button of the sound player utility in order to start the playing of the sound file.

The LOOP attribute tells the browser how many times you want the the sound to repeat. If you added LOOP=”10″ to the tag, the sound would play 10 times and then stop LOOP=”TRUE” will play the loop until the user stops it.

If you need more music loops you can always download free royalty-free music loops here.