Tutorial details:
Written by: Muhammad Yahya www.myahya.com webmaster@myahya.com
Difficulty Level: intermediate
Requirements: Flash MX

Adding sound to a flash movie is useful when you want your visitor not to be bored by just surfing the complex 'action scripted' interface of your site. But adding sound is not easy. Just to import a sound into your library and then starting it with AS it not enough. You visitor can easily be annoyed if you don't give him the access to control the sound. I have already added a link to the marvelous sound tutorial by Kenny Bellewin my flash tutorials section. But his state-of-the art tutorial was even unable to fulfill my own needs. So I searched the net for a solution and figured out how to give dynamic effects to my background sound. On this site you can clearly hear how the background sound fades in on start. And then you have a button on bottom of the menu to stop it and to start it once again. While stopping... the sound fades out dynamically. When you play it again... it fades in. And the best part is that no matter how fast you keep clicking the toggle button... the sound works perfectly dynamically... fading in and out.

I have to thank all the folks who helped me on the macromedia online web forums and also on actionscript.org forums. Thumbs up for them. I really believe that as far as folks like them are around... people like me who wanna learn can't go disappointed.

Before getting started with the tutorial and telling you all the secrets to my very own web site dynamism... I assume that you are not a novice in flash and know how to work with action script in xpert mode. If you have just started learning flash... or have worked in it but don't have much xperience with AS... I suggest you go to www.actionscript.org and do some of their basic tutorials... also do Kenny's sound tutorial linked in the tutorials section on this very site and then return back... as you are alwayz welcome!!!

Please note that all the AS used in this tutorial has no copy rights. Feel free to use it where ever you want. And if you think this tutorial was good enough, do link to it. The tutorial, its layout and format, however, is copyright yahya 3d. Also note that this tutorial is for flash mx 6.0, it may not work properly in flash mx 2004 7.0. Lets get started with the tutorial.

1.
First of all... let me tell you that this site has two scenes in it. The fist scene contains the preloader and the second one contains the home page. So create a new file in flash... and add a scene. This is the first step. We will work in the second scene from here on.

2.
Now, obviously enough, you need to import a sound into your library. For that press ctrl+R and select your desired sound file.

3.
After doing so, open your library by pressing F11, locate the sound file, right-click it and select 'Linkage'. Give it a name. In this tutorial we will use the name 'backsound'

4.
Now that your sound file is exported for AS, lets get going with the magic. Goto the first frame, open the action script panel and initiate the sound by writing the following script:

// initiate sound
music = new Sound();
music.attachSound("backsound");
music.start(0, 999999);

5.
We don't want the sound to start abruptly, instead, we want it to fade in slowly. For that, first of all we need to set the volume of the sound to zero.

// set the volume of the sound to zero
music.setVolume(0);

6.
Now we have to create a function that fades in the sound at the start. For the function to work we need to set a couple of variables. You need to have knowledge of them both to understand how it works. Our function for initial fade in goes like this:

// set a variable named 'vol'
vol = 0;
// set another variable named 'fade', putting a setinterval function in it
fade = setinterval(fadeIn, 100);
// set the initial fade in function
function fadeIn() {
        // fade the sound in with an increment of 3 in the variable 'vol'
        vol += 3;
        music.setVolume(vol);
        // put an if condition to restrict the increment in volume after it reaches to 100
        if (vol>=100) {
                clearInterval(fade);
        }
}

7.
What happens here is that this function fades the sound in dynamically with an increase of three to the volume which is set to zero. Please note that the increment can be modified accordingly. When the volume reaches to hundered, the interval is cleared. Now we have to create another function... so that our sound can fade in and out according to the even and odd clicks on a single button. So we will write something like this in the AS window:

// function executed on onEnterFrame
_root.onEnterFrame = function() {
        // set fade out
        if (Fade == 1) {
                vol = vol-step;
                if (vol<0) {
                        vol = 0;
                }
                music.setVolume(vol);
                // set fade in
        } else {
                vol = vol+step;
                if (vol>100) {
                        vol = 100;
                }
                music.setVolume(vol);
        }
};

8.
But there surely is something missing. You can clearly see that the key to this fade in and out function is the use of two variables 'fade' and 'step'. Step is the value you want the sound to fade in and fade out with and 'fade' is the variable that tells the function either to fade the sound in on the very click or fade it out. For this we have to go back to our initial fade in function and add two lines defining the variables. Finally, our first fucntion will look like this:

// set a variable named 'vol'
vol = 0;
// set another variable named 'fade', putting a setinterval function in it
fade = setinterval(fadeIn, 100);
// set the initial fade in function
function fadeIn() {
        // fade the sound in with an increment of 3 in the variable 'vol'
        vol += 3;
        music.setVolume(vol);
        // put an if condition to restrict the increment in volume after it reaches to 100
        if (vol>=100) {
                clearInterval(fade);
                // create the 'step' variable
                step = 1;
                // create the 'fade' variable
                Fade = 0;
        }
}

9.
For the record... our complete script on the first frame will look something like this:

// initiate sound
music = new Sound();
music.attachSound("backsound");
music.start(0, 999999);
// set the volume of the sound to zero
music.setVolume(0);
// set a variable named 'vol'
vol = 0;
// set another variable named 'fade', putting a setinterval function in it
fade = setinterval(fadeIn, 100);
// set the initial fade in function
function fadeIn() {
        // fade the sound in with an increment of 3 in the variable 'vol'
        vol += 3;
        music.setVolume(vol);
        // put an if condition to restrict the increment in volume after it reaches to 100
        if (vol>=100) {
                clearInterval(fade);
                // create the 'step' variable
                step = 1;
                // create the 'fade' variable
                Fade = 0;
        }
}
// create the fade in and out function
// function executed on onEnterFrame
_root.onEnterFrame = function() {
        // set fade out
        if (Fade == 1) {
                vol = vol-step;
                if (vol<0) {
                        vol = 0;
                }
                music.setVolume(vol);
                // set fade in
        } else {
                vol = vol+step;
                if (vol>100) {
                        vol = 100;
                }
                music.setVolume(vol);
        }
};

10.
Now, finally, create a button and add this script on it:

on (release) {
        (_root.fade=!_root.fade) ? 0 : 1;
}

What happens is that when you click the button for the first time... it sets the value of the variable 'fade' to 1, as the value of the variable 'fade' was set to 0 in the first function, thus fading the sound out as the block with vol-step executes. When you click the button for the second time it works vice versa. The ? 0:1 command simply sets the value of the variable 'fade' to 1 or 0, depending on what its previous value was.

Abra Cadabra!!! There you go... test your movie... should work perfectly fine.

©2003 yahya3d.tk