Flash ipod Style Volume Controller

I am almost finished with the mp3player that I have been working on. I will make a post once it gets live on Flashden.  I just wanted to share how the volume controller works and the code with it. As you will see, I used the Math.atan2 function which basically returns the arc tangent of a point, and I used this to get the angle of where the mouse is compared to where you slide it. Click and hold over the circle and then move your mouse while still holding the mouse down to see the circle rotating. Look to my comments in my code for further explanation.

ipodVolumeController

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
//create a boolean variable for when the volume button is being pushed, and variables for the new and old rotation of that button
var buttonCircleMovement:Boolean = false;
var newAngle:Number = 0;
var oldAngle:Number = 0;
 
//create the inital volume variables, start at .5 or 50% volume
var volumePercent:Number = .5;
var currentVolume:Number = .5
 
//masks the volume tracker to what the currentVolume is times the width of the volume bar
volumeTracker.volumeBarMask.width = 80 * currentVolume;
 
//on mouse down allow the the volume to change, on mouse up make it so the volume can't change
buttonCircle.addEventListener(MouseEvent.MOUSE_DOWN, volumeOn);
buttonCircle.addEventListener(MouseEvent.MOUSE_UP, volumeOff);
 
//add event listeners for mouse movements and call the button circle move functions for the button circle
buttonCircle.addEventListener(MouseEvent.MOUSE_MOVE, buttonCircleMove);
 
//function is called when the mouse is down on the circle movieclip
function volumeOn(e:MouseEvent):void {
 
	//set the button circle movement variable to true
	buttonCircleMovement = true;
	// get the initial angle of where your mouse click was before the rotating the object
	oldAngle = Math.atan2(buttonCircle.y - mouseY, buttonCircle.x - mouseX) * 180/Math.PI;
}
 
//function is called when the mouse is up off of the circle movieclip
function volumeOff(e:MouseEvent):void {
 
	//set the button circle movement variable to false
	buttonCircleMovement = false;
}
 
//function that controls the volume bar
function buttonCircleMove(e:MouseEvent):void {
 
	//if the button circle movement variable is set to true
	if (buttonCircleMovement) {
 
		//as your mouse moves, calculate the angle by where your mouse is located
		newAngle = Math.atan2(buttonCircle.y - mouseY, buttonCircle.x - mouseX) * 180/Math.PI;
 
		//make a temporary variable hold the difference between the new and old angle
		var tempVar = (newAngle - oldAngle) - 360 * Math.round((newAngle - oldAngle) / 360);
 
		//rotate the circle to the new angle that is being calculated
		buttonCircle.rotation = newAngle;
 
		//make the old angle where the new angle is now
		oldAngle = newAngle;
 
		//get the new volume percent by adding the old percent to the temporary variable divided by 360
		volumePercent = volumePercent + tempVar / 360;
 
		//if the volume percent is greater than 1 then just make it 1
		if (volumePercent >= 1) {
			volumePercent = 1;
		}
		//if the volume percent is less than 0 then just make it 0
		if (volumePercent <= 0) {
			volumePercent = 0;
		}
 
		//make the current volume equal to the volume percent
		currentVolume = volumePercent;
 
		//changes the width of the mask for the volume bar
		volumeTracker.volumeBarMask.width = 80 * currentVolume;
 
	}
}

Cya

Tags: , ,

5 Responses to “Flash ipod Style Volume Controller”

  1. kaos says:

    VERY COOL volume controler !

  2. Eric says:

    I was wondering if you know how to stop the circle button from “jumping” to where the mouse is rather than just start moving from the mouse’s point. The way it is currently it jumps to a new rotation angle instead of taking the mouse’s point and start rotating from there.

  3. admin says:

    I will take a look at it and let you know when I figure it out, but if your in a hurry you can throw a trace statement and get the mouse positions and work from there.

  4. hi! i am just a student from a web animation class, and i just wonder if you could forward me your flash file? so that i could study it better? thanks! :)

  5. admin says:

    Hey Eloisa,

    I will try to put up the source code as soon as I can.

    Thanks,
    Scott

Leave a Reply