Draggable slider on a curved path

Hi.

Here is a basic solution.

Javascript:

var _this = this;
var ok = _this.BTN_OK;

createjs.Touch.enable(stage);
stage.enableMouseOver();
_this.loop = false;

ok.hit.on("mousedown", function(e)
{
	_this.canMove = true;
});

ok.on("pressmove", function(e)
{		
	if (_this.canMove)
		_this.play();
});

ok.hit.on("mouseout", function(e)
{
	_this.canMove = false;
	_this.stop();
});

stage.on("stagemouseup", function(e)
{
	_this.canMove = false;
	_this.stop();
});

_this.stop();

Please notice that I added a bigger and invisible hit area (a Button instance with a circle shape in the hit frame) inside of the ok instance so the user will be less frustrated when the cursor accidentally leaves the drag area and the animation stops.

Anyway, although the code seems to solve this particular case it won't still have a real drag feeling. To achive an ideal feeling it would be necessary to come up with a more complex solution in which you would have to take into account the actual angles between the dot and the path.

I hope this helps and please let us know if you have further questions.

Regards,

JC

Sorry to hear that. I am hoping that the experts here have a better solution than mine.