• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Draggable slider on a curved path

Explorer ,
Oct 26, 2018 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!

Views

1.2K

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
community guidelines
Adobe Employee ,
Oct 29, 2018 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

Votes

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
community guidelines
Explorer ,
Oct 29, 2018 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.

Votes

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
community guidelines
Adobe Employee ,
Oct 30, 2018 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.

Votes

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
community guidelines
Community Expert ,
Oct 30, 2018 Oct 30, 2018

Copy link to clipboard

Copied

Hi.

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

Regards,

JC

Votes

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
community guidelines
New Here ,
May 08, 2020 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 

Votes

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
community guidelines
Community Expert ,
May 10, 2020 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

 

Votes

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
community guidelines
New Here ,
May 11, 2020 May 11, 2020

Copy link to clipboard

Copied

LATEST

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

Votes

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
community guidelines