Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Adobe Creative Suite

  • Print
  • + Share This
From the author of

Adding the Volume Control Slider

The Volume Control slider is the last element of this interface that gives more control to the user through the Sound Object and its properties. You will also use ActionScript to place this movie clip dynamically on the Stage, but before that, you need to construct it.

  1. Right-click/Ctrl-click the volumeSlider movie clip in the Library. Select Linkage. See Figure 15.

  2. Figure 15Figure 15

  3. In the Linkage Properties panel, select Export for ActionScript. The identifier for the Linkage ID volumeSlider is automatically inserted.

  4. Go to the script layer. Click Frame 1.

  5. In the Actions panel, insert this script:

  6. Listing 13

    var btnLoc:Number = 0;
    
    //when knob is pressed, allowing dragging along the x axis
    volume_btn.onPress = function() {
    volume_btn.startDrag(true,0,0,300,0);
    }
    
    //when knob is released, stop dragging and set the sound volume
    volume_btn.onRelease = volume_btn.onReleaseOutside = function() {            
       volume_btn.stopDrag();
       btnLoc = Math.floor(volume_btn._x/3);
       _parent.soundVolume = btnLoc;
       for(x=0;x<ROWS;x++) {
          for(y=0;y<COLUMNS;y++) {
             _parent["boxMC"+x+"_"+y].sound.setVolume(btnLoc);
          }
       }
    }

    First, you define a variable named btnLoc (type Number). This local variable will be used to store the position of the volume_btn on the volumeSlider bar.

    volume_btn.onPress is a Button method that will activate when the user presses the wooden-looking ball on the slider. startDrag is a button method that is being passed five parameters: true tells the function that the dragging will be constrained (rather than letting the user drag the button anywhere on the stage), and the next four values define the constraints (left, right, top, and bottom). left and right here are the edges of the slider bar.

    onRelease and onReleaseOutside are two more Button methods which are nested, because they should have the same functionality and trigger when the button is released.

    stopDrag() will stop the button from moving, and the variable btnLoc will be assigned the current location of the button on the bar, divided by 3 (the bar is 300 pixels wide, and you want a volume value between 0 and 100).

    soundVolume will be set to this newly created value, and then a loop will set the volume of every box in the grid using the Sound setVolume method.

  7. Go back to the main movie (Scene 1). Click on Frame 1 (script layer), and insert this script to position the Volume slider on the Stage:

  8. Listing 14

    //Building and Positioning the volume slider
    movieGrid.attachMovie("volumeSlider","volumeSlider",30000);
    movieGrid.volumeSlider._x = BOXWIDTH - (BOXWIDTH/COLUMNS)/COLUMNS;
    movieGrid.volumeSlider._y -= BOXHEIGHT/2;

    Here you are attaching an instance of the volumeSlider movie clip to the movieGrid movie clip and aligning it to the top center of the movieGrid instance.

  9. Save your work.

  • + Share This
  • 🔖 Save To Your Account