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!
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
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.
Copy link to clipboard
Copied
Sorry to hear that. I am hoping that the experts here have a better solution than mine.
Copy link to clipboard
Copied
Hi.
Would you mind showing us the path you want to use?
Regards,
JC
Copy link to clipboard
Copied
I want to be able to drag the green dot that follows the guide line and its movie clip
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.
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
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