Overview

Today we are going to continue the tutorial from last time, but this time we're going to add some music - which can be useful in a normal website. If you haven't done the previous tutorial (the part1) I strongly suggest that you do that before you continue although it's not totally necessary. The first part can be found here [1]
Here is how the result is going to look:

You can find the result here [2].

Part 1: The layout

Ok, so I'm just going to get right ahead... The first thing we need to do is to make a "musicbox" where our music-controls are going to be... To do so just draw a square like this:

Than we need to make that an movieclip and name it musicbox... Double-click the musicbox to enter editing-mode... Name the current layer "background" and lock it... Than create a new layer which is named "buttons" and one named "actions"... Lock the actions-layer. If you've done all right until this point you should see something like this:

Note: It is important that the button's layer is over the background layer. (The actions layer is doesn't matter.)

Select the buttons layer and draw a square about one forth of the musicbox's width and 80-90% of its height. Place it to the left of the musicbox, then double-click the fill of the square and hit Ctrl + C to copy (If you're on a mac I don't know how to copy things, but copy the square to the clipboard) then paste it again with Ctrl + V in Windows. Place the new square besides the old one (more or less in the center of the musicbox). Than paste it again and place the third button to the right of the second.
You should now be looking at something like this:

Now make all three buttons into movieclips named mb1, mb2 and mbs (musicbutton 1 and two and musicbutton stop). The stop button is the one to the right, and mb1 to the left. Give all those buttons instance names of mb1, mb2 and mbs... Than enter one of the buttons, grab you texttool and make a static textfield. Write 1 (if in button1)... You should now be looking at something like this:

Than do the same thing to the two other buttons with the text 2 and off like this:

The layout is now finished

Part 2: The coding

To start code lock the buttons layer, select frame one in the actions layer and hit f9...

The first thing we need to do is to make an array in which we are going to put the urls of our two songs... To create an array in flash we use the code:

We want to name the array songs and we need two songs in it. An array in flash always starts at 0, so that means that "row" 1 is at index 0. To get to index 0 in an array you simply type:
So that means that our code is going to be:

Than we need to create a soundobject... Soundobject makes it possible for us to play sounds without using the timeline... A soundobject is created with this code:

That means that our code is going to be:

We also would like the song to repeat itself and there is two ways of doing this in flash... The most common way might just be to set 999 for loopings when you start the song, but that is not what we want... As you can se this will only (:p) loop the song 999 times and you don't have much control of it... What I normally use is the onSoundComplete... The code for that is:

What we would like to happen when the song is completed is simply the song starting over again, and this is done by:

This leaves our code like this:

Than we want the first song start playing when the flash-file loads... To make flash load a external song we use:

This loads the song somSong.mp3 and starts playing it right away. The "true" says that the sound is streaming and that flash shall play the song while loading it, not wait till it's finished loading... To make the first song start playing when the flash loads we use this code:
Note that we used songs[0] for the source because we made songs[0] the first song...

Now we only need the buttons event... These are going to be quiet easy... The first button is only going to make our soundobject load a new song and play it... Here goes the code for that:

Easy huh? Well the second button is going to be more or less exactly the same... So here goes that one:

Than comes the stop button (or mbs if you like...)... To stop the sound from playing we use a function called stop() and it works like this:

So that means that the code for the last button is suppose to be:

Now hit Ctrl + Enter and test the movie... If you have done all correctly and made links to working music-files everything should work...

Part 3: The complete code

Here comes the complete code without comments:

 var songs:Array = new Array;
songs[0] = "somSong.mp3";
songs[1] = "somOtherSong.mp3";
var s:Sound = new Sound;
s.onSoundComplete = function(){
	s.start(0,0);
}
s.loadSound(songs[0],true);
s.start(0,0);
mb1.onRelease = function(){
	s.loadSound(songs[0],true);
	s.start(0,0);
}
mb2.onRelease = function(){
	s.loadSound(songs[1],true);
	s.start(0,0);
}
mbs.onRelease = function(){
	s.stop();
}