Written by: Muhammad Yahya www.myahya.com
Difficulty leve: Intermediate
Requirements: Macromedia Flash MX [ver 6.0]
Download FLA

This tutorial, basically, is a continuation of the one I wrote before, describing how to fade in and out a background sound dynamically. You can see this tutorial listed in the tutorials section. Many asked for the secret to the toggle button too. On my site, you can see one button used for both stop and play, fading in and out the appropriate controls with the sound. So in this tutorial, I'll describe how to make a button like that one. If you haven't done the previous tutorial and just want to do this one, download the working file for that tutorial here . Please note that both the tutorials are for Flash MX [ver 6.0], so the flas provided here for your convenience may not work in Flash MX 2004 [ver 7.0].

Note that all the actionscript used here, plus layout and format is Copywright ©2003 yahya3d.tk . You are not free to use the script without mentioning the site's name in the actionscript!

Before we proceed, I would like to thank actionscript.org and flashkit.com for their support. I learned a lot from both these sites. The sound file used in both these tutorials is downloaded from flashkit. I appreciate them for providing such helpful material to us all!

Naturally, I assume that you have a good knowledge of Action Scripting and can work in it in xpert mode. Also, that you know all the concepts relating sounds, variables, symbols and invisible buttons. If not, then this tutorial isn't exactly for you. You need to goto one of the learning sites like actionscript.org, flashkit.com or webforums.macromedia.com and do their beginner tutorials. Then come back and do this one!

I also assume that you have done the previous dynamic sound fade tutorial. So I'll start from where that tutorial ends. Now lets get going!

First of all... we will start from making an invisible button. I hope you all know what that is!! Press ctrl+F8... the 'create new symbol' dialogue box appears. Choose button from the behavior list and click okay. You are now in the button symbol edit space. Leave all other states blank, goto the hit area and press F7. This adds a blank key frame there. Create a small rectangle. That's it! This is your invisible button!

The invisible buttons are useful when you want to mess with movie clips. They are invisible in the run time but you can put them on anything... and as a result that thing starts behaving like a button! Pretty handy eh?

Now create a movie clip symbol. This movie clip will serve as the stop/play toggle button. How?... Lets find out!

You see, you have a task here: you want a button which, on first click, fades the sound out. This task can simply be achieved by a stop button. But that's not all. While doing so, the button, itself, should change into a play button. And, manifestly, when clicked again should fade the sound out while changing into a stop button again. Now this task can only be achieved if you put both the stop and play buttons on two layers, cross fading them. I have used a simple square for the stop button and a simple triangle for the play button with the text 'play sound' and 'stop sound'. Remember that all these are simple graphics... no button is included. Instead, I have chosen the invisible button to do the job.

In my movie clip, there are five layers. On each one of them, I have put all the graphics, mentioned earlier, separately. The invisible button is placed on the fifth layer where the cross fade tweens end. Download the source file and take a look. You will understand what I mean.

You need three "stop" actions in this movie clip. First on the first frame, where the movie is showing the stop button, second where the first cross fade tween ends, showing the play button, and the third stop action on the last frame where the movie again shows the stop button. I have these actions on frame 1, frame 45 and frame 90.

Now that we have created the movie clip, we will goto the first frame of our main timeline and create an instance of the very movie clip there.

Add another layer. We will add our actions on this layer.

Goto the action script layer we just created... our movie contains just one frame. Select it, open the AS panel and declare a global variable with a value of 1:

// declare a global variable
var s = 1;

You, most probably, already have the sound AS on this frame if you have done the first tutorial. So your complete script on this frame will look something like this:

// declare a global variable
var s = 1;
// initiate sound
music = new Sound();
music.start(0, 999999);
// set the volume of the sound to zero
// 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;
        // put an if condition to restrict the increment in volume after it reaches to 100
        if (vol>=100) {
                // 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;
                // set fade in
        } else {
                vol = vol+step;
                if (vol>100) {
                        vol = 100;

The global variable will help the play head move appropriately.

Keeping in mind that the value of the global variable 's' is 1, select the movieclip on the stage and double click it... you will be in what is called an "edit in place space". Select the invisible button and open the AS panel. Like I said before that I assume that you have already done the previous tutorial so these actions should be there already:

on (release) {
        // set the function for variable value toggle
        (_root.fade=!_root.fade) ? 0 : 1;

Now you need to put an if condition in there. The if condition will determine the playhead movement. The complete AS on this button will look something like this:

on (release) {
        // set the function for variable value toggle
        (_root.fade=!_root.fade) ? 0 : 1;
        // put an if condition to tell the playhead to goto
        // the frame from where the play button starts fading in
        // as we have pressed the button to stop the sound
        // we have already set the value of the variable s to 1
        // thus the playhead moves to frame 2 where it starts fading
        // the play button in and the stop button out
        if (_root.s == 1) {
                tellTarget (this) {
                        // now you aobviously have to set the variable's value
                        // to 0, so that the next time you click the button
                        // the playhead moves to the 46th frame where the stop
                        // button starts fading in
                        _root.s = 0;
        } else {
                // else block executes when the varianle s is equal to 0
                // when you click the button for the first time it sets the
                // value of this variable to 0
                // so the next time you click this button
                // this else block executes
                tellTarget (this) {
                        // now set the value of the var s to 1 again so that
                        // the next time this button is clicked the block with
                        // if condition can execute
                        _root.s = 1;

The global variable 's' plays vital part in all this. By this method you can create a toggle button for anything.

This business is really hard to explain I must confess!! I have explained the action script line by line, putting comments in it and with the help of the source file you should be able to grasp it all. Still if you thing you are confused a bit or want to discuss something.... mail me . I'll be more than happy to help you out!

©2003 yahya3d.tk