Circular Slider in ActionScript 3 - actionscript-3

Question

I'm hoping to get a round slider into ActionScript, very similar to what this page shows:
It's going to ultimately be altering the hue of an object (returning a CMY value), however if it just spits out the degree I can totally work with that. If you know of any resources, tutorials, pseudocode, or a snippet with this functionality, I would hugely appreciate it. Thanks!

Answer 1

Below is my solution to this problem.
It's worth noting that angles in Flash are handled in radians instead of degrees, which is why you'll notice the conversion methods in the code. Personally, I find setting angles in degrees much easier to visualize and understand, which is why the CircleSlider constructor accepts a value in degrees and why the CircleSliderEvent class dispatches both degrees and radians.
Use Case:
var circleSlider:CircleSlider = new CircleSlider(100, 270);
circleSlider.x = stage.stageWidth / 2;
circleSlider.y = stage.stageHeight / 2;
circleSlider.addEventListener(CircleSliderEvent.CHANGE, circleSliderEventHandler);
addChild(circleSlider);
function circleSliderEventHandler(event:CircleSliderEvent):void
{
trace(event.degrees, event.radians);
}
CircleSlider Class:
package
{
//Imports
import flash.display.Sprite;
import flash.display.Shape;
import flash.events.Event;
import flash.events.MouseEvent;
//Class
public class CircleSlider extends Sprite
{
//Properties
private var mRadius:uint;
private var mAngle:Number;
private var mThumb:Sprite;
//Constructor
public function CircleSlider(radius:uint, degrees:Number)
{
mRadius = radius;
mAngle = degrees;
init();
}
//Init
private function init():void
{
createCircle();
createThumb();
positionThumb(degreesToRadians(mAngle));
}
//Create Circle
private function createCircle():void
{
var circle:Shape = new Shape();
circle.graphics.lineStyle(4.0, 0xFFDDDD, 1.0);
circle.graphics.drawCircle(0, 0, mRadius);
addChild(circle);
}
//Create Thumb
private function createThumb():void
{
mThumb = new Sprite();
mThumb.graphics.beginFill(0xFF2222, 1.0);
mThumb.graphics.drawCircle(0, 0, 10);
mThumb.graphics.endFill();
mThumb.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownEventHandler);
addChild(mThumb);
}
//Mouse Down Event Handler
private function mouseDownEventHandler(event:MouseEvent):void
{
mThumb.addEventListener(Event.ENTER_FRAME, enterFrameEventHandler);
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpEventHandler);
stage.addEventListener(Event.MOUSE_LEAVE, mouseUpEventHandler);
}
//Enter Frame Event Handler
private function enterFrameEventHandler(event:Event):void
{
positionThumb(Math.atan2(mouseY, mouseX));
}
//Mouse Up Event Handler
private function mouseUpEventHandler(event:MouseEvent):void
{
mThumb.removeEventListener(Event.ENTER_FRAME, enterFrameEventHandler);
stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpEventHandler);
stage.removeEventListener(Event.MOUSE_LEAVE, mouseUpEventHandler);
}
//Position Thumb
private function positionThumb(radians:Number):void
{
mThumb.x = Math.cos(radians) * mRadius;
mThumb.y = Math.sin(radians) * mRadius;
mAngle = radiansToDegrees(radians);
dispatchEvent(new CircleSliderEvent(CircleSliderEvent.CHANGE, mAngle, radians));
}
//Degrees To Radians
private function degreesToRadians(degrees:Number):Number
{
return degrees * Math.PI / 180;
}
//Radians To Degrees
private function radiansToDegrees(radians:Number):Number
{
return radians * 180 / Math.PI;
}
//Set Angle
public function set angle(degrees:Number):void
{
positionThumb(degreesToRadians(degrees));
}
//Get Angle
public function get angle():Number
{
return mAngle;
}
}
}
CircleSliderEvent Class:
package
{
//Imports
import flash.events.Event;
//Class
public class CircleSliderEvent extends Event
{
//Constants
public static const CHANGE:String = "change";
//Properties
public var degrees:Number;
public var radians:Number;
//Constructor
public function CircleSliderEvent (type:String, degrees:Number = NaN, radians:Number = NaN)
{
super(type);
this.degrees = degrees;
this.radians = radians;
}
//Clone
public override function clone():Event
{
return new CircleSliderEvent (type, degrees, radians);
}
//To String
public override function toString():String
{
return formatToString("CircleSliderEvent", "type", "degrees", "radians");
}
}
}