[AS2] Drag/rotate functionality for a navigation wheel

[ildu]

Hi everybody !

I'm trying to create a navigation system that relies on the user dragging on a wheel in order to rotate it into a specific position:

http://ilariniitamo.com/gear/gear2.html

The problem I have is that whenever a drag is initiated, the wheel jumps to a position where it points the zero-rotation point (indicated in the example by the red dashline) at the mouse direction. Whenever the drag is ended, the wheel stays at the position where the mouse has left it, which is correct. However, when another drag is initiated, the same thing reoccurs - the dashed red line jumps to point towards the direction of the mouse. In short, I need the wheel to drag/rotate directly from the position where it was previously left or where it is by default. It shouldn't matter from which position the user drags the wheel.

The code is located in the script of the wheel-movieClip, and is as follows:

onClipEvent (enterFrame){
	this.onPress = function(){
		// when the mouse presses on the wheel
		this.onMouseMove = function(){
			// get an angle to the mouse using atan2 (gets radians)
			var angle = Math.atan2(this._parent._ymouse-this._y,this._parent._xmouse-this._x);
			// apply rotation to wheel by converting angle into degrees
			this._rotation = angle*180/Math.PI;
		}
	}
	this.onMouseUp = function(){
		// if a mouse move event exists, delete it on mouse up
		if (this.onMouseMove) delete this.onMouseMove;
	}
}

I can see how lacking the code is, and I can see why it does what it does. I just can't figure out how to implement it so that the wheel rotation is independent from the position of mouse, while it is dragged.

Thanks in advance! Please ask if anything is unclear in the description of the problem.

[sillyfishyboy@]

essentially all you need to do is once the wheel has been moved assign the angle of the movieclip to a variable and then when the wheel is dragged again add this new angle to the old one. or just rather than setting the angle as an absolute simply add the new angle to it so rather than

this._rotation = angle*180/Math.PI;

try:

this._rotation += angle*180/Math.PI;

[ildu]

Thanks for responding!

I was at work earlier so I couldn't get back to you any earlier. I managed to solve the problem on my own. By chance, I found an alternate way of doing it, which also happened to solve what would've been my next question . That is, adding frictional deceleration to the wheel.

Here's the code:

onClipEvent(load) { 
    damp = .8; //friction
    rot = 0; //rotation
    accr = 0; //rotation speed
}

on(press) {
    dragging = true;
    //find mouse y coordinate in relation to wheel origin
    a = _root._ymouse - this._y;
    //find mouse x coordinate in relation to wheel origin
    b = _root._xmouse - this._x;
    //using arctangent find the spot of rotation (in degrees)
    oldRot = Math.atan2(a,b)*180/Math.PI;
}

on(release, releaseOutside) {
    dragging = false;
}

onClipEvent(enterFrame) { 
    if (dragging) {
        //find mouse y coordinate in relation to wheel origin
        a = _root._ymouse - this._y;
        //find mouse x coordinate in relation to wheel origin
        b = _root._xmouse - this._x;
        //using arctangent find the spot of rotation (in degrees)
        rot = Math.atan2(a,b) * 180 / Math.PI;
        
        //use current rotation and previous rotation
        //to find acceleration
        //averages the acceleration with the 
        //previous accelration for smoother spins
        //accr = ((rot - oldRot) + accr) / 2;
        if (rot-oldRot > 160 || rot-oldRot < -160){
        accr = ((0)+accr);
        }else{
        accr = ((rot-oldRot)+accr)/2;
        }
        //apply the acceleration to the rotation
        this._rotation += accr;
        //remember current rotation as old rotation
        oldRot = rot;
    }
    else {
        this._rotation += accr;
        if (Math.pow(accr, 2) > .0001 ) {
            accr *= damp;
        }
        else{
            accr = 0;
        }
    }
} 

Thanks a lot anyway for replying .

I am currently wrestling with another issue, though. There are numbers positioned at periodic angular intervals on the wheel (every 11.25 degrees). There's also a hollow box that the numbers race through when the wheel is spun. I'm trying to now implement a system where once the wheel stops after a spin, it would always automatically navigate to the nearest number (so that said number would align inside the hollow box). It's pretty much exactly how the timepicker-module on the iPhone works, if you happen to be familiar with it.

Maybe it's best I provide a link to what I have so far:
http://www.ilariniitamo.com/gear/gear3.html

I probably have to do something where I check whether the current rotation of the wheel is a 32th fraction (11.25 degrees) of 360 or not. If it isn't, it checks and executes the shortest distance to a rotation value that does fulfil the fraction requirement. I also need to somehow figure out how the value currently in the hollow box will be fetched for actual use.

Anywho, If anyone has any ideas about this part, I would be very grateful if you could share. Meanwhile, I'm gonna need to rethink it.

[Proditus]

So this is an old thread, but it's one with content I've been using and I could use some help.

Going by the code here, I'd like a way to navigate the timeline based on the rotation of the dial with the script. I've experimented around with this quite a bit, but I just can't seem to get it. I'm an absolute beginner at this with no idea what to do, so that's part of the problem.

The goal is to have the scene switch to a different frame every 11.25 degrees. This little check function whatever thing here doesn't give me any errors, but it just doesn't work either.

if (rot >= 11.25 && rot < 22.5){
     gotoAndStop(2);
} 

Then lather, rinse, and repeat for every increment after that point until you get to 360, jumping forward 1 frame each time.

My problem seems to be almost identical to the last one posted above, which went unresolved a few years back. If anyone has any ideas, they would be greatly appreciated because uni assignments are difficult. If you'd like me to go ahead and make a new thread because this one is too old, I can do that as well, but I figured it would be easier to bump this one since the relevant information and code are already posted in here.

[Nig 13]

Post FLA file

[Proditus]

Here you go. Not much in there except for a wheel that turns with the code ildu posted and a few layers that are waiting to be used via the timeline. I had to delete a lot of unused stuff to fit the upload limit, but that really shouldn't matter.

[Proditus]

Bump for fear of failure if I can't get this to work.

[Nig 13]

Please don't bump after such short time, and the file is in CS5.5, mind downsaving it to CS5 or CS4?

[hjobby]

Hi people,

It would be great if this could work. I have noticed that ildu's issue has not been addressed.

The rotation works fine, but is there a solution to snapping to a particular angle when you release? (lets say every 20 degrees for example).

I can see how proditus' if statement should work. I've tried to use it on release but it doesn't work.

Can anyone suggest how this snapping to an angle could work?

[hjobby]

Isn't there anyone out there who could help with this? come on flash people i know someone out there has the power!