The Creative Toolbox: Animating Masks in Flash and LiveMotion

Creating and animating masks in your favorite vector animation tool can produce some intriguing effects.
Written by George Penston on March 21, 2001
Categories: Web/Mobile, Features

Related Reading

Now that you have successfully created a mask in Flash, let's add some intrigue to the mix by animating the layer mask. It may be easier to animate the targeted layer before actually converting it to a mask layer, but there are no rules regarding when the animation should occur. The answer is, whatever works best for you. For this discussion, let's use the mask layer we just created.

To animate the mask layer, follow these steps:

  1. Unlock your mask layer and the layer being masked in order to edit them.
  2. If your mask object is not a symbol, go ahead and convert it to one (when making a motion tween the object must be a symbol): Choose Insert > Convert to Symbol from the main menu while you have the object selected. Name your symbol something relevant and select Graphic for the symbol type.

  3. While you're still on the mask layer select Frame 20 in the Timeline. Then select Insert > Keyframe from the main menu. Move your mask object to the position where you wish the animation to end. Be sure to move the object so that its motion tween path will pass over the object below.

  4. Select anywhere in between the two keyframes of the mask layer and choose Modify > Frame. Select Motion from the Tweening menu.
  5. Now select Frame 20 for the layer being masked in the Timeline and select Insert > Frame from the main menu. This should be directly below the Keyframe you just inserted in the timeline. This step is necessary to ensure that the objects below your mask will remain visible.

  6. Lock the layers back down and preview your handiwork.

Once you feel confident with these steps, you can start adding more levels of complexity. Try scaling the animated mask as well as adding more than one layer being effected by the mask layer.

1

Thanks!

Maybe you should write Macromedia's product manuals - very easy to follow tutorial!

2

very nice to see quality content

Thank you for providing quality content in an area that matters.

3

Masking

Can't seem to still see the spotlight just the masked effect. How do I find out what I am doing wrong

Post a Comment

  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <p> <div> <br> <center> <img> <h2>
  • Lines and paragraphs break automatically.
  • Use <!--pagebreak--> to create page breaks.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Copy the characters (respecting upper/lower case) from the image.