Flash Advanced Tips: Making a framework

Advanced | skills

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.

Effect preview:

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-style 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 the Objpos original value is a_{1, The value of the Objpos on the left is recorded as a2, and so on, the value of the left Objpos after the n time is recorded as an+1, so mathematically, it is actually a recursive operation of a sequence of numbers:}

A_{n=t-d (an-1-t) (where d,t is constant)}

When the code executes n times, the position of the object is in the_{n+1 of the sequence {a n}.}

Therefore, we need to prove that when a_{1!=t A, the value of an two adjacent items is the opposite of the difference of T, and when n tends to infinity, an=t}

Digression: It is said that Chinese mathematics is the hardest to learn, and this topic impression also in the college entrance examination for the time has done similar, perhaps for the Chinese to do mathematics, to prove that this formula is completely no problem, probably Koreans have no one to prove it, but the application of this formula to this practical problem is actually Korean people Alas, China's education needs to be improved.

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 the graph can be depicted according to the highest point.

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 this method is invoked on the MC, LineTo will line up at the point X,y and the drawing mark Point of the current MC, and the default is (0,0) at the beginning, so when the first call to the MC LineTo, the MC will be drawn from (0,0) to (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 an important part 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 significant problem.

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, observe the changes in the curve (where the mouse is the point of control) can also be directly previewed 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:

You can see that in all the curves except the red line, tangent to the red line, and the direction of the opposite lines of the two blue wire can be smooth transition with the red thread, in mathematics, this phenomenon is called connection. In addition, the tangent itself can be smooth transition with the red thread. Thus the shape of the waveform can be controlled correctly.

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 location 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 x<sub>m, then, the curve leftmost point of the horizontal axis is xM-WIDTH/2, The coordinate axis at the right point is xM+WIDTH/2, the horizontal axis of the middle two transition points, one between xM-WIDTH/2 and xm, onebetween x m and xM+WIDTH/2, for convenience, and for nature, select Midpoint, x M+width/4,xM+3*WIDTH/4, the selection of ordinate is similar.

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

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, a,d are at the bottom of the waveform, and the B,c is at the highest point of the waveform. In addition, A,a_{1,b three points collinear, C,c1,d three points also collinear, so that the entire waveform is smooth.}

However, this a,b,c,d position is still not certain, but it is certain that the four-point horizontal axis from left to right in order is a,b,c,d. So, the more convenient and aesthetically pleasing option is to have a's horizontal axis in the middle of a_{0 and a1, Then it is possible to calculate the position of point B exactly in the middle of a1 and the vertex, in the same way that the C point is between the vertex andthe C 1 point, and the D point is 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. Practice:

1 Create a new flash document, size with the default 550*400 good.
2 Then, draw a fully transparent rectangle on the stage, size: 550*100, Position: (0,300)
3 Convert to symbol, instance name BG. Although it is called BG, but it is used to detect collisions, but also to test the problem after adding.
4 is to add the frame code, which will be combined with the above theory to annotate important code.

The code is as follows:

var deceleration = 0.5;
Deceleration is a variable of the control buffer, the value between the 0~1, the greater the decleration, the longer the elastic movement. Deceleration=0 words, will suddenly stop, decerlation=1 words, It will be constantly vibrating. If less than 0 is greater than-1, will do inelastic buffer movement, greater than 1 or less than 1 will do amplitude of the elastic movement more and more, interested words can be obtained from the formula above the proof process of these conclusions.
But in simple terms, to achieve the effect we need, decelertaion according to your feelings, to 0~1 between the number is good
var ypos = 300;
Ypos is the vertical axis of the lowest waveform. In this document, it is recommended to take a value within the 200~320 range.
The following function is the function that draws the curve
function DrawCurve (name, depth, Highpointx, highpointy, width, alpha) {

Draw a picture, you will create a mc,name is the name of the MC, depth is the depth of the MC, and then Highpointx,highpointy is the highest point of the coordinate, width is the waveform, the value is set as a variable, because the frame pull the more powerful, The higher the width of the waveform, so that the action is not too blunt, this reader can try to make the width as a constant. Then, Alpha is the transparency of the MC, of course, you can also put the color such as the value of the parameters inside, but this is not the point, so the author did not put

This.createemptymovieclip (name, depth);
Create an MC named name with depth of depth
With (This[name]) {
LineStyle (1, 0x666666, alpha);//define Line style
Beginfill (0xff9900, Alpha);//define Fill style
MoveTo (0, ypos);//First of all, from the point of the rectangle to the upper corner P1 start drawing lines (see above diagram), the parameters are P1 point coordinates, this is a custom.
LineTo (HIGHPOINTX-WIDTH/2, ypos)//The Straight line p1a0 draw, the parameter is the coordinates of the A0 point, the algorithm refer to the above introduction, the same below.
Curveto (HIGHPOINTX-WIDTH/2+WIDTH/8, Ypos, HIGHPOINTX-WIDTH/4, (Ypos+highpointy)/2),//Draw curve a0a1, the first two parameters are the coordinates of a, The latter two parameters are the coordinates of the A1
Curveto (HIGHPOINTX-WIDTH/8, Highpointy, Highpointx, highpointy);/Draw Curve a1h, the first two parameters are B's coordinates, the latter two parameters are the coordinates of H
Curveto (HIGHPOINTX+WIDTH/8, Highpointy, HIGHPOINTX+WIDTH/4, (Ypos+highpointy)/2),//Draw curve HC0, the first two parameters are C coordinates, the latter two parameters are C0 coordinates
Curveto (HIGHPOINTX+WIDTH/2-WIDTH/8, Ypos, HIGHPOINTX+WIDTH/2, ypos);/Draw Curve c0d0, the first two parameters are d coordinates, the latter two are the coordinates of the D0
LineTo (ypos);/Draw a straight line d0p2
LineTo (550, 400);//Draw a straight line p2p3
LineTo (0, 400);//Draw a straight line p3p4
LineTo (0, ypos),//Draw a straight line p4p1, this frame is finished drawing.
Endfill ()//tag fill operation end
}
}
This.createemptymovieclip ("Curve", 2);//Create an empty MC named curve
This.onenterframe = function () {
var targetx = The horizontal coordinate of the position at which the highest point of the _xmouse;//targetx frame is finally reached
var trendy = (Math.Abs (_ymouse-ypos) <60 && curve.hittest (_xmouse, _ymouse, true) | | Bg.hittest (_xmouse, _ Ymouse, true) | | Curvebg.hittest (_xmouse, _ymouse, true))? (_ymouse): (ypos);
var targety = trendy-deceleration* (Tempy-trendy);
Targety is the highest point of the frame to achieve the position of the ordinate, originally according to the algorithm, trendy directly with the targety on the line, but the total encounter many problems, in order to prevent the frame over stretching and frame automatically bounce, to calculate Math.Abs (_ymouse-ypos) <60, and then also to detect the collision problem, Math.Abs (_ymouse-ypos) <60 after so long inspection, is the time to add to the test, I can not use theoretical interpretation, can only say that practice is the only Test of truth, the theory can not fully guide the practice.
if (targetx>0 && targetx<550) {
DrawCurve ("Curve", 2, Targetx, Targety, Math.max (math.abs) targety-ypos), 40);//Here Call the function that draws the curve, Targetx and Targety already on the top, now explain the width, originally thought let width with the waveform height (is the absolute value of Targety-ypos) change and linear increase is finished, but found that the waveform is too narrow not good-looking, so have to let the waveform width can not be less than 30 .
DrawCurve ("Curvebg", 1, _xmouse, targety-20, Width=math.max (math.abs) targety-ypos), 0); CURVEBG is created solely to enhance the accuracy of collision detection, which is actually 20 pixels higher than CURVEMC, and the fourth parameter can be adjusted appropriately as needed, so the alpha parameter is set to 0 to make it invisible.
}
TEMPX = targetx;//assigns the current targetx to TEMPX and realizes the recursive operation of the sequence. For recursion, you can refer to the above introduction to the elastic algorithm
Tempy = targety;//ditto.
}

