Skip to main content
Swsubs
Participant
April 13, 2022
Answered

How can I create a theatre marquee animation using paths and dash lines?

  • April 13, 2022
  • 2 replies
  • 651 views

I would like to create a looping animation that has dots moving along a rectangular path with rounded corners.  I have seen a tutorial showing how to do this with an open path that has 90 degree angles. The continuous path was drawn with the Pen tool and then made into a dash line. The line was converted to a symbol that was given a number of frames (10). A Shape Tween was applied. A keyframe was created at the end frame. Then the starting point of the keyframed line was shifted by a distance equal to the length of the dash plus the space.  It works pretty well.  But when I tried to do it with a rounded corner rectangle or a series of horizontal and vertical straight lines joined by rounded corners the animation only affetec the first line.  It's as if they were a series of disconnected separate lines.  I don't know how to make a single continuous path. There is no "Join" function in Animate as in Illustrator.  I any case I would appreciate suggestions on how to create the desired marquee effect whther by using dash lines or some other - hopefully non-laborious - method.

    This topic has been closed for replies.
    Correct answer _keyframer

    I made a quick and painless tutorial specifically for you on this technique. Not sure it's exactly what you're looking for but it should at least provide a totally different thought process. Strokes could work but can be messy/finicky. My solution takes advantage of a simple nested animation involving just 2 keyframes. If you go this route, you can always adjust the timing of the blicking lights by inserting or removing frames inside the nested symbol and then adjusting the frame they start on, on the parent timeline. Here's a video that walks you through it... and a link to the source file...

     

    https://youtu.be/zJwk6AjfbRc

     

     

    2 replies

    _keyframer
    Community Expert
    _keyframerCommunity ExpertCorrect answer
    Community Expert
    April 14, 2022

    I made a quick and painless tutorial specifically for you on this technique. Not sure it's exactly what you're looking for but it should at least provide a totally different thought process. Strokes could work but can be messy/finicky. My solution takes advantage of a simple nested animation involving just 2 keyframes. If you go this route, you can always adjust the timing of the blicking lights by inserting or removing frames inside the nested symbol and then adjusting the frame they start on, on the parent timeline. Here's a video that walks you through it... and a link to the source file...

     

    https://youtu.be/zJwk6AjfbRc

     

     

    Animator and content creator for Animate CC
    n. tilcheff
    Legend
    April 14, 2022

    Love the tutorial, Chris!

     

    Nick - Character Designer and Animator, Flash user since 1998 | Member of the Flanimate Power Tools team - extensions for character animation
    n. tilcheff
    Legend
    April 13, 2022

    This video may give you some ideas.

     

    Nick - Character Designer and Animator, Flash user since 1998 | Member of the Flanimate Power Tools team - extensions for character animation
    Swsubs
    SwsubsAuthor
    Participant
    April 13, 2022

    Thanks for your reply.  I've seen this one too and it's the one that I had in mind when I said "hopefully not too laborious".  Ultimately I'll fall back on this if something easier doesn't come up.