How to Tween a Mask Along a Motion Guide
Masking in Flash is easy to implement. Take an existing layer with artwork, create a new layer above it, draw your mask shape, then right-click/Command-click and choose Mask. Done. Include as many layers as you like in the masked stack by dragging additional layers slowly up toward the stack then slightly right until they snap into place. Lock and unlock layers to show and hide the mask effect.
Your mask shape reveals the artwork beneath it and hides everything else. This works with imported photos, shapes and symbols, text fields (remember to embed font outlines if text is dynamic or input), and even video. In fact, you can add keyframes to the mask’s layer in order to tween it (shape tweening if the mask is a shape; motion tweening if the mask is a symbol). But what if you want to tween your mask along a motion guide? Select your mask layer and click the Add Motion Guide button at the bottom left of the Timeline panel: nothing happens. Interesting, right? Where’s that motion guide layer? Is it possible to tween masks in this way? Well, let’s see.
An answer, short and sweet
Select the mask shape and convert it to a symbol if it isn’t one already. A graphic symbol is fine (Modify > Convert to Symbol > Graphic). Now select the mask again and convert it to a symbol a second time — again, a graphic. At this point, you have a nested graphic symbol that is still part of a mask layer. Double click this symbol to enter its timeline. Inside this timeline, click the Add Motion Guide button and tween the mask along your motion guide path as if it were a normal symbol — which it is, in this timeline. When finished, step back out to the main timeline and extend the mask’s span of frames long enough to let its inner tween play out.
How it works
This is a simple case of thinking outside the box. Technically speaking, tweening a mask along a motion guide is not possible. But given the nature of masks, which can be nested symbols, the same effect is achievable. If you’re not comfortable with ActionScript, motion guides provide a powerful way to animate along complex twists and turns. Combined with masking, the possibilities are that much more engaging.
December 14th, 2006 at 11:46 am
I would have done a tiny bit of code personaly. Make a seperate object with the desired motion guide and set it’s alpha to 0. Make a function that on enter frame set the position of the mask = to the pos of the guide object. Can also set the rotation each time as well if you need. Same effect but easier to edit, i think.
December 14th, 2006 at 12:29 pm
Lupos,
That’s a cool idea! I wasn’t thinking in terms of ActionScript when I wrote that entry, but your looping suggestion is great.