Make Flash Animations, Video, Slideshows, Text Effects, Buttons & Menus. Designer Templates, 250 Effects, plus Components & Video Controls

Program: SWiSHmax
Build Date: 2004.08.12+

Important: The script used for the volume control (particularly the Sound object and related code - such as setVolume) is NOT supported by the internal SWiSHmax player. In order to test the volume control, you will need to use File Menu | Test | Test in Player (or Test in Browser). Pressing the 'Play' button inside SWiSHmax will simply result in a debug error.

Introduction

Audio players are very popular these days on the web. Flash audio players have added functionality (and visual effects) not possible in standard streaming audio players - giving you the ability to create your own customized players with any design you can imagine. Sure, it's easy enough to turn audio the audio off by using the 'stopAllSounds' action, but what about increasing or decreasing the volume of the audio. Easy, make a volume control slider!

What Audio?

The first thing to do, is to make sure that you actually have audio in your movie (seems obvious, I know). You can insert audio by using a basic playSound() action, or you can import a streaming audio file (Insert Menu | Soundtrack). The volume control will work using either method. For the images in this tutorial, I used the Soundtrack option; however, in the sample file accompanying this tutorial I've used the playSound action (to keep the file size to a minimum).

Designing the Slider

The next step is creating the button that will be used in the slider -- this will be the actual button that the user grabs and slides back and forth. For this example, I used a small rectangle shape with several lines drawn inside of it (to give the appearance of a 'grip'). After creating your own button - select all the objects used in it and group as a sprite (Modify Menu | Grouping | Group as Sprite). On the Sprite panel, name this sprite slider.

It is also very important (for a horizontal slider), that you open the Transform panel and set the Anchor Point to 'Center-Left' for this sprite.

The Slider Track

This is where I change things a bit from normal volume control sliders. I will do my best to explain the reasoning behind it, but I apologize if I just make things more confusing!

Next, draw a simply rectangle (outside of the slider sprite). Make sure that after you draw the initial rectangle, open the Transform panel and select Resize (rather than Scale). This will allow you to change the height/width of the rectangle without changing the 100% scale factor. Next resize this rectangle to the width that you want to use as the slider track. Keep in mind that this rectangle will not be visible - it is simple in place to help make the math used for the slider a bit easier and to define the limits of where the slider button can be dragged (constraints). After getting this rectangle sized appropriately, open the Shape panel and give it the name sliderTrack and select the 'Target' option. Again, you will also need to open the Transform panel and set the Anchor Point to 'Center-Left' (this helps makes the math much easier for horizontal slider bars ... if you were making a vertical slider, you should use 'Top-Center' instead).

Now, select both the 'slider' Sprite and the 'sliderTrack' object and group them as a Sprite (Modify Menu | Grouping | Group as Sprite). Name this Sprite 'sliderBar' on the Sprite panel. Then, just as before, open the Transform panel and make sure that the Anchor Point is set to 'Center-Left'.

Here comes the part where I try to explain the reason for creating the 'sliderTrack' object. In some cases, you could simply design the sliderTrack object to look like an actual track and it would work perfectly; however, things get more complicate if you want to change the constraints of the slider button -- perhaps you want to add some padding so that the slider button doesn't quite reach the end of the track. One example of this would be when the slider button is inside the track - rather than sitting on top of it. When you start adding padding inside the 'sliderBar' sprite - it will require exact changes to the math used to control the volume, which can often become frustrating. I have used this example in an attempt to simply the process. Using this setup, all you will need to do is resize the width of the 'scrollTrack' object to match the exact constraints you desire. Outside the 'sliderBar' Sprite is where you actually design the visible slider track -- which could be the exact same dimensions as the 'sliderTrack' object if you want it to be.

So, let's use the example of having the slider button inside the track. Select the Scene from the Outline panel (just to ensure that you are no longer inside the sliderBar Sprite). Draw a simple rectangle around the sliderBar Sprite as shown below.

You can name this object if you want - personally, I would recommend it (although, setting this particular object as a Target is not necessary). I find it much easier to understand what I did when I open the file several months later (as opposed to seeing a hundred objects named 'Shape'). The most important part about this, is making sure that this object is not inside the sliderBar Sprite. Next, use the Order buttons (up/down arrows at the top of the Outline panel) to position this object below the sliderBar Sprite.

Making the Slider Draggable

Open the sliderBar Sprite and the slider Sprite by pressing the (+) icon next to them in the Outline panel. Go into the slider Sprite and select the actual 'button' that you want to use as the draggable area (meaning, you'd probably want to select the button rectangle instead of the 'grip' lines). Next, open the Script panel and switch to Expert mode so that you can easily copy and paste the script I've provided below (if 'Guided' mode is currently select in the Script panel, click on that button and select 'Expert' instead).

Paste the following code into the Script panel:

The code above is another good reason for creating the 'sliderTrack' object. It lets you grab certain properties of that object and use it to make the slider script more dynamic (meaning, instead of having hard-coded values like "100" or "217", you can simply resize the sliderTrack object and the code will update dynamically).

The script above simply defines the dragging constraints for the slider button and turns a variable "isDragging" on/off. That variable will be used to help reduce CPU usage in the next step.

The Volume Control Code

Next, select the sliderBar Sprite in the Outline panel and paste the following code into the Script panel:

I've added a "startVol" variable to the onLoad section of this code - this will allow you to easily define the initial starting volume of the audio without having to worry about the position of the slider (for example, if you set the 'startVol' to '50' - the slider button will position itself in the middle of the sliderTrack). The onEnterFrame event will set the volume of the specified Sound object to match the position of the slider button. This is the reason for declaring the 'isDragging' variable. There really isn't much point having the onEnterFrame event constantly setting the volume if the user isn't actually dragging the slider back and forth -- this helps cut down on CPU usage (it may not be noticeable, but every little bit helps!)

There is one more part of the script above that you can modify. The line audio = new Sound(); will tell the slider to control ALL the audio in the movie. You can, however, make this more specific (for example, if you have multiple audio tracks playing - or if you have multiple sliderbars). The Sound object allows for an additional parameter giving you a chance to specify a path to the audio you want to control. In this example, the audio is playing in the root timeline, so you could change that line of code to audio = new Sound(_parent); or even audio = new Sound(_root); If you had a Sprite sitting on the root named 'MyMusic', you could change that line of code to audio = new Sound(_parent.MyMusic);

The setVolume() function is what actually controls the volume of the specified Sound object. If you wanted to make a mute button, you could simply use audio.setVolume(0); or audio.setVolume(100); to turn the volume up all the way. The script above is dynamic - it grabs the position of the slider button and converts it into a percentage (based on the constraints of the sliderTrack object) and sets the volume of the Sound object to that percentage.

That essentially finished the actual volume control. If you want, go ahead and test it through the standalone player or through the browser (File Menu | Test | Test in Player (or Test in Browser).

Note: You need to make sure the Export SWF version is set to SWF5 or higher in the Export panel.

The only step left is to designing additional display elements if you want to (such as adding "0", "100" and "Volume" to give the user an indication of what the slider does ... perhaps even a little speaker icon).

After creating additional display elements, select everything (except the audio file if you've used a Soundtrack), and group everything as a single Sprite -- this isn't necessary, but it helps keep everything contained (making it easier to reposition the entire volume control).

Well, that wraps it up - I hope this was useful ... Happy SWiSH'n !