Every site needs sound. Some less than others but sound helps give a site a warm feel to it or a cool experimental one (Amon Tobin, Pitaru). We all like sound when done right. But lets face it. Flash4 gave us very little control over sound. Apparently Macromedia acknowledged our complaints and gave us more control in Flash5. Flash5 allows us to create Sound objects to which we can attach sound files and control them via actionscript. Flash5 lets us control the volume, panning , number of loops and the start offset of a sound object. In this tutorial we will first look at the sound object and its related methods and then create a sound control movie clip that will allow us to control which loop / combination we want to play, their offset , number of loops, volume and panning. The FLA provided also behaves as a plug n play module. By just modify a small amount of code you can reuse the soundMC movie clip in a project. I would suggest deleting the offsetMC and loopsMC movie clips if you do so.

The Sound Object

Lets get started. We can create a new sound object by using the following code:

mySound = new Sound();
or
mySound = new Sound(target);

• attachSound("id"): By this method we can attach a sound file to our object. To do this we need to make sure the sound file is exported as well and give it an id name. To do this first import a sound file. Then open the Library (Cntrl-L) and right click on the sound file you want to be made available to attach. In the associeated menu check 'Export this symbol' in the Linkage options and give the file an 'Identifier' name. This is the id name you will use to attach this sound file to a sound object. More than one sound file can be attached to a sound object. To play an attached sound file a start method must follow immediately after the attachSound method since the start method only affects the last attached sound.
  

  mySound.attachSound("nik");

• setPan(value):By this method we can set the panning of a sound object. The range for the value is an Integer between -100 and 100. -100 is dead left, 100 dead right and 0 center.

  mySound.setPan(-30);

• getPan(): This method retrieves the current panning value of a sound object and returns it as an Integer. The returned value is an Integer with a range between -100 and 100.
  
  
• setTransform(transformObj):This method applies a sound transform object to a sound object. A sound transform object is a generic object to which the following parameters are attached.
  

  myTransformObject = new Object;

  There are 4 parameters we can pass using the sound transform object. They are:
  
  ll: This value specifies the amount of the left input to play in the left channel.(-100 to 100).

  myTransformObject.ll = 110;

  lr: This value specifies the amount of the right input to play in the left channel.(-100 to 100).

  myTransformObject.lr = 100;

  rr: This value specifies the amount of the right input to play in the right channel.(-100 to 100).

  myTransformObject.rr = 50;

  rl: This value specifies the amount of the left input to play in the right channel.(-100 to 100).

  myTransformObject.rl = 100;

  
  
• getTransform():This method returns the transform object as set by the setTransform method.
  
  
• setVolume(value):By this method we can set the volume of a sound object. The range for the value is an Integer between 0 and 100. 0 is no volume and 100 is maximum.
  

  mySound.setVolume(80);

• getVolume():This method retrieves the current volume value of a sound object and returns it as an Integer. The returned value is an Integer with a range between 0 and 100.
  
  
• start(offset, loops):This method tells the sound object to play the last soundfile attached to it. It has to available syntax. One without the offset and loops parameters and one with.

  mySound.start();

  mySound.start(2,10);

  The offset parameter ( in the above eg. 2 ) specifies where the sound file will start playing. After how many seconds. The loops parameter ( in the above eg. 10 ) specifies the number of times the sound file will loop. Both parameters are optional and are treated as being given a value 0 if not specified.
  
  
• stop(): Stops playing a sound object.

Now the Flash Movie

Now lets get to the Flash movie. This movie will show you two things. How to use the sound object and how to make the sound control interface compact so it does not occupy a lot of space. Before you start make sure you have 3 loops ready in wav, mp3 or any other Flash5 compatible format. Here's a demo of the movie we are about to make.

First lets create a blank movie with a stop command in a dedicated actions layer and in it we create a new movie clip called soundMC. The soundMC MC and every MC we create will also has a dedicated actions layer. Place a stop command at frame 1 of soundMC. We will place all our movie clips and control buttons in this MC. Lets think about the different we will need. We obviously need a movie clip with the sound object. We will create the sound object in its own MC, in this case called sound. This gives us good control, allows us to have multiple sound objects and keeps everything organized. We want to let our users adjust the volume and panning, so they have control as well. So we will create a scrollbar MC called scrollbar to adjust the volume and panning. I want to have 3 loops available for the user to choose from, so we will have buttons for these and initializing the scrollbar to change the volume and panning values. Additionally we will also need variables and text boxes to change the offset and number of loops parameters of the sound object's start method.

Sound MC

