Skip to main content
Y
Yassir5E15
Known Participant
February 21, 2023
Answered

Drag along the custom line (HTML5)

  • February 21, 2023
  • 3 replies
  • 2229 views

Hi,

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

Need some help, please....

    This topic has been closed for replies.
    Correct answer Vladin M. Mitov

    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.

     

     

    3 replies

    Vladin M. Mitov
    Vladin M. MitovCorrect answer
    Inspiring
    February 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.

     

     

    - Vlad: UX and graphic design, Flash user since 1998Member of Flanimate Power Tools team - extensions for character animation
      Y
      Yassir5E15Author
      Known Participant
      February 22, 2023

      Wow, this is amazing...

      Dr Abstract
      Dr Abstract
      Known Participant
      February 28, 2023

      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 

        Colin Holgate
        Colin Holgate
        Inspiring
        February 21, 2023

        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.

        Y
        Yassir5E15Author
        Known Participant
        February 21, 2023

        not with guide layer, I need the html5 code

        kglad
        Community Expert
        kgladCommunity Expert
        Community Expert
        February 21, 2023

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

        Y
        Yassir5E15Author
        Known Participant
        February 21, 2023

        Yes, exactly.

        kglad
        Community Expert
        kgladCommunity Expert
        Community Expert
        February 21, 2023

        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.

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices