The principle and application of Flash dynamic mask

Dynamic

This translator: Egoldy
Article Source: http://www.5etdemi.com
Article Nature: Translation

In addition to the FLASH DRAWING API allows us to draw graphics, we can also use it to draw a mask, which is the characteristic of the rendering of the mask we can dynamically draw.

how to draw a mask using the Flash DRAWING API

The masks provided by MM are as follows:

Code:

Movieclip.beginfill
Movieclip.begingradientfill
Movieclip.clear
Movieclip.curveto
Movieclip.endfill
Movieclip.linestyle
Movieclip.lineto
Movieclip.moveto

In the actual application we may not all use, as in the following example we will apply to Beginfill,lineto,moveto,endfill and so on.

Now let's start with a simple example.

We want to draw a mask on the screen and use it to mask, in order to achieve the above effect, we need to import a picture in the scene, and convert it to a movie clip, named Maskee. Then we add the following code to the main frame:

Code:

This.createemptymovieclip (' Square ', 0);
With (_root.square)
{
MoveTo (0,0);
Beginfill (0x000088)
LineTo (100,0);
LineTo (100,100);
LineTo (0,100);
Endfill ();
}

The above code we have completed the square of the drawing, now you can test your video, and you may notice that it uses the with to make our code look clearer, and of course you can choose other methods, such as the next, you can compare, you will think which is clearer and easier to read.

Code:

This.createemptymovieclip (' Square ', 0);
_root.square.moveto (0,0);
_root.square.beginfill (0x000088)
_root.square.lineto (100,0);
_root.square.lineto (100,100);
_root.square.lineto (0,100);
_root.square.endfill ();

The above code we just drew the square, now you can test your movie, if you want to specify the shape we draw as a mask only need to add a line below the code:

Code:

_root.maskee.setmask (_root.square);

The meaning of this line of code is to specify the square we draw as a maskee mask, and we apply the clear () method above, which is to erase the action before square.
Test your Videos

Let's take a look at a few examples:

Movie 1: A drag mask

Based on the above, I still use the Maskee movie clip above to clear the code on the main frame, and we add the following code to the Maskee movie clip, not the frame of the movie clip,

Code:

Onclipevent (load)
{
_root.createemptymovieclip (' Square ', 0);
function Drawsquare ()
{
x = _root._xmouse;
y = _root._ymouse;
With (_root.square)
{
Clear ();
MoveTo (X-50,Y-50);
Beginfill (0x000088)
LineTo (X+50,Y-50);
LineTo (X+50,Y+50);
LineTo (X-50,Y+50);
Endfill ();
}
}
This.setmask (_root.square)
}
Onclipevent (MouseMove)
{
Drawsquare ();
Updateafterevent ();
}

To test your video, you'll find a 100*100 square that moves with the cursor and can be a mask, unlike the previous example, we define the square code as a function Drawsquare (), because we're going to keep calling it when the cursor is moving. In addition, the clear () method is used to erase all the actions before the square clip.

Watch Demo 1

Just now we mentioned a question about the application of the clear () method, just imagine if we didn't add clear () This line of code. You can imagine what would happen. Now we'll delete the clear () line or add a comment. Test your videos and you'll see an erasure effect, and you can add your own ideas and become any shape.

Watch Demo 2

Movie 2: Pixel Fade Mask effect

You may have seen this effect in PowerPoint or in director, and in this case you don't need to understand the meaning of each line, just a hint to the fade mask. We still use the example above to clear the code on the original Maskee and add the following code:

Code:

Onclipevent (load)
{
Numy = 30;
NUMX = 40;
Numperframe = 12;
Currsquare = 0;
choices = new Array ();
for (i = 0; i < numx*numy; i++)
{
Choices.push (i);
}

_root.createemptymovieclip ("Mask", 0);
This.setmask (_root.mask);

function Drawsquare (x,y)
{
With (_root.mask)
{
MoveTo (X,y);
Beginfill (0x000088)
LineTo (X+10,y);
LineTo (X+10,Y+10);
LineTo (X,Y+10);
Endfill ();
}
}
}
Onclipevent (Enterframe)
{
if (Currsquare < numx*numy)
{
for (i = 0; i < numperframe; i++)
{
j = Random (choices.length);
t = choices[j];
CHOICES[J] = choices[choices.length-1];
Choices.pop ();
x = t% Numx;
y = Math.floor (T/NUMX);
Drawsquare (x*10, y*10);
}
Currsquare + = Numperframe;
This._alpha = currsquare/(numx*numy) *100;
}

Test your video, you will find the random 10*10 pixel squares will constantly appear on the screen, while the picture fades

Watch Demo 3

Film 3: Fan loading

Then we're going to use a dynamic mask to make a slice loding. The last look is roughly:

First, you have to follow the triangle function of this picture.

The coordinates in the above diagram are:

Code:

X1 = R*sin (O)
x2 = R*sin (O+do)
Y1 = R*cos (O)
y2 = R*cos (o+do)

The principle is to draw a circle of 1/100 is 3.6 degrees, which means we need to draw a triangle, and then continue to draw until 100.
You need to create a circle in the scene and convert it to a movie clip, and the problem is that you have to align the center of the movie clip inside it. This is a very important point.

Select the circle clip and add the following code:

Code:

Onclipevent (load)
{
_root.stop ();
do = 3.6;
R = 75;
function Addslice (O)
{
X1 = R*math.sin (o*math.pi/180);
x2 = R*math.sin ((o+do) *math.pi/180);
Y1 = R*math.cos ((O) *math.pi/180);
y2 = R*math.cos ((o+do) *math.pi/180);
Trace (x1 + ":" + y1);
With (_root.mask)
{
MoveTo (0,0);
Beginfill (0x000088);
LineTo (X1,Y1);
LineTo (X2,Y2);
Endfill ();
}
}
_root.createemptymovieclip ("Mask", 0);
This.setmask (_root.mask);
_root.mask._yscale =-100;
_root.mask._x = this._x;
_root.mask._y = this._y;
oldloaded = 0;
}
Onclipevent (Enterframe)
{
Loaded = Math.ceil (_root.getbytesloaded ()/_root.getbytestotal () *100);
for (i = oldloaded i < loaded; i++)
{
Addslice (Do*i);
}
oldloaded = loaded;
}

In the code above, _root.mask._yscale=-100 is used to make direction, forward or reverse, and we notice that there are two variables, oldloaded and loaded. The reason we have oldloade is to store the values we downloaded before.

OK, now it's time to test your video. To see the effect, you can continue to press two times to enter.

Watch Demo 4

Source file:dymask1.zip　pieloader.rar