Learn Flash: Volume Controls	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash - Volume Controls

Free Flash Tutorial

The aim of the tutorial is to learn how to use ActionScript to play a sound file, stop a sound file and create a slider that is used to control the volume.

You can follow the same steps for both a horizontal or vertical volume slider. There is only one difference: The document size. Other than that everything is exactly the same. Once finished you simply rotate the vertical slider to convert it to a horizontal slider. None of the ActionScript or other details need to be changed.

Example: Download the Flash & MP3 files   Int 115a & Int 115b

Click the play triangle to start.

Once created the slider can be rotated and made into a horizontal volume control.

Example: Download the Flash & MP3 files   Int 115c & Int 115d

Example of Flash Movie with Play, Stop and Volume controls.

Credits: The MP3 files used in these Flash Movie have been submitted by Buffalo Audio: A site offering professional voice-over narration and custom music/sound effects

Step One: Setting Up the Document

1. Open a new Flash file.
2. Go to: Modify > Document
3. Set the size to: 40 x 140 pixels
4. Click: OK
   
   Note: For a horizontal volume control set the document size to: 150 x 40 pixels

Step Two: Creating the Slider

First we will create the horizontal volume control bar:

1. Go to: Insert > New Symbol
2. Name the symbol: Control Bar MC
3. Behavior: Movie Clip
4. Click: OK
5. Using the Rectangle tool: Draw a rectangle
6. When you have finished drawing the rectangle return to your Arrow tool:
7. If the Property Inspector is closed, Open it: Window > Properties
8. In the Property Inspector select any colour you may want for the stroke and fill.
   Mine has a black outline with a gradient fill.
9. In the Property Inspector set the size as follows: 30 x 8 pixels
10. Center the rectangle: X = -15  Y = -4
    
    
    Details in the Property Inspector.
    
    It is now time to create the vertical slider bar:
    
    
11. Go to: Insert > New Symbol
12. Name the symbol: Slider MC
13. Behavior: Movie Clip
14. Click: OK
15. Using the Rectangle tool: Draw a rectangle
16. When you have finished drawing the rectangle return to your Arrow tool:
17. In the Property Inspector select any colour you may want for the stroke and fill.
18. In the Property Inspector set the size to: 10 x 100 pixels
19. Center the rectangle on the horizontal X axis: X = -5
20. On the vertical Y axis the bottom of the slider must be located on the registration point: Y = -100
    It is -100 because Flash measures from the top of the rectangle down.
    
    
    Details in the Property Inspector. Note at the bottom of the slider the position of the registration point:
    
    It is now time to add the Control Bar MC.
    
    
21. Re-name Layer 1: Up Bar
22. In the Timeline click the Insert Layer Button:
23. Name the new layer: Slide Bar
24. Open the Library: Window > Library
25. From the Library drag onto Stage the symbol: Control Bar MC
26. Center the symbol on the horizontal X axis: X = -15
    
    Note: The position of the symbol on the Y axis is not important as it is controlled by ActionScript.
    
    
27. In Property Inspector give the symbol, Control Bar MC an Instance Name: control
    
    
    The completed Slider.
    
    The slider is now completed. Go back to the main Stage by clicking on the Tab:

Step Three: The Main Stage - Slider

The Main stage should still be empty. We need two buttons and the slider on stage.

1. If the Library is closed, open it: Window > Library
2. Drag onto Stage the Symbol: Slider MC
3. In the Property Inspector give the symbol an Instance Name: slider
   
   Note: If the slider is not the right size you can simply resize it on the main Stage with the Free Transform tool:
   

For Horizontal Sliders only:

1. Go to: Window > Transform
2. In the Rotate box type: 90°
3. On your keyboard press: Enter (Mac Return)
   
   
   After the Slider is rotated.

Step Four: The Main Stage - Stop Button

Note: If you do not wish to make your own buttons use some buttons from the Common Library. You will still need to give them an Instance Name (step 4.9 and step 5.14): Window > Common Library > Buttons
If you take a button from the Common Button Library avoid Knobs, Faders and Component buttons as they work differently.

1. Use the Rectangle tool to: Draw a square
   My square is: 12 x 12 pixels
2. When you have finished drawing the rectangle return to your Arrow tool:
3. Select any colour you may want for the stroke and fill.
4. Double click in the center to select the rectangle.
5. With the square selected right click (Mac Ctrl click) and select: Convert to Symbol
6. Name the symbol: Stop
7. Behavior: Button
8. Click: OK
9. In the Property Inspector give the button an Instance Name: stopButton

