Highlighted

Draggable slider on a curved path

Explorer ,
Oct 26, 2018

Copy link to clipboard

Copied

I used the following example as a starting point: Slider to control timeline

However my slider needs to travel along a curved path. In my original version that wasn't interactive the slider simply animated along the path using a guide path.

So using the linear example above I can control the movie clip using a second slider, but obviously that is constrained to moving along the x axis only, and with a rising curved bath the controlling slider and the animated sliders diverge.

What is the best way to stop this from happening?

My initial thought was to make the controlling slider invisible and then when released it would snap to the position of the visible slider on the y axis, but I have zero idea of how to make this happen.

If there is a better way of doing this I'd be happy to use that, but please bear in mind that I know almost zero about javascript, so if I have to have to modify something existing I'll need it spelled out for me.

Thanks!

TOPICS
Discussions

Views

864

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Draggable slider on a curved path

Explorer ,
Oct 26, 2018

Copy link to clipboard

Copied

I used the following example as a starting point: Slider to control timeline

However my slider needs to travel along a curved path. In my original version that wasn't interactive the slider simply animated along the path using a guide path.

So using the linear example above I can control the movie clip using a second slider, but obviously that is constrained to moving along the x axis only, and with a rising curved bath the controlling slider and the animated sliders diverge.

What is the best way to stop this from happening?

My initial thought was to make the controlling slider invisible and then when released it would snap to the position of the visible slider on the y axis, but I have zero idea of how to make this happen.

If there is a better way of doing this I'd be happy to use that, but please bear in mind that I know almost zero about javascript, so if I have to have to modify something existing I'll need it spelled out for me.

Thanks!

TOPICS
Discussions

Views

865

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 26, 2018 0
Adobe Employee ,
Oct 29, 2018

Copy link to clipboard

Copied

You said that you do not know JavaScript, but I am posting this link here javascript - How to create a curved slider? - Stack Overflow​ hoping that someone can help you integrate that with your animation.

Thanks,

Preran

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 29, 2018 0
Explorer ,
Oct 29, 2018

Copy link to clipboard

Copied

Thanks. Unfortunately my curved path is more complex than the one in the example, and my understanding of JavaScript is far too basic to be able to see if the example linked to can be modified to my needs.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 29, 2018 0
Adobe Employee ,
Oct 30, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 30, 2018 0
Adobe Community Professional ,
Oct 30, 2018

Copy link to clipboard

Copied

Hi.

Would you mind showing us the path you want to use?

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 30, 2018 1
New Here ,
May 08, 2020

Copy link to clipboard

Copied

I want to be able to drag the green dot that follows the guide line and its movie clip

Screen Shot 2020-05-08 at 1.26.32 PM.pnghttps://we.tl/t-Eq5IxCIExs 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 08, 2020 0
Adobe Community Professional ,
May 10, 2020

Copy link to clipboard

Copied

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.

JoãoCésar_0-1589119711590.png

 

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

 

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 10, 2020 0
JES2020 LATEST
New Here ,
May 11, 2020

Copy link to clipboard

Copied

TKS so much, it works very well, just a little detail the touch devices do not recognize the mouseout, after you touch the button and if you keep the touch it does not matter where the continuous playback is placed until the end, which would be the equivalent of mouseout for touch

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 11, 2020 0