In this way, the file is completed, only more than 800 bytes will be able to achieve the effect. Of course, this is just some simple graphics, no art composition, this depends on everyone to play! The source file is so code and a rectangular MC, I do not want to pass to everyone.

And there are a lot of things about math here. If you're not interested in math, if you are interested in the effect, you can use it directly. Of course, it is helpful to know how to play creativity in the program. However, as a flash creator, mathematics does not need to be too refined, understand the application is the most important.

China's mathematics education even to the university, but only to the specific problems of abstraction, and then teach students to solve problems, after the solution, the application of the problem has been completely forgotten. So, in school, mathematics is often very boring, The failure of exams has left many students with a loss of interest in mathematics. Even students who are very good at learning, even mathematicians, are mostly just slaves of mathematics, learning maths for math.

From the examination point of view, I am not good at maths. To prove the buffer formula, I spent nearly 4 hours, and this is the college entrance examination of the things, so the math exam results are not good, 689 points (out of 900), but with a lot of more than 700 800 more than the students, I will apply mathematics to practical problems above, Using the buffer formula directly, I wrote the program in 10 minutes, of course, it took me 10 minutes to get some bugs. Therefore, the score is similar to me, in the 500~700 about the scores of students have a lot of writing these math programs better than me. So, at the end of this tutorial, I want to give you some advice:

Not because you are a rookie, feel as good hard to learn, most of the time, as is the application of things, do some of the program is to rely on their own observation of things, and then produce some ideas to achieve, rather than that you understand as the more thorough, the more you can make good programs. So, I think, The standard to learn as as is your ability to apply to as, not your understanding of it, the thoroughness of mastery. So, some people use Flash4 can make very cool as effect, some people use Flash8 still not compare! Flash4 as very few, so, this shows that the difference is whether you can learn the application of knowledge in place, rather than learn the amount of knowledge.

Don't feel that you are not good at math, physics, or English and lose faith in as learning. In China's education model, a lot of things for most of the people except a very small number of college students, is actually rubbish. Nowadays, many people use their academic achievement as the important criterion to measure their learning well. Lead to their potential has been buried in the depths, can not be excavated. So, the friends who think they are not good, you may be the best, perhaps the best to apply, with the knowledge learned, with As for flash works to add light may be you!

The last thing to add is that what I said above is not to deny the outstanding academic achievements of friends. You might want to ask yourself if you've ever been in an abstract situation for what it is. If there is, it's best to go out and see if "knowing it" can be a great help to the actual application. Of course, If a dead end can drill out of the results, drilling out fame (like Hua, Chen Jingrun, etc.), you can try, but can have good results, after all, accounted for a very few.

PS: In fact, I am in the buffer formula I feel that I have a bit of a dead end, I do not know what to use the results of drilling out.