Lets start with the sound MC which will be instantiated as 'sound' in its own dedicated layer I call 'Sound ClipMC' (In our tutorial every MC will be placed in its own layer). This MC basically contains the actionscript code that creates/initializes a sound object snd and then updates the sound object's volume and panning properties. To make the MC easier to work with I put a title in the MC. Make sure the MC has at least two frames else it will not loops.

In the onClipEvent load event of the 'sound' MC we will create and initialize our new snd object. Before creating the snd object we should set the default values for the volume (_root.volume) and panning (_root.pan) which we can then apply to the snd object. Here's is the onClipEvent load event code:

onClipEvent (load) {
    // This MC contains the sound object
    // set the default volume and pan values
    _root.volume = 50;
    _root.pan = 0;
    // create the sound object and set its volume and panning
    snd = new Sound();
    snd.setVolume( _root.volume );
    snd.setPan(_root.pan);
}

That creates our snd sound object. Note that at this time I did not tell the object which sound file I want it to play. I will do this via buttons since I want the user to choose the file he/she would like to hear. Now we need the snd object's volume and panning properties to be updated in real-time, so when the user uses the scrollbar he can be shown the effects of changing the properties in real-time. To do this we will need the volume and panning properties to be updated at every frame. This will make it instantaneous and give the user a smoother end effect. To do this we place code using the setVolume and setPan methods in the onClipEvent enterFrame event. Here's is the onClipEvent enterFrame event code:

onClipEvent(enterFrame) {
	// update volume & panning so that user can view
	// different settings via the scrollbar
	snd.setVolume( _root.volume );
	snd.setPan(_root.pan);
}

Scroll Bar MC

I assume u guys know how to create a draggable scroll bar so I will not get into details here but I will tell you how mine is set up.

The scrollbar MC contains two MCs. The bar and the slider MCs. Since we need the the slider to have an effective value of 0 when it is in the center of the scrollbar for the panning I use the bar MC to find the center by placing it in the center of the scrollbar MC. Additionally I make the bar MC 100 pixels in length. We also place the slider MC in the center of the scrollbar MC. This makes calculations easier.

The slider MC is like any other scrollbar slider MC. It contains a button the has startDrag and stopDrag calls in its on (Press) and on (Release) events except for the fact that I make the scrollbar MC disappear when the user lifts up his mouse. The eliminates the need for a close button to close the scrollbar that would just take up more space.

on (press) {
    // drag this MC
    startDrag (this, false, GetProperty("_parent.bar",_x)- 
    GetProperty("_parent.bar",_width)/2
    ,GetProperty("_parent.bar",_y),GetProperty("_parent.bar",_x)
    +GetProperty("_parent.bar",_width)/2,
    GetProperty("_parent.bar",_y));
}

on (release, releaseOutside) {
    // stop dragging and then make the scrollbar invisible
    stopDrag ();
    _parent._parent.scrollbar._visible = false;
}

Now we need to have the scrollbar update the _root.volume or _root.pan variables. Updating these variables will automatically update the snd object since we added code to do this in the onClipEvent enterFrame event of the 'sound' MC.

Now I want to use one scrollbar MC to let the user adjust the volume and panning properties by making it function as two separate scrollbars. This reduces work by eliminating the need to create two different scrollbars. To do this we will have a 'scroll' variable in the soundMC parent MC. This variable will have the value "volume" if we want this scrollbar to function as the volume scrollbar or "pan" if we want it to function as the panning scrollbar. Therefore we need to add code in the onClipEvent enterFrame event of the scrollbar MC that's executes code that manipulates the _x position of the slider MC and assigns the value to the _root.volume or _root.pan variables. We check the value of the scroll variable in the soundMC parent movie clip before executing the specific code. Here's is the code I used:

onClipEvent (enterFrame) {
    if (_parent.scroll eq "volume") {
        _root.volume = Int(slider._x + 50);
    } else {
        _root.pan = Int(slider._x)*2;
    }
}

To optimize space we will make this MC invisible by adding the following code to the 1st frame of the actions layer of the soundMC MC. We will later create buttons to make it visible later on.

scrollbar._visible = false;

Text & Buttons

Now lets create a layer 'text' in the 'soundMC' MC and add two input text boxes with the variables 'offset' and 'loops'. Both of these variables will be sent as parameters when we start playing a sound in the snd sound object when calling the start method. These variables should be initialized in the actions layer of the soundMC MC. I use 0 for 'offset' and 10 for 'loops'. By letting the user edit these values they can have some fun with the loops. This teaches you what they do and lets users ruin your loops as well. Isn't that nice?

Before moving on make sure 3 sound files have been imported into Flash5. Open the Library by pressing Cntrl-L or going to the Window>Library menu. Right click on a sound file in the Library and click Linkage. Check the 'Export this Symbols' option and enter "snd1" as the Identifier. What this does is exports the symbol so that u can use it when required within Flash5. You need to do this for every sound file you want to use with a sound object else it will not work. Do the same for the other two sound files and give them the names "snd2" and "snd3".

