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

Drag along the custom line (HTML5)

Explorer ,
Feb 21, 2023 Feb 21, 2023

Copy link to clipboard

Copied

Hi,

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

Need some help, please....

draggg.jpg

Views

1.4K

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

correct answers 1 Correct answer

Engaged , Feb 21, 2023 Feb 21, 2023

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.

 

 

Votes

Translate

Translate
Community Expert ,
Feb 21, 2023 Feb 21, 2023

Copy link to clipboard

Copied

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

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 ,
Feb 21, 2023 Feb 21, 2023

Copy link to clipboard

Copied

Yes, exactly.

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 ,
Feb 21, 2023 Feb 21, 2023

Copy link to clipboard

Copied

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.

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 ,
Feb 21, 2023 Feb 21, 2023

Copy link to clipboard

Copied

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

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 ,
Feb 21, 2023 Feb 21, 2023

Copy link to clipboard

Copied

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

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 ,
Feb 21, 2023 Feb 21, 2023

Copy link to clipboard

Copied

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

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 ,
Feb 22, 2023 Feb 22, 2023

Copy link to clipboard

Copied

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

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 ,
Feb 22, 2023 Feb 22, 2023

Copy link to clipboard

Copied

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

Here we feature animation and drag along a path. ZIM has both right out of the box! Hopefully the emoji is the right way for you - different systems ...

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 ,
Feb 22, 2023 Feb 22, 2023

Copy link to clipboard

Copied

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

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
LEGEND ,
Feb 21, 2023 Feb 21, 2023

Copy link to clipboard

Copied

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.

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 ,
Feb 21, 2023 Feb 21, 2023

Copy link to clipboard

Copied

not with guide layer, I need the html5 code

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
Engaged ,
Feb 21, 2023 Feb 21, 2023

Copy link to clipboard

Copied

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.

 

 

- Vlad: UX and graphic design, Flash user since 1998
Member of Flanimate Power Tools team - extensions for character animation

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 ,
Feb 21, 2023 Feb 21, 2023

Copy link to clipboard

Copied

Wow, this is amazing...

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 ,
Feb 28, 2023 Feb 28, 2023

Copy link to clipboard

Copied

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 

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 ,
Feb 28, 2023 Feb 28, 2023

Copy link to clipboard

Copied

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

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 ,
Feb 28, 2023 Feb 28, 2023

Copy link to clipboard

Copied

LATEST

there are scores of tutorials.  visit the zim website.

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