animating self-drawing line

[montana321]

Anyone have any suggestions on the best way to go about animating a self-drawing line that takes several corners.

Trying to build an animation illustrating flow of electricity through a circuit which takes a very irregular, almost maze-like path.  Wasn't sure how to go about doing this.

Had been trying to motion tween it, but that was impractical.  Best way I figured out was to make a movie clip out of each straight leg of the circuit.  Animate that growing.  Then when the electricity takes a turn, make another movie clip on the next layer.  And so on until the entire circuit is lit up.  In addition to being rather tedious, it's unmanageable because of the number of wires and the layers required for each.

My other idea was a mask layer, but the shape the circuit takes is so weird I wasn't able to figure out a mask shape that I'd be able to move around create the effect of the wire growing on the layer underneath.

It's almost like I need to be able to record a brush stroke on a layer and mask with that.

Is there any feature in animate that I'm missing that would allow me to pull this off.

[Colin Holgate · Accepted solution]

The easy solution to this problem is to create a mask layer that is exactly the shape to show the final image (if the image is itself a shape line you could duplicate the layer to get the mask), then make a keyframe and in the second frame delete some of the end of the mask, so that only the first 95% of the shapes shows. Do another keyframe, and delete some more. Keep going until eventually you can't see the masked object at all.

Now select the mask frames and right-click Reverse Frames. You'll then have a perfect mask to make the line appear as if it's drawing itself.

[montana321]

I'll give that a try.  Any tricks to do I consistently so it's smooth action?

Not sure how practical this will be given the volume of wires I'm talking about (it's a circuitboard), but once you get into the groove might be okay.

Was hoping that there would be some feature buried in here that'd do it automatically.  I come form 3d where lofting along the percent of a path is routine.

However, the method I had scaling movie clips with motion tweens was an utter disaster.

[montana321]

Colin,

Worked beautifully.

Little tedious but very clean.

Thanks!

[montana321]

Do you pay a hefty price in terms of performance/hthml5 size for all those keyframes, or does it still make for a fairly lean file?

[Colin Holgate]

If you wanted to save some time and also improve HTML5 performance, you could use Classic Tweens with no custom easing, in the mask layer. Imaging you had a long straight run of needing to unmask, instead of deleting a bit, then a bit more, etc, you could do that all in one classic tween.

You can't have multiple masks going on, and the workaround that might occur to you to have a graphic that includes several lines being drawn, and have that as the mask, doesn't work in HTML5 Canvas. You have to have the mask layer changes in the timeline, not in a symbol on the timeline.