Circular Slider in 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");
        }
    }
}