Step Five: The Main Stage - Play Button

The easiest way to draw a triangle is to create a square and convert it to a triangle! If anyone knows an easier way let me know.

1. Draw a square that is slightly larger than the previous one.
   Mine is 15 x 15 pixels.
2. When you have finished drawing the rectangle return to your Arrow tool:
3. Select any colour you may want for the stroke and fill.
4. With the Subselection tool go to the rectangle and click on the: top right hand corner
   
   
   Top right corner is selected.
   
   
5. On your keyboard press: Delete
   
   
   You should now have a right angled triangle.
   
   
6. With the Subselection tool go to the rectangle and click on the: bottom right hand corner
   
   
   Bottom right corner selected.
   
   
7. On your keyboard press the up arrow until the bottom corner is centered.
   
   
   Completed triangle.
   
   
8. Go back to the Arrow tool:
9. Double click in the centre to select the triangle.
10. Right click and select: Convert to Symbol
11. Name the symbol: Play
12. Behavior: Button
13. Click: OK
14. In the Property Inspector give the button an Instance Name: playButton
    
    All the objects on Stage are now complete.

Step Six: The Sound file

You now need a short sound file to loop. In can be an: MP3, WAV or AIFF file.

If you wish you can download the MP3s used in the Flash movies on this page:

Download the MP3 files   Int 11b & Int 11d

1. Go to: File> Import to Library...
2. Select the file of your choice.
3. If the Library is closed, open it: Window > Library
4. Right click on the sound file and select: Linkage
5. For Linkage select: Export for ActionScript
6. For Identifier type: mySound
7. Click: OK
   
   
   The Linkage settings.
   
   Everything is now done except for the ActionScript in frame one.

Step Seven: The ActionScript

Place the following ActionScript in frame 1:

    myMusic = new Sound(this);
    myMusic.attachSound("mySound");
    myMusic.start(0, 99);
    slider.control._y = -50;
    slider.control.onEnterFrame = function() {
        myMusic.setVolume(0-this._y);
    }
    slider.control.onPress = function() {
        startDrag(this, false, this._x, -100, this._x, 0);
    }
    slider.control.onRelease = function() {
        stopDrag();
    }
    stopButton.onRelease = function() {
        myMusic.stop();
    }
    playButton.onRelease = function() {
        myMusic.start(0, 99);
    }

    You will want to test your movie as it is now all done.

ActionScript Explained

myMusic = new Sound(this);
Makes a new sound object in the timeline. This sound object does not yet contain any sound yet. It is like a CD player with out a CD.

myMusic.attachSound("mySound");
This attaches the sound from the Library which we called "mySound".

myMusic.start(0, 99);
This is an auto-start. It instructs the sound file to start to play. (The files at the top of this page do not have this - on my files you must hit the play button). Once the file starts to play it will loop 99 times.

slider.control._y = -50;
Sets the initial volume to 50% full volume. 0 is off and -100 is full volume. Remember that -100 is the top of the slider scale (step 2.20 above).

slider.control.onEnterFrame = function() {
    myMusic.setVolume(0-this._y);
}
Sets the volume to be what every the Y value of slider control. As we slide the controller up and down the volume goes according to the Y value. The(0-this._y)converts all the negative numbers to positive so the volume scale is actually 0 to 100 (not 0 to -100).

Note - Rotation: What is strange is that if you rotate the slider on the main stage to make a horizontal control - the symbols nested inside are not considered to have been rotated. This means that the Y value still works! You do not need to convert the ActionScript to an X value.

Note - Size: This same is also true of size. If you change the size of the controller on the main Stage the Y scale inside the re-sized controller is still 0 to -100. The sizing on Stage makes no difference to measurements of objects nested inside a symbol.

slider.control.onPress = function() {
    startDrag(this, false, this._x, -100, this._x, 0);
}
This makes the slider move when it is dragged with the mouse. Its movement is restricted between 0 and -100.

slider.control.onRelease = function() {
    stopDrag();
}
When you let go of the mouse the slider will stop moving.

stopButton.onRelease = function() {
    myMusic.stop();
}
When you click on the stop button it will stop the sound from playing.

playButton.onRelease = function() {
    myMusic.start(0, 99);
}
When you click on the play button the sound file will play and loop 99 times.

Well except for some foot notes that's it - I hope you found this tutorial useful.

Note: This method uses in this tutorial is: Event sound

Cross Ref: For a beginners tutorial on the difference between Event and Streamed sound see: Sound

Cross Ref: For a practical tutorial on how to compress Flash movies with embedded sound files see: Optimizing a Flash Movie