Sound Advice

If you followed all the steps in the first part of this tutorial, here's our "setup.as" so far:

AssetManager.registerBitmapDataAsset(new BitmapData(2,2,false,0xff0000),'under');
underlay.setSkin('under');
underlay.setSize(_width,_height);
underlay.move(0,0);

setDisplay(10,25,_width-20,_height-35,0x000000);

AssetManager.registerBitmapDataAsset(new BitmapData(5,5,false,0xffffff), 'over');
overlay.setSkin('over');
overlay.move(0,0);
overlay.setSize(_width,15);

btnPlay.setSkin('play_png');
btnPlay.move(0,0);
btnPause.setSkin('pause_png');
btnPause.move(0,0);
btnStop.setSkin('stop_png');
btnStop.move(17,0);
btnPrev.setSkin('prev_png');
btnPrev.move(34,0);
btnNext.setSkin('next_png');
btnNext.move(51,0);

Most media has sound. Now we're going to learn how to control that sound and also to put on a little show with it. Fisrt, control. We'll start with an all or nothing approach. We're going to add a button to turn the sound on and off. A mute button. Here's your image:

mute.png

Right click and save image to the "test" folder. Of course, add it to the "imagelist.txt" file.

Let's put it after the last button:

btnMute.setSkin('mute_png');
btnMute.move(68,0);

Open KoolMoves and save. Now you should have another button that when pushed turns the sound on and off. Which is fine. But we need more. We need a way to really control the volume. A "volume control." The volume control consists of three parts, a base, a fill, and a drag. The base is, well, the base. The fill is what shows as you change the volume. The drag is the control. So we're going to make a 3px in height red line to act as our base and fill, and a 9px X 9px black square to act as our drag. We'll position it a little bit past our buttons and about half the height of the overlay and make it 55px wide. So add this to your "setup.as":

AssetManager.registerBitmapDataAsset(new BitmapData(5,3,false,0xff0000), 'volfill');
AssetManager.registerBitmapDataAsset(new BitmapData(9,9,false,0x000000), 'vdrag');

slVolume.move(100,7);
slVolume.base.setSkin('volfill');
slVolume.base.width = 55;

slVolume.fill.setSkin('volfill');
slVolume.fill.width =55;

slVolume.drag.setSkin('vdrag|vdrag|vdrag');
slVolume.setDragProperties(0,0,55);

Do the save thing and you now have a slider to control the volume.

The "slVolume.setDragProperties" code is like much of our other code. The "(0,0,55)" part is the x,y and width. The first number pushes the drag in, the second down. Our drag is a bit off center, so we need to push it down (y) a bit. Try 1px and see if that does it. The last sets the width. You may need to make it shorter than the volume base width if you have a big drag. Also, we're not quite centered with the buttons so we need to move the whole thing up. Again, we'll try 1px:

slVolume.move(100,6);
slVolume.setDragProperties(0,1,55);

That's better. Now let add some code to distinguish between the base and the fill:

slVolume.base.alpha = .4;

This makes the volume base alpha (How opaque it is) 40%, giving us a little contrast when we move the slider. So what's next?