Now to the final part. Creating the buttons. Lets create a new layer called 'buttons' and create an arrow shaped button. In the over state of the button place a dynamic textbox with the variable 'buttontext'. Make 6 copies of this buttons and place it in your soundMC MC. Now we need to decide what code to put into the buttons' on(Press) events. We will add code to stop playing the snd sound object, in case it was already playing. By default if u attach a soundfile to a sound object and call start, it will not stop playing the previous sound. You will get overlapping or mixing depending on how much u like it. While some may find this irritating this is a good feature allowing you to attach different files at different times and create a cool mix. To attach more than one file simple attach it and then call the start method. The start method plays the last attached sound file so every time u attach a file you need to call the start method. Unfortunately you cannot target a single soundfile to stop only it from play.

After stopping the sound object we need attach the sound file associeated with that particular button and the start playing it. Remember we need to send it the offset and loops parameters as well. This is my code (change "snd1" to "snd2" and so on):

on (release) {
    // stop current sound, attached a new sound id 
    // and start playing it
    sound.snd.stop();
    sound.snd.attachSound("snd1" );
    sound.snd.start( offset, loops );
}

on (rollOver) {
    buttontext = "1";
}

What's that rollover code. It assigns text to the button. Since we see the text box only when the mouse is over the button (the text box is on the 'over' keyframe of the button) we do not need to worry about rolloff actions.

Do this for the next two buttons. The last 3 we will do a cheesy mix. We will attach 2 (you can do more) sound files to the sound object and play them. Here's the code for these buttons:

on (release) {
    // stop current sound, attached a new sound id and start  
    // playing it and attach and play another
    // when u call start it plays the last sound id attached
    sound.snd.stop();
    sound.snd.attachSound("snd1" );
    sound.snd.start( offset, loops );
    sound.snd.attachSound("snd3" );
    sound.snd.start( offset, loops );
}

on (rollOver) {
    buttontext = "1,3";
}

Next we make a stop button. I don't think you need to me to tell you what code goes there. Here it is anyway:

on (release) {
    // stop all sounds
    sound.snd.stop();
}

Lastly make 2 more buttons, to launch the scrollbar. One for volume and another for panning. When the user presses the volume button we need to do a couple of things. First we need to check if the scrollbar MC is already visible and if it is then if it is the volume scrollbar(remember the scroll variable). If this is the volume scrollbar then we need to shut it since its already open, else we need to set the scroll variable to "volume" and make the scrollbar visible.

on (release) {
    // if the scrollbar is visible and current scrollbar shown
    // is the volume one , them make it invisible
    if ((scrollbar._visible == true)  and (scroll eq "volume")) {
        scrollbar._visible = false;
    } else {
        // else set the current indicator to volume
        //  and make the scrollbar visible
        scroll = "volume";
        scrollbar._visible = true;
    }
}

But we also need to make sure we place the slider MC in the scrollbar MC to the position corresponding to the current volume. The prevents the actionscript in the scrollbar from setting the current volume to the last position of the slider MC. Additionally setting the text box in the over state of the button to the current volume would be a good way to display the current volume setting without having another text box.This is the modified code:

on (rollOver) {
    buttontext = _root.volume;
}

on (release) {
    // if the scrollbar is visible and current scrollbar shown
    // is the volume one , them make it invisible
    if ((scrollbar._visible == true)  and (scroll eq "volume")) {
        scrollbar._visible = false;
    } else {
        // else set the current indicator to volume, set the  scroller 
        // to the  value of _root.volume and make  scrollbar visible
        scroll = "volume";
        scrollbar.slider._x  = _root.volume - 50;
        scrollbar._visible = true;
    }
}

We place similar code in the panning button as well:

on (rollOver) {
    buttontext = _root.pan;
}

on (release) {
    // if the scrollbar is visible and current scrollbar shown is 
    // the pan one, them make it invisible
    if ((scrollbar._visible == true)  and (scroll eq "pan")) {
        scrollbar._visible = false;
    } else {
        // else set the current indicator to volume, 
        // set the scrollbar scroller to the current 
        // value of _root.volume and make the scrollbar visible
        scroll = "pan";
        scrollbar.slider._x = _root.pan/2;
        scrollbar._visible = true;
    }
}

Is that it?

No. You must make at least 5 FLAs involving sound! Seriously, practice makes perfect. Tutorials like this one will help you get started but you need to push yourself to create really cool ones. With the basics shown you I would say you have a lot to work with.

Show us what you got!