Rotating Dial

[Mike_Nicoll]

Hey guys,

I am a Senior VCD major at University of Hartford and a project we have is on interfaces and making them functional. We have designed the interface but as for flash....Im quite an amateur but Im familiar with all scripting besides this. I have a dial on the stage, I want to write a script so you can click and drag the dial around and when I off click it, it will stay where it is. Does anyone know where I could find script for this or help me out in writing it?

[Colin Holgate · Accepted solution]

Actionscript has a function called atan2(). It can take a difference in Y and a difference in X, and gives you the angle formed, in radians. MovieClips are rotated using degrees, so you have to convert from one to the other.

To know that the user has clicked on something, you add a listener to it. To know that the mouse has been moved, you listen for a move event, and to another event to know when the mouse is released.

The angle you rotate the object to could be to immediately point towards the mouse, but sometimes you want to just turn the device. If you take this code here, and put it into the time line of a new AS3 FLA and run it, you'll see how you can drag on the movieclip that gets drawn, and it will stay where it was when you let go, and continue to rotate from that position when you drag again (watch out for line breaks):


var mc:MovieClip = new MovieClip();
mc.graphics.beginFill(0xff,1);
mc.graphics.drawCircle(0,0,50);
mc.graphics.endFill();
mc.graphics.beginFill(0xff0000,1);
mc.graphics.drawCircle(40,0,5);
mc.graphics.endFill();
mc.addEventListener(MouseEvent.MOUSE_DOWN,dragcircle);
mc.x=100;
mc.y=100;
addChild(mc);
var startrotation:Number=0;
var mousestartangle:Number=0;

function dragcircle(e:MouseEvent) {
startrotation=mc.rotation;
mousestartangle=Math.atan2(e.stageY-mc.y,e.stageX-mc.x)/Math.PI*180;
stage.addEventListener(MouseEvent.MOUSE_MOVE,movecircle);
stage.addEventListener(MouseEvent.MOUSE_UP,dropcircle);
}

function movecircle(e:MouseEvent) {
mc.rotation=Math.atan2(e.stageY-mc.y,e.stageX-mc.x)/Math.PI*180-mousestartangle+startrotation;
}

function dropcircle(e:MouseEvent) {
stage.removeEventListener(MouseEvent.MOUSE_MOVE,movecircle);
stage.removeEventListener(MouseEvent.MOUSE_UP,dropcircle);
}

[kelbyuk]

Following on from this example, how would you go about adding hit areas so that when the red dot moves within a particular area, text appears in a side window.

I'm trying to adapt something like this to form a navigational element.