In this tutorial you will learn how to create a sound slider. This is perfect for adjusting the sound by making it louder or softer without touching your speakers.

Step 1 : Creating the Volume slider

1. Create a new flash document and change the dimensions to 225 px by 225 px for better viewing.
2. Now go to insert ð new symbol and name the symbol "Control Bar MC". Select the movie clip bullet and then click ok.
   
   
   
3. On the new symbol page draw a rectangle with the Rectangle Tool. Don't use an outline so things are easier.
4. Select the rectangle with the Selection Tool and go to the properties tab and put the size as 30 x 8 and the x/y axis -15,-4
   
   
   
5. Now click insert ð new symbol and type in Slider MC as the name and select Movie clip then ok.
6. Draw another rectangle same as before (a different color would be best) and put the size 10 x 100 with the x,y axis -5,-100
   
   
   
7. Still on the Slider MC movie clip stage change the layer1 name to "Slider" and add a new layer and name that "Control".
   
   
   
8. Open up your library if its not open already and drag the Control Bar MC movie clip to the stage (control layer).
9. Then select the control rectangle and type in -15 for the x axis. Now your slider will look like this.
   
   
10. In the property window give the Control Bar MC an instance name of "control". (Make sure you have the control rectangle selected).
    
    
    
11. Now go back to scene 1 (the main stage) and drag the Slider MC movie clip from the library to the stage.
12. Give the Slider MC a instance name of "slider" in the property window.

Step 2 : Adding sound and action script

1. Click here to download a sound file or use one of your own.
2. Now go to file ð import ð import to library and select the sound file from your computer.
3. Go to your library and right click the sound file. Select linkage and check the "Export for actionscript box". Then for the identifier type in "mySound". Click ok.
   
   
   
4. Make sure you are still on the main stage and in the 1st frame copy the actionscript below into the actions textbox.
   

   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(); }

   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.

Now test the movie...You can download an example source file here.

 

 

Vote article

Poor Excellent