Flash mouse Effects: the production of flexible frames

Mouse | effects

Before I send you a tutorial, I would like to thank a classic netizen, he introduced a mathematical formula editing software MathType, which helped me a lot in the course of this tutorial. But who can't think of it and can't find it. If found, I will certainly publish his name in token of gratitude.

This is two months ago promised a user to write a tutorial, but did not have time, so dragged to the present. And this effect is still a considerable number of people have asked how to do in the forum. Now I have squeezed a little time to send you this tutorial.

This is basically accomplished with as. The LineTo and Curveto methods of MovieClip objects are mainly used, and many people are familiar with the Korean-style elastic menu algorithm.

Here, first to introduce a relatively simple Korean elastic menu algorithm. The frame elastic motion is realized by this algorithm. The effect it has to achieve is to have an object vibrate on both sides of the target, and the amplitude is getting smaller, eventually stopping at the target position.

Its algorithm is as follows:

objpos=targetpos-deceleration* (Objpos-targetpos)

You try to make Objpos is any number, and then let deceleration take 0~1 (excluding 0, 1), and then targetpos to take a relatively large difference from the Objpos, constantly substituting the formula for You will find that the objpos will vibrate on both sides of the targetpos, and at the current time greater than Targetpos, this time will be less than targetpos, and infinitely close to the targetpos, so as to achieve the purpose of elastic vibration.

Of course, a discerning eye results from the observation. But the perception is perceptual, and if you are interested, you can look at my proof of this formula (I can skip it if I'm not interested in math).

Before the proof, explain a point, the upper-type objpos is not the same, in as, it does not represent equality, but first objpos the current value to the right, calculate the result and then Objpos assignment. Therefore, suppose that the Objpos original value is A1, The value of the Objpos on the left is recorded as a2, and so on, and the value on the left Objpos after N times is recorded as an+1, so, mathematically, it is actually a recursive operation of a sequence of numbers:
An=t-d (AN-1-T) (where d,t is constant)
When the code executes n times, the position of the object is located in the n+1 of the sequence {an}.

Therefore, we need to prove that when the sequence is a1!=t, the value between an two adjacent items is the opposite of the difference of T, and when n tends to infinity, the an=t

So, if you call this code with SetInterval, or if you call it in Onenterframe, the Objpos value will vibrate on both sides of the targetpos and be infinitely close to targetpos. This formula is used in my mouse effect, The point to control here is the highest point of the entire box. The change of the highest point to drive the whole shape of the change, of course, driven by the shape of the change is the next thing, we have to the highest point of the effect of vibration to achieve. So, Targetpos is where the top of the frame ends The Objpos is the current position of the frame's highest point.

The following is a description of how to figure out the graph according to the highest point calculated:

First of all, the four vertices of the rectangle are constants, and the three edges are straight lines, so this can be accomplished with LineTo.

lineTo (X,y) method is relatively simple, when the MC call this method, LineTo will be in the point X,y and the current MC of the drawing mark Dot line, the default is (0,0), so the first time to call the MC LineTo, the MC will draw a from ( 0,0) to the (X,y) line, and then the paint marker point is changed to (x,y). If you do not want to start drawing this line, or after drawing a line, hope to draw another, and do not connect with the current line, you can use the MoveTo (X,y) method to change the paint marker points.

The Curveto (Controlx,controly,anchorx, Anchory) method is a focus of the tutorial, because waveform rendering is achieved through this method. And there are countless curves over two points, so how to ensure the smoothness of the waveform curve, is a very important question.

Let's do a little test here:

Create a new Flash document and add the following code to the frame:

var initx = 100;
var inity = 200;
var Controlx;
var Controly;
var Anchorx = 50;
var anchory = 50;
This.onmousemove = function () {
This.createemptymovieclip ("curve", 1);
With (curve) {
LineStyle (1, 000000, 50);
MoveTo (INITX, inity);
Controlx = _xmouse;
Controly = _ymouse;
LineTo (Controlx, Controly);
LineTo (Anchorx, anchory);
MoveTo (INITX, inity);
Curveto (Controlx, Controly, Anchorx, anchory);
}
Updateafterevent (This.onmousemove)
};

Then, test the movie, move the mouse on the stage, and observe the changes in the curve (where the mouse is the point of control)
You can also preview it directly here:

You will find that no matter how the control points change, the curve has a feature, that is, the control point and curve two vertices of the line tangent to the curve, and the arc is always C-shaped, not s-shaped. This is the important conclusion that guides us to draw the smooth curve.

Look at the following figure:

It can be found that in addition to the red line in all of the curves, tangent to the red thread, and the direction of the red lines opposite the two blue wire can be smooth transition with the red thread, mathematically this phenomenon is called connection. In addition, the tangent itself can be smooth transition with the red thread.

This allows the shape of the waveform to be properly controlled.

The sketch of the waveform is as follows:

Red is the curve part, a look at it is not a simple C-shaped, you try to flash, or FW or PS in the path to draw, and then look at the composition of the anchor point, you can find that this curve can be divided into three C-shaped curve.

If you draw three paragraphs, then, the highest point of the waveform is determined by the control point, it is difficult to accurately, so it is best to add an anchor point at the highest point, so that the highest point of accurate position.

But how is the rest of the anchor points determined?

In fact, according to the known conditions, it is not possible to draw the position of other anchor points, this is generally determined by the feeling. Let's say the width of the entire curve, and then assume that the highest point of the horizontal axis is XM, then, the curve leftmost point of the horizontal axis is XM-WIDTH/2, the most right point of the horizontal axis is Xm+width /2, the horizontal axis of the middle two transition points, one between XM-WIDTH/2 and XM, one between XM and XM+WIDTH/2, for convenience, and for nature, select Midpoint, XM+WIDTH/4,XM+3*WIDTH/4, ordinate selection is similar.

Now we're going to talk about the control point problem, which is how to make a smooth connection before each curve.

First, make the tangent of each anchor point of the curve. Then, the intersection point (a,b,c,d) between the tangent lines of the adjacent curve segments is the locus of control of the corresponding curve.

Visible, the a,d are at the lowest waveform, and the B,c is at the highest point of the waveform. In addition, a,a1,b three points collinear, c,c1,d three points also collinear, so you can ensure that the entire waveform is smooth.
However, this a,b,c,d position is still not certain, but it is certain that the four points of the horizontal axis from left to right in order is a,b,c,d. Then, the more convenient and more beautiful choice is to let a of the horizontal axis in the middle of A0 and A1, Then it is possible to calculate the position of point B exactly in the middle of the A1 and vertices, the same reason that C points in the middle of vertices and C1 points, D points between the C1 point and the D0 point.

The theoretical basis is basically complete, the following can begin to write the program.

However, the author found that there is a basis for the original is not enough, still encounter a lot of difficult problems. It was discovered at the time of the test.