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

Drag along the custom line (HTML5)

  • February 21, 2023
  • 3 replies
  • 2239 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...

      kglad
      Community Expert
      kgladCommunity Expert
      Community Expert
      March 1, 2023

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


      there are scores of tutorials.  visit the zim website.

        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