First time here? First time here? Newsletter Signup Newsletter
Login | Register | 651326 Members and growing! | Flash Jobs
Search tutorials
Author: Kenny Bellew

How to Build a Horizontal Volume Slider

Fig. 06: Example of horizontal volume slider
  1. Create two images: the base of your slider interface and the image that will slide. If convenient, make the base of your slider 100 pixels wide, as the width would then correspond exactly to the volume range.
  2. Place both on stage as movie clips.
  3. From the pull-down top menu, select "View" and then "Rulers".
  4. Place your slider image, exactly in the middle of the base. This point will represent volume at 50%.
  5. Give your slider movie clip the instance name of "hslider".
  6. Select your slider movie clip, press F9 to access actions for the movie clip and add the following (of course, remove the "//" comments if desired):

    onClipEvent(load) {    
    left=(_root.hslider._x) - 50;
    //The above allows the slider to slide 50 pixels to the left

    top=_root.base._y + 1.1;
    // Replace or remove the 1.1 with whatever pixel number
    //you need to fine tune placement.

    right=(_root.hslider._x) + 50;
    //The above allows the slider to slide 50 pixels to the right.

    bottom=_root.base._y + 1.1;
    // The bottom should equal the "top" value to remove any
    //vertical movement from the slider.

    _root.hslider._x=_root.base._width/2;
    //Loads the slider exactly in the middle of the base.

    volCalc=_root.hslider._x-50
    //Above establishes pixel range for calculating volume
    //End of onClipEvent load

    onClipEvent(enterFrame) {
    // This constantly sets the current x-axis position of
    //the slider to "sliderx" and then sets the volume to
    //the x-axis value - volCalc.

    sliderx=_root.hslider._x;
    myMusicVolume=(sliderx-volCalc);
    _root.myMusic.setVolume(myMusicVolume);
    _root.currentVolume=_root.myMusic.getVolume();
    //Displays volume in dynamic text box with the Var name of currentVolume..
    //End of onClipEvent enterFrame
    }
    onClipEvent(mouseDown) {
    startDrag(this, false, left , top , right, bottom)
    }
    //
    onClipEvent(mouseUp) { this.stopDrag();
    }

    In the above example, the slider movie clip can now be dragged from its center starting point to both ends of the base image. The variable "sliderx" is defined to equal the current x-axis point of your slider movie clip each time a frame is processed. The goal is to position your slider movie clip graphic so that its x-axis starts directly in the middle of the base. That way, you can calculate 50 pixels when the slider slides to the right and 50 pixels when it slides to the left.

    The ActionScript for the above could also be placed in an event handler on a frame of any movie clip that loops such as:

    this.onEnterFrame = function () { code here}

    Use whatever is most convenient.
» Level Intermediate

Added: 2002-08-13
Rating: 8.98 Votes: 664
(10 being the highest)
» Author
Kenny Bellew is a technical writer in Minneapolis, MN. He's currently interested in becoming involved in other writing-related Flash projects.
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!

Comments

  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: work2survive
» Title: Girl Walking 1kb
» Description: Walking girl, animation just takes 1kb, using high heels shoes, and fashion model attitude.
Featured Sound Loops
Image for equalize

Audio Player

» Author: BoxCat
» Title: CPU Talk
» Description: From the cyberpunk RPG, "Nameless: the Hackers" Completely Free to use! Keywords: edm hip hop rap electronic mysterious mission hacking chase exciting spy ios ambient chilling love happy sad angry suspense
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: nathan
» Description:

A recorded sound of the Dimensional Fork Gate.