SEO Packages

Animated Mask Using Flash

October 29, 2011EditorFlash, Web Design ToolsComments Off on Animated Mask Using Flash
VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)

Making an animated mask in Flash is a simple and useful operation that can allow quite complex and breathtaking animation sequences to be produced with a little imagination and ingenuity. For this tutorial I will make a simple animation that unmasks a text header.Here it goes then =)

Step 1:

Create a new movie from the File menu, and then select New Symbol from the Insert menu. Make it a Graphic symbol and name it “Header”. Now use the Text Tool to create a title header inside the symbol. (It doesn’t matter what font, size or colour you use.)

Step 2:

Return to Scene 1 by clicking on the scene 1 button located above the timeline. Select Library from the Window menu, and you should see your Header symbol. Highlight the symbol and drag it onto your stage area. Centre it in your stage.

Step 3:

Select frame 30 of layer 1 on the timeline, right-click and select Insert frame. Now make another Graphic symbol as before and name it “Black Hole” (I’ll explain later.) In this symbol I want you to create a black rectangle using the Rectangle tool. Make it about the length and height of your text header. Now return back to Scene 1 again.

Step 4:

Add another layer by clicking the Insert Layer button in the bottom left hand corner of the timeline, and select the first frame of this layer. Now drag the Black hole symbol from the library into the stage. (You may have to open the library window again).

Step 5:

Now position the black hole symbol so that it covers your header symbol, you may find that it is too small. If it’s not too small, skip onto step 7.

Step 6:

With the Black Hole symbol selected, select Transform from the Modify menu, and then select Scale from the fly-out that should appear. Now adjust the edges of the rectangle so that it covers the entire text header behind it. Click on the stage outside of the rectangle to complete the transform.

Step 7:

Now Right-click on the Timeline layer headers where it actually says “Layer 2” and select Mask. You should no longer see the Black Hole symbol. (It is important at this point to make you understand that the Black rectangle is acting as a hole in the layer through which you may see through. Imagine a white piece of paper with a rectangle cut out of it and placed over something. That is how the black area of the rectangle is acting now. This concept of masking is very common on the graphics industry.)

Step 8:

For the purposes of the next few steps it is wise to reverse step seven, and unmask the layer. This allows us to see what we are doing with the mask. You will see to click the padlocks next to the two layers in the timeline. Deselect them so that you can work on the layers again.

Step 9:

Right-click frame 30 of layer two and select Insert Keyframe. Select the keyframe in frame 1 of the same layer and with the black hole symbol now selected, move it so that the far right side of the rectangle rests against the left edge of your header. (If you hold down shift while you move it, it will move on only one axis.)

Step 10:

Right-click in the space between frames 1 and 30 on layer two, and select create motion tween. Once again right-click on the Layer two header and select Mask.

Step 11:

Eureka!! Your animated Black Hole symbol is now acting as an animated mask that unveils the Header symbol.

This is a very simple example, but if you think about it, the same technique can be applied to infinite effect. There is nothing to say a mask has to be rectangular, or that it has to stay the same shape while it is being used. This technique could be used to create text that writes itself on the screen as if by an invisible pen, create screen transitions or even make a page border made of vines that slowly sprout and creep across the screen. The important thing when starting out using masks is to get a good handle of the basic concepts, and then the rest comes easily.

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Related Posts

Comments are closed.