Actionscript:
-
var angOffset:Number = 0;
-
var percent:Number = 0;
-
-
var dial:Sprite = Sprite(addChild(new Sprite()));
-
with(dial.graphics) lineStyle(1, 0x000000), beginFill(0xCCCCCC), drawCircle(0,0,100), lineTo(0,0);
-
dial.x = stage.stageWidth / 2;
-
dial.y = stage.stageHeight / 2;
-
-
dial.addEventListener(MouseEvent.MOUSE_DOWN, onDialDown);
-
stage.addEventListener(MouseEvent.MOUSE_UP, onStageUp);
-
function onDialDown(evt:MouseEvent):void {
-
calcOffset();
-
dial.addEventListener(Event.ENTER_FRAME, onRotateDial);
-
}
-
-
function calcOffset():void {
-
angOffset = Math.atan2(mouseY - dial.y, mouseX - dial.x) / Math.PI * 180 - dial.rotation;
-
}
-
-
function onRotateDial(evt:Event):void {
-
dial.rotation = Math.atan2(mouseY - dial.y, mouseX - dial.x) / Math.PI * 180 - angOffset;
-
percent = dial.rotation;
-
if (percent <0){
-
percent += 360;
-
}
-
percent /= 360;
-
// range 0 - 1
-
trace(percent);
-
}
-
-
function onStageUp(evt:Event):void {
-
dial.removeEventListener(Event.ENTER_FRAME, onRotateDial);
-
}
The above shows the meat of what you need to create some kind of dial UI... this would also work well if you need to create an interactive turntable (record scratching etc...).
Everytime I needed to create dials for UI, the client wanted left -> right mouse motion rather than a circular... like what you see in Reason. Someone recently asked me how to do a circular motion style dial and this is the technique I came up with.