Friday, 6 June 2008

Dynamic masking

This flash tutorial will teach you about dynamic masking. Dynamic masking allows you to use movie clips as masks. For example in this tutorial text will appear as the mouse moves over the screen. Masks basically reveal sections of the layer below it. This requires a mask layer which is the mask/movie clip which reveals the layers below. The layers below the mask layer are called the masked layer.

Dynamic masking

Step 1

Open a new lash document and set an appropriate stage size.


Step 2

Using the rectangle tool (r) with no stroke, drag a rectangle shape the same size as the stage. And then choose a colour to fill the rectangle. I used a yellow colour but you can choose whatever you wish.

Name layer 1 “Bg”. This is now the background layer for your dynamic masking.


Step 3

On the timeline insert a new layer called “maskedbg”. This is layer is where the text movie clip will be placed.

Using the text tool (t) type your message on the stage. You can use whatever colour you wish. Convert your message into a symbol by pressing F8. Give your symbol an appropriate name, check movie clip button and click ok. Using the selection tool (V) select the text movie clip and give it an instance name. eg maskedbg_mc




Step 4

On the time line insert a new layer called “mask”. This layer acts as the mask layer where a movie clip object reveals the layers below.
For the mask I will use a circle object. Using the oval tool (O) drag a small circle shape on the stage. The colour of circle does not matter as it the mask and will not be seen.

Convert your circle into a symbol by pressing F8. Give your symbol an appropriate name, check movie clip button and click ok. Using the selection tool (V) select the circle movie clip and give it an instance name. eg mask_mc




Step 5

On the timeline insert a new layer called “actions”. Right click on the first frame and select actions and enter the following code:

mask_mc.onEnterFrame = function() {
this._x = _root._xmouse;
this._y = _root._ymouse;
};
maskedbg_mc.setMask(mask_mc);

**SetMask method make the movie clip in the parameter mask_mc (circle object) reveal the movie clip maskedbg_mc (text message).


Step 6

Test the movie clip Ctrl + enter. And move your mouse over the screen.



You should now have a dynamic mask. To make your dynamic mask draggable checkout the draggable dynamic mask tutorial.

1 comments:

Vanessa 28 October 2008 at 16:08  

Great example as usual. How can I make what I have moused over stay unhidden? Sort of like the scratch off game cards that I've seen...

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP