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.
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: Actionscript 3, Development, Flash













VERY COOL volume controler !
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.
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.
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!
Hey Eloisa,
I will try to put up the source code as soon as I can.
Thanks,
Scott