How to create a mask along a motion guide?

[Pixelysian]

Hi all

I'm pretty new to all of this, although had basic flash experience in the past. I'm trying to get my head around it all again and I'm not finding much of use online.

I have this line drawing... and I would like to create a mask so that it is revealed along the line - as if being drawn.

I know how to create a mask if it was a smooth transition from left to right, but it's not.

Please would someone provide me a step-by-step guide as to how to do this. I am assuming motion guides are in order but not sure a) how to create them and b) how to link them to a mask.

Layman's language would be great.

Thank you.

[kglad · Accepted solution]

in a layer above line_home at frame 31 or so create narrow rectangle with height = stage aligned with the left edge of the stage. at frame 89 or so add a keyframe and increase the width of your rectangle to the stage width.  between those two keyframes, right click>click add shape tween.

right click that tweened layer and click mask.  test.

adjust the frame span of the mask and masked layers and/or the frame rate to get the "speed" you want.

[Pixelysian]

Thank you kglad.

I didn't actually think that would work as it was from L to R, and I thought I would need to follow the line along and up, but it still works visually. Appreciate the help - thank you.

[kglad]

you're welcome.

[Colin Holgate]

For your interest, if you did want the reveal to go up the house, then a kink left, then diagonally up and right, up the chimney, etc, the task because much the same as animating a signature. There are a lot of video tutorials on how to do that, though some vary in their approach. But the general idea is that you would duplicate the house outline layer, make a key frame, in the new key frame delete the last bit of the line. Make another key frame, delete the last bit of the line. And so on.

Some time later you have a layer with the finished line, and another layer where the line is fully drawn, but erases itself from right to left (including going up the house and around the roof). You then reverse those frames, and make that layer to be a mask for the original layer. Lock both layers and scrub the timeline, and you'll see the outline draw itself in.

As I said, mostly for your interest, because if a left to right wipe is already good, no need to take 10 minutes to make it better.

[Pixelysian]

Thanks Colin! I actually did this before kglad's response made me retry the 'reveal' technique.

It was very laborious but at least I know what to do if a regular mask isn't possible!

Thanks!

[Colin Holgate]

In the case of the house you could use regular shape tweens to handle the long straight sections. No need to minutely delete bits of those when a 20 frame shape tween would look the same.

Something that might occur to you is that you could have a symbol that contains a layer for each leg of the reveal, so you would just hav ea handful of shape tweens in different layers, then use that symbol as the mask on the main timeline. That would work for AS3, but wouldn't work for HTML5 Canvas.

[Colin Holgate]

Some of what I just said might be tricky though, as it's one layer the shape tweening could get complex. I might try it sometime to see how it goes.