Drag along the custom line (HTML5)

[Yassir5E15]

Hi,

How to make movieclip (red circle) drag along the path (black line), as shown in picture below? HTML5.

Need some help, please....

[kglad]

you want the user to drag the red disk and have its path restricted to the line?

[Yassir5E15]

Yes, exactly.

[kglad]

there, at least, 3 ways i can think of to do that, but none of them are easy.

i think the easiest would be to create a movieclip with the disk animating across the timeline with its path restricted to that line.  there are several ways to do that, including one suggested by @Colin Holgate .

once that's done, you could encode drag and drop for the disk based on the mouse distance from the red disk and determine red disk frame based on that distance.

[Yassir5E15]

Oh, it's not helping me... but thanks anyway

[kglad]

you're welcome, but what was wrong with zim example?

[Yassir5E15]

I'm on it... this is new for me, it looks like simple but I have to learn it...

[kglad]

if you have an problems using the zim tutorial, let us know.

[Yassir5E15]

How to replace squiggle to custom line (movieclip) in this tutorial = https://codepen.io/zimjs/pen/WNMXerV

[kglad]

check the zim squiggle api which is used to define the path.

[Colin Holgate]

Select the line and do a Cut. Right-click on the layer that the circle is in, and choose Add Classic Motion Guide. The circle layer will then show indented. Click on the guide layer that was created, and Paste, to put the path line into that layer.

Now create a later frame, say at frame 24, so that the two layers are one second long. Make the last frame of the circle layer be a keyframe, then right-click in the span for that layer and choose Create Classic Tween.

Go to the first frame oc the circle layer, and move the circle until it snaps to the start end of the line. Go to the last keyframe of the circle layer, and drag the circle until it snaps to the other end of the line.

The circle should now animate along that line.

[Yassir5E15]

not with guide layer, I need the html5 code

[Vladin M. Mitov · Accepted solution]

Hi,

Here is a ZIM tutorial about how to drag an object, restricted to an arbitrary Bezier spline.

If you are not familiar with ZIM library, here is a tutorial how to start with Animate + ZIM.

[Yassir5E15]

Wow, this is amazing...

[Dr Abstract]

ZIM has industry-leading drag along path.  See https://zimjs.com/nio for more features.  This was in ZIM NIO (version 9) we have now passed that by six versions so there are more features since then.  The general format is:

new Circle().addTo().animate({
  props:{path:new Squiggle().center()},
  drag:true
}
Squiggle() can accept an SVG path or you can make one here https://zimjs.com/paths - note the docs on Squiggle https://zimjs.com/docs.html?item=Squiggle - for a closed loop you can use Blob.

Here is an app that uses the dragging on path https://zimjs.com/groovity 

[Yassir5E15]

Hi, @Dr Abstract ... I do hope you post more tips & tutorials about Adobe Animate + ZIM

[kglad]

there are scores of tutorials.  visit the zim website.