Tutorial: Basic Masking in Flash

Many times I see on the Internet, flashy animations that imply a cool wiping effect that reveals some part of picture that wasn't there before. This is known as the "masking" effect which is pretty easy to learn and master. So today we'll just make a simple menu that is originally not present on the screen and then reveals itself upward to to reveal the entire menu.

1. So I began by making 5 labels for a conventional Portfolio website. I then made each one of the labels into its own separate button.



2. Then I created a new layer, and on that layer I made a small black rectangle located just beneath the "Contact Me" button and was as wide as the longest word "Example Art." When creating the rectangle, I disabled the outline feature because its utterly useless for masking., Here's a picture of what I did:


3. Next, create a new keyframe for both layers on the 1oth frame (it doesn't necessarily have to be on the 10th frame, but this is just an example). On that keyframe, use the white selection tool to highlight the top two corners on the black rectangle and use the UP arrow to drag the corners all the way past the "Home" button. This is how it looks:



4. Now select the rectangle frames, and Create a Shape Tween. Then on that same layer, right click and choose Mask. Now hit play and marvel at your work.



For good measure, I add in another layer ontop of the rectangle layer, and added a keyframe on the 10th frame. Afterwards, I opened the Actions panel and typed in "stop();". Of course this is a menu so no loop is necessary and instead we need it to stop so we can navigate.

Congrats, you've finished now challenge yourself by making a cup of water with a straw, and make the water decrease in the glass.