• Tweet

• Tweet

volume controls can be simple sound on or sound off system or a horizontal or vertical volume sliders, where a drag bar is moved on line to increase or decrease the volume of playing sound. Here we are going to create volume knob which rotates 360 degree to control sound in flash as3.

The following is an example of volume knob control what you will be creating at end of this tutorial. Try to play the sound and rotate the knob as we do in Audio control system. Note you will hear decrease or increase in volume as you rotate the knob control.

 

[Simple Knob control, Find volume control with source]

 

Create Knob volume control:

As first step in creating the volume control knob, we need to create a circle graphics which act as knob control. Open the source attached, and in the library you will find knob MovieClip with center registration point.

Note: It is important to keep the registration point center, when creating the circle MovieClip.

So this is what we have now create a circle and convert to movieclip with center registration point. Name the movieclip as “knob_mc”.

After creating the movieclip the graphics part is over next we need to write code in single frame.

Actionscript -as3 Knob control Code:

Now the functionality is to add acionscript 3 circular rotation to the knob when user rotates it. on Event MouseDown we need to start rotating the knob and end rotation as we MouseUp.

knob_mc.addEventListener(MouseEvent.MOUSE_DOWN,turn);
stage.addEventListener(MouseEvent.MOUSE_UP,endTurn );

function turn(e:Event):void
{
	stage.addEventListener(MouseEvent.MOUSE_MOVE,turn);
	var position:Number = Math.atan2(mouseY - knob_mc.y,mouseX - knob_mc.x);
	//trace(position);
	var angle:Number=(position/Math.PI) * 180;

	knob_mc.rotation = angle;

}

function endTurn(e:MouseEvent):void
{
	knob_mc.removeEventListener(MouseEvent.MOUSE_DOWN, turn);
	stage.removeEventListener(MouseEvent.MOUSE_MOVE,turn);
	knob_mc.addEventListener(MouseEvent.MOUSE_DOWN,turn);
}

Code Explanation:

The code below is to get the angle or rotation of points. click this link to similar maths and actionscript.

Math.atan2() is a built-in math function in actionscript which converts the given X,Y values in to radians, and the formula to convert radian to degree is to

divide by PI and multiply the result by 180

var position:Number = Math.atan2(mouseY - knob_mc.y,mouseX - knob_mc.x);
	//trace(position);
	var angle:Number=(position/Math.PI) * 180;

	knob_mc.rotation = angle;

so, finally the resulting angle is assigned to knob_mc.

Normalize the angle:

The angle we have assigned to “knob_mc.rotation = angle” is of range from 0 to 180 degree and negative phase, here we are going to make the angle 0 to 360 degree.

function normalizeVolume( angle:Number ):Number
{

	angle %=  360;
	if (angle < 0)
	{
		angle = 360 + angle;
	}
	//trace("::"+percentage(angle,0,360));

	return percentage(angle,0,360)/100
}

Convert angle to volume:

The normalized angle is of range 0 to 360 degree is converted from 0 to 100 and finally to range of 0 to 1 by dividing the final value by 100.

function percentage( X:Number, minValue:Number, maxValue:Number ):Number
{
	return (X - minValue)/(maxValue - minValue) * 100;
}

Loading sound with as3:

Futher to giving some actions to volume control next we are going to load external sound in Flash Actionscript instead of loading from library, The process

of loading sound is simple as we load an external SWF of image into flash.

Loading external sound is simple by creating an instance of new Sound Object and load the sound file to it, once the file is complete loading the file will

be played using the built-in function play()

var soundClip:Sound=new Sound();
var sndChannel:SoundChannel=new SoundChannel();
soundClip.load(new URLRequest("song.mp3"));
soundClip.addEventListener(Event.COMPLETE,onComplete,false,0,true);
function onComplete(evt:Event):void {
    sndChannel=soundClip.play();
}

Adjust volume with knob control as3:

We have loaded the external sound and volume knob control is ready next is to control the sound volume using SoundTRansform.

if(sndChannel!=null){
	var st:SoundTransform = new SoundTransform(normalizeVolume(angle));
	sndChannel.soundTransform = st
}

Full Actionscript code:

import flash.media.SoundTransform;

knob_mc.addEventListener(MouseEvent.MOUSE_DOWN,turn);
stage.addEventListener(MouseEvent.MOUSE_UP,endTurn );

function turn(e:Event):void
{
	stage.addEventListener(MouseEvent.MOUSE_MOVE,turn);
	var position:Number = Math.atan2(mouseY - knob_mc.y,mouseX - knob_mc.x);

	var angle:Number=(position/Math.PI) * 180;

	if(sndChannel!=null){
		var st:SoundTransform = new SoundTransform(normalizeVolume(angle));
		sndChannel.soundTransform = st
	}
	knob_mc.rotation = angle;

}

function endTurn(e:MouseEvent):void
{
	knob_mc.removeEventListener(MouseEvent.MOUSE_DOWN, turn);
	stage.removeEventListener(MouseEvent.MOUSE_MOVE,turn);
	knob_mc.addEventListener(MouseEvent.MOUSE_DOWN,turn);
}

function normalizeVolume( angle:Number ):Number
{

	angle %=  360;
	if (angle < 0)
	{
		angle = 360 + angle;
	}

	return percentage(angle,0,360)/100
}

function percentage( X:Number, minValue:Number, maxValue:Number ):Number
{
	return (X - minValue)/(maxValue - minValue) * 100;
}

var soundClip:Sound=new Sound();
var sndChannel:SoundChannel=new SoundChannel();
soundClip.load(new URLRequest("song.mp3"));
soundClip.addEventListener(Event.COMPLETE,onComplete,false,0,true);

function onComplete(evt:Event):void {
    sndChannel=soundClip.play();
}

Note: Add song.mp3 in the same folder as where swf is placed.

[Download Source]