[RESOLVED] [MX] On Drag effect for a selector switch navigation

[brocwind]

i need to create a 'selector switch' to use as navigation on a new site. It basically needs to be very similar to the attached file, but needs to be a round dial like the timer on a microwave for example, so it has a pointer that you drag around to point at one of the available choices, which changes the page.

Has anyone ever created something similar or know how this would be done? I have no idea how to change the attached file to something that rotates around a center axis instead of just horizontally.

Thanks in advance for any help

[dawsonk]

If you want it to go in a circle, this one from senocular -- http://www.senocular.com/flash/source.php?page=5&per=25
could be adapted.
See attached...

[brocwind]

that's just what i was looking for thanks a lot, now i just got to figure out how to make it work a bit more like a selector switch.

If you see the attached jpeg, i need to make it only turn between a certain couple of degree figures e.g 0 degrees to 160 degrees and then getURL when it snaps to the selected choice.

Any idea how it could get that to work?

[dawsonk]

See attached file...

[brocwind]

that's great, nice one, how do i change the limits to specific degree values?

Just one last thing, thanks again for all your help so far, I need it to have a selector switch graphic more like the original one that extends to the middle of the circle, ideally one like the attached file that rotates around the black spot.

Could you make it work with the attached shape? I really won't be able to develop it like that myself

[dawsonk]

Updated the file.

Note that in flash 0 degrees is to the right, so the top is -90 degrees and not 0 degrees.

Below are the numbers you want to change.

var startRot = -60; // this is where the first position is located
var numOfPos = 6;  // this is the num of positions or links
var degSpacing = 20; // this is the num of degrees between the positions or links

[brocwind]

that's perfect mate thanks so much, exactly what i needed.

Where would i add the getURL actions to each link? Is there a way of making that dynamic aswell rather than just specifying it by what angle it's pointing in or something?

[dawsonk]

stop();
// establish a start position
var startRot = -60;
var numOfPos = 6;
var degSpacing = 20;
// *************************** list of URLs
var myLinks = new Array("www.flashkit.com", "www.flashkit.com", "www.flashkit.com", "www.flashkit.com", "www.flashkit.com", "www.flashkit.com")
//
var endRot = ((numOfPos-1) * degSpacing) + startRot;
var posArray = new Array();
for (var i = 0; i < numOfPos; i++) {
	posArray.push((i * degSpacing) + startRot);
}
//
knob._rotation = startRot;
//
knob.pointer.onPress = function() {
	knob.onMouseMove = function() {
		// add a mouse move event to the knob
		// 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 knob by converting angle into degrees
		this._rotation = Math.round(angle * 180 / Math.PI);
		// make sure rotates only within valid area
		if (this._rotation < 0 && this._rotation < startRot - (degSpacing / 2)) {
			this._rotation = startRot - (degSpacing / 2);
		} else if (this._rotation > 0 && this._rotation > endRot + (degSpacing / 2)) {
			this._rotation = endRot + (degSpacing / 2);
		}
	};
};
knob.onMouseUp = function() {
	// if a mouse move event, delete it on mouse up
	if (this.onMouseMove) {
		delete this.onMouseMove;
	}
	var newPos = numOfPos - 1;
	for (var i = 0; i < numOfPos; i++) {
		if (this._rotation < posArray[i]) {
			newPos = i;
			break;
		}
	}
	this._rotation = posArray[newPos];
	// **************************** put your getURL code here
	trace(newPos+": "+myLinks[newPos]);
};

[brocwind]

nice one, works perfectly, thanks a lot for all your help

cheers