Flash Dynamic Mask Advanced Tutorial

Dynamic | advanced | tutorials

In the last tutorial http://www.webjx.com/htmldata/2005-03-09/1110349315.html I deliberately avoided curveto because it was somewhat complicated relative to LineTo, Then this effect I think the change will be better than blindly use LineTo.
First of all, we need to understand Curveto's related commands:

curveto Command:
In the following example we will use the following command:
Code:

Movieclip.beginfill ()
Movieclip.endfill ()
Movieclip.lineto ()
Movieclip.curveto ()

In the first three lines we have studied in the previous tutorial, now only Curveto,curveto (Controlx,controly,endx,endy) will be drawn from the startx,starty to draw a two-time square curve to Endx,endy, StartX, The position of the starty is determined by the use of Moveto,lineto, or the last point Curveto get, controlx,controly control the curvature between two points, you can think of Controlx,controly as a magnetic point, It will adsorb the curve close to it. Its working process is somewhat like Bezier Bezier curves, except that each curve can only have one control point.

Now we need to look at the working process of our dynamic mask, which is going through three-side continuation, as shown in the following illustration:

As you can see above, the mask is composed of a straight line and then deformed into 4 sides of the shape of the blue line will divide the screen into 4 sides, and then transform to a red line, and finally form the entire rectangle. A cross represents the approximate position of a control point.

In this case you need to note that the first and last is not a curve, but a straight line, so you can put your press point anywhere, which also gives us a lot of elastic space. In the back you will see.

deformed Form

We have to learn to change a form into another form, such as a blue shape into a red shape, which looks rather troublesome, actually very simple, like an object moving from point A to point B is a property. We'll move to the three point of the first curve to the three point of the second curve, and let's take a look at the example to transform the curve C into Curve J.

Code:

Create Movie clip and Mask
counter =-1;
Create a mask
_root.createemptymovieclip (' line ', 0);
Animint = SetInterval (Doanim, 17);
Animdir = 1;//variable used to control the direction

Defining functions
function Doanim ()
{
var currmc = _root.line;
var time = animindex/60;
var dist = time;
With (CURRMC)
{
Location of the C curve: (150, 25), (25,100), (150,175)
The position of J-Bend: (150, 25), (125,200), (50,125)
Clear ();
LineStyle (0x000000);
MoveTo (150,25);
Curveto (25+100*dist,100+100*dist,150-100*dist, 175-50*dist);
}

Animindex + = Animdir;
if (Animindex >= 60)
{
Animdir =-1
}
if (animindex <= 0)
{
Animdir = 1
}
}

In this code, the C curvature (150,25) (25,200), (150,175) is deformed to the J-Curve (150, 25), (125,200), (50,125)

Note that this code can only be run in FLASHMX. If you want to run in FLASHMX2004, you need to define Animindex in Animdir=1 and add a line of Var animindex=0 below; Test your videos and watch the results.

Watch Demo 1

Create a movie at the beginning Shear line, in line to draw the internal deformation curve, setinterval every 17 Hao seconds loop, variable Animindex used to track the location of the curve, this example we divided into 60 steps to draw, the time variable range from 0 to 1, Decide on animindex and attach it to dist to create a line animation.

Now that Dist's variable range is from 0 to 1, then obviously we're using a formula from point A to point B.

Code:

x = StartX + dist*deltax;
y = starty + dist*deltay;

Our application is as follows:
Curveto (25+100*dist,100+100*dist,150-100*dist, 175-50*dist);

In this formula StartX and Starty are the coordinates of the starting point, and DeltaX and DeltaY are the distances between x and Y to the start and end points respectively.

Easing, bouncing and other transitions

ease, elasticity and other modes of motion
Maybe at first you'll wonder why we're tired of using variable time and dist, so now let's take a look at their relationship and you'll see why we use it.

As you can see, the vertical axis represents dist, and the horizontal axis represents time. The relationship between them is now linear and is dist=time. The slash on the graph represents the speed of the animation. In this example, the speed of animation is constant. Now if we want to make it faster at the start, we'll just have to increase the slope of the red line in the t=0, and the red line will have no slope when t=1. This is actually a reversed parabola or trigonometric sine, and if you want to use other motions we can create different dist and time relationships to get more interesting results, here are some good relationships that might be useful to you:

You might be interested in Robert Penner ' s transition classes. The principle is the same.

put the code together

Code:

Global variable depends on the width of your movie
Mwidth = 400;

Create movie clips and masks
counter =-1;
Createmovieclip ();
Animint = SetInterval (Doanim, 17);

function Createmovieclip ()
{
counter++;
Attachmovie (' pic ' Add (counter% 2), ' pic ' Add counter, counter);
Createemptymovieclip (' Mask ' add counter, counter + 10000);
this[' pic ' Add counter].setmask (this[' mask ' Add counter]);
}

function Doanim ()
{
var currmc = _root[' mask ' add counter];
if (Animindex < 15)
{
var time = ANIMINDEX/15;
var dist = 0.5*math.sin (math.pi* (time-0.5)) + 0.5;

With (CURRMC)
{
Clear ();
Beginfill (0x000000);
LineTo (mwidth,0);
LineTo (mwidth,dist*125);
Curveto (250,dist*40,0,10*dist);
Endfill ();
}
}
else if (Animindex < 35)
{
var time = (animIndex-15)/20;
var dist = 0.5*math.sin (math.pi* (time-0.5)) + 0.5;

With (CURRMC)
{
Clear ();
Beginfill (0x000000);
LineTo (mwidth,0);
LineTo (mwidth,125);
Curveto (250-100*dist,40+150*dist,0,10+190*dist);
Endfill ();
}
}
else if (Animindex <= 50)
{
var time = (animIndex-35)/15;
var dist = 0.5*math.sin (math.pi* (time-0.5)) + 0.5;

With (CURRMC)
{
Clear ();
Beginfill (0x000000);
LineTo (mwidth,0);
LineTo (mwidth,125+75*dist);
Curveto (150,190+10*dist,0,200);
Endfill ();
}
}

animindex++;
if (Animindex > 50)
{
Animindex = 0;
_root[' pic ' Add (counter-1)].removemovieclip ();
_root[' mask ' Add (counter-1)].removemovieclip ();
Createmovieclip ();
}
}

This code uses two functions, Createmovieclip is used to paste the picture into the scene and set the instance name that Mask,cunter uses to track the picture.

The Doanim function is called once every 20 Hao seconds, and the entire mask formation process is divided into three parts as an example. You can choose another way for easing, just change the value of the dist to another formula.

Watch Demo 2

Summary: In these two tutorials we have learned the basic dynamic mask, and the dynamic drawing curve to form a mask, the basic principle of the same, especially you should pay attention to how to join easing,bouncing and so on. I think it might be useful for you.

Source file Download:dymask2.zip