Research on flash book turning effect from blueidea)

Overview-concept description

The concept of this project is to give people who come to my site the opportunity to use flashmx to design a virtual book, just like a real book, but it is placed on your computer desktop. You can read it one page at a time.

Note that this course is intended for those who have a certain understanding of ActionScript and know how to code in flashmx. If you only know how to create a ball and make it scroll on the desktop, please come back in a few months.

Just kidding. Basically, there are only a few technologies in this course. All functions in this tutorial are frequently used. Coding is very easy. All you need to know is basic triangle knowledge, such as sine (SINE), Cosec (Cosine), and hypotenuse (oblique side of a right triangle ). This is enough for this tutorial. So, relax and enjoy it.

This is an ongoing project. If you have any questions, please email me. Let's get started.

Part 1-basic computing functions(Basic calculation functions)

In this root script, we have two basic computing functions. You can copy them directly to your stage because they will be used over and over again. One is getdist, and the other is getangle. They are simple for you, right? To be honest, I am not interested in explaining such things. They should be learned in high school mathematics.

The first function is to obtain the distance between two points. We need to know the coordinates between these two points.

// Obtain the distance between two points
Function getdist (px1, py1, px2, py2 ){
X = px2-px1;
Y = py2-py1;
Hyp = math. SQRT (math. Pow (x, 2) + math. Pow (Y, 2 ));
Return Hyp;
}

Now you are doing well. We can try something more difficult. -- How to obtain the angle between two points.

// Obtain the angle between two points
Function getangle (px1, py1, px2, py2 ){
X = px2-px1;
Y = py2-py1;

Hyp = math. SQRT (math. Pow (x, 2) + math. Pow (Y, 2 ));

Cos = x/Hyp;
Rad = math. ACOs (COS );
// If you cannot understand it, ask your math.

DEG = 180/(math. PI/rad );
// Yes, we get an angle "rad" Through cos, but it is measured in radians.
// Therefore, we need to further convert it into the standard angle we need

If (Y <0 ){
DEG =-deg;
} Else if (y = 0) & (x <0 )){
DEG = 180;
}
Return deg;
}

 

I don't need to explain more, do I?

Part 2-Basic movie clips on stage

Create four symbol blocks in the library ). They are different pages in your book. If you like, you can redesign as needed. One thing I only need to remind you is to place the reference points in the lower left corner of each symbol. We need to use them to locate the page location.

In this demo, we assume that our book has only four pages. If you want to increase the number of pages in your book, add some new check situation functions. Make sure that the page size matches the book size.

Drag them onto your stage to make sure they are at different levels.
In this order: 4th pages, 1st pages, 2nd pages, 3rd pages.

The first page should be at the top. Make sure to place these movie clip as shown in.

The location of page 3rd does not matter, because we will dynamically adjust it.

2. Create a symbol circle and cut it down ). We need to use it to check different positions when moving the mouse.

3. Create a symbol containing a vertex. You can use any style of vertex. It depends on you.
Place the symbol "vertex" five times on the stage and name them D0, D1, D2, D3, and D4 respectively.

I need to remind you that do not place any movie clip outside the movie clip page1 and page4 regions.

4. We also need some other symbols, such as shadows or other symbols. We can create them later. Don't worry.

Now count again. The symbols in your library include:
S_circle, s_dot, s_page1, s_page2, s_page3, s_page4

The symbols on your stage are:
Checkcircle, D0, D1, D2, D3, D4, page1, page2, page3, page4

Select all the movie clip on the stage and convert them into a symbol s_stage.
Drag s_stage to the stage and name it movie clip "stage ".

Make sure that movie clip D0 is located in the center of movie clip "stage.

Make sure that the size of the movie clip "Stage" is page 1 and page 4.

This is why you do not place any movie clip outside the region when converting the s_stage symbol.

Basically, the purpose of establishing movie clip D0 to D4 is to clearly find the reference point. When we complete this tutorial, you can set the transparency of these movie clip to 0. I am doing this here.

We can start coding in the following course.

Part 3-initialization

Initialize all variables, as shown in.

// Set the book's width and height. (set the book's width and height)
Stagew = _ root. Stage. _ width;
Stageh = _ root. Stage. _ height;

// Set reference points 'position (set the position of the reference point)
Pax = _ root. Stage. d0. _ x-stagew/2;
Pay = _ root. Stage. d0. _ y-stageh/2;

PBX = _ root. Stage. d0._x-stagew/2;
PBY = _ root. Stage. d0. _ y + stageh/2;

PCX = _ root. Stage. d0. _ x;
PCY = _ root. Stage. d0. _ y-stageh/2;

PDX = _ root. Stage. d0._x;
Pdy = _ root. Stage. d0. _ y + stageh/2;

Pex = _ root. Stage. d0. _ x + stagew/2;
Pey = _ root. Stage. d0. _ y-stageh/2;

Pfx = _ root. Stage. d0. _ x + stagew/2;
Pfy = _ root. Stage. d0. _ y + stageh/2;

_ Root. Stage. page3. _ alpha = 0;
// We Need To show movie clip page2 at the beginning, so hide page 3 first.

 

Take this partCodePut your first root script (root frame script ).

-- How to find the first point?

The first point, D1, is your mouse position. (To be honest, there are several situations in the D1 position. What happens if your mouse leaves the movie clip circle? You can complete this part later. I have done well. This is the job left for you .)

Before assigning a value to the position of D1, we need a primary function.

// Main Function
Function startslip (){
Getd1 (); // This function is discussed in this lesson.
Getd234 ();
Drewmask (); // we will add these two functions later
}

Now you can check how to set D1.

// Obtain the position of the first vertex, d1
Function getd1 (){
If (_ root. Stage. checkcircle. hittest (_ xmouse, _ ymouse, true )){
_ Root. Stage. d1. _ x = _ root. Stage. _ xmouse;
_ Root. Stage. d1. _ y = _ root. Stage. _ ymouse;
} Else {
// Complete this part by yourself. Basically, I need to use three functions to set the D1 position.
}
}

Tip: You need to move your mouse to four areas. In each area, the D1 position is different. In this example, we only discuss Area. I will put all the code in the final file. If you are interested, you can check it later.

Because you need to hold the mouse and drag the page, the first point you need to move is the point in the lower right corner of the page.

Part 4-get all three other points:

Like above, you have several situations to consider.

The first case is relatively simple. 3rd points are on the edge EF. In this case, point D4 and point D3 are in the same position.

In another case, it is more difficult. Point D3 is located on the edge ce. You need to calculate D3 and D4.

Or:

Here, we need some trigonometric functions to obtain all the values. Hi, there must be a more effective way to code it. I'm really not interested in doing it again. :(

I only need to remind you of one thing:
The coordinate system of flash starts in the upper left corner and gradually expands down to the right.

For a mathematician, it may take a few minutes to obtain all the points, but it took me a whole morning. If you want to do this, you can do it yourself, or simply copy the code.

// Use D1 and F to find other points
Function getd234 (){
Len = _ root. _ root. getdist (pfx, pfy, _ root. Stage. d1. _ x, _ root. Stage. d1. _ y );
Len1 = Len/2;
Len2 = (pfx-_ root. Stage. d1. _ x)/2;

_ Root. Stage. d2. _ x = pfx-len1 * len1/len2;
_ Root. Stage. d2. _ y = pfy;

Len2 = (pfy-_ root. Stage. d1. _ y)/2;
Len3 = len1 * len1/len2;

_ Root. Stage. D3. _ x = pfx;
_ Root. Stage. D3. _ y = pfy-len3;

// Check whether D4 and D3 are in the same position
If (_ root. Stage. D3. _ y <Pey ){
PTx = pex-(pfx-_ root. Stage. d2. _ x) * (Pey-_ root. Stage. D3. _ y)/len3;
Pty = Pey;

Len = _ root. getdist (_ root. Stage. D3. _ x, _ root. Stage. D3. _ y, PTX, Pty );
Len1 = (pex-PTX) * (Pey-_ root. Stage. D3. _ y)/Len;

Len2 = len1 * len1/(pex-PTX );
_ Root. Stage. D4. _ x = pex-len2 * 2;

Len2 = len1 * len1/(Pey-_ root. Stage. D3. _ y );
_ Root. Stage. D4. _ y = Pey-len2 * 2;

_ Root. Stage. D3. _ x = PTX;
_ Root. Stage. D3. _ y = Pty;

} Else {
_ Root. Stage. D4. _ x = _ root. Stage. D3. _ x;
_ Root. Stage. D4. _ y = _ root. Stage. D3. _ y;
}
}

Part 5-drawing a mask shape

You only need to know two special points. Create an empty movie clip at one point and draw something in it. Another point uses another animation to cover a movie clip.

Okay, let's encode it.

// Create a Mask movie clip
Function drawmask (){
_ Root. Stage. createemptymovieclip ("Triangle", 1 );
With (_ root. Stage. Triangle ){
Colors = [0 xefefef, 0 xffffff];
Alphas = [2, 100,100];
Ratios = [0, 0xff];
Matrix = {A: 200, B: 0, C: 0, D: 0, E: 200, F: 0, G: 200, H: 200, I: 1 };

Begingradientfill ("linear", colors, Alphas, ratios, matrix );

MoveTo (_ root. Stage. d1. _ x, _ root. Stage. d1. _ y );
Lineto (_ root. Stage. d2. _ x, _ root. Stage. d2. _ y );
Lineto (_ root. Stage. D3. _ x, _ root. Stage. D3. _ y );
Lineto (_ root. Stage. D4. _ x, _ root. Stage. D4. _ y );
Lineto (_ root. Stage. d1. _ x, _ root. Stage. d1. _ y );

Endfill ();
// I don't think you need to explain this part. You can find them in the Flash MX help or reference. I copied it from there.
// Pretty clear, right? (Is it clear ?)
}

Setpage3 ();
// We need to move and rotate movie clip page3 when moving the mouse. That's why we need this function here.

_ Root. Stage. page3.setmask (_ root. Stage. Triangle );
}

This is another function we need to know: setmask.

Personally, I think this setmask function has some minor bugs in use. It is not as useful as other functions.
Another thing I want to remind you is that you can only use setmask once in the same script, which means that if you want to setmask movie clip page2 at the same time, you need to create a new mask movie clip and setmask in different levels of scripts.

Is it hard to understand? Okay, in my example, I put the next setmask in movie clip page2.

// Move and rotate movie clip page3
Function setpage3 (){

_ Root. Stage. page3. _ x = _ root. Stage. d1. _ x;
_ Root. Stage. page3. _ y = _ root. Stage. d1. _ y;

Angle = _ root. getangle (_ root. stage. stage. d1. _ x, _ root. stage. stage. d1. _ y, _ root. stage. stage. d4. _ x, _ root. stage. stage. d4. _ y );
_ Root. Stage. page3. _ rotation = angle + 90;
// Why is 90 degrees added here? I don't know. I just found that after this number is added, it can work well.

_ Root. Stage. page3. _ alpha = 100;
// Do you remember to set the transparency of movie clip page3 to 0? Now we need to change it back. Because movie clip page2 is located at the next layer of page3.
}

Add an additional code in this course.
In movie clip "Stage:

Onclipevent (enterframe ){
_ Root. startslip ();
}

This code keeps flash checking the mouse position.

Part 6-draw a mask shape in page2

Create a new movie clip named page2_content in movie clip page2.
You can use whatever name you like.

Add the following code to the new movie clip page2_content.

Basically, as we discussed in the previous course, in scripts at the same level, you can only use setmask once. This is why we need to use it again in movie clip page2.

These codes are used to display the movie clip page4 at the bottom.

// Inside movie clip page2_content
Onclipevent (enterframe ){

_ Parent. createemptymovieclip ("triangle2", 1 );
_ Root. Stage. page2.page2 _ content. setmask (_ parent. triangle2 );

With (_ parent. triangle2 ){
Colors = [0 xefefef, 0 xffffff];
Alphas = [0, 0];
Ratios = [0, 0xff];
Matrix = {A: 200, B: 0, C: 0, D: 0, E: 200, F: 0, G: 200, H: 200, I: 1 };
Begingradientfill ("linear", colors, Alphas, ratios, matrix );
MoveTo (_ root. PDX, _ root. pdy-_ root. stageh/2 );
Lineto (_ root. Stage. d2. _ x, _ root. Stage. d2. _ y-_ root. stageh/2 );
Lineto (_ root. Stage. D3. _ x, _ root. Stage. D3. _ y-_ root. stageh/2 );
Lineto (_ root. PEX, _ root. Pey-_ root. stageh/2 );
Lineto (_ root. PCX, _ root. PCY-_ root. stageh/2 );
Lineto (_ root. PDX, _ root. pdy-_ root. stageh/2 );

Endfill ();
}
}

Check your progress? Cool, right?

 

Summary-other things you need to add

Now we have done almost the same thing. However, of course, we still need to do something to make it look like a real book.

We need to add some shadow movie clip. I use a PNG file for transparency. And make sure it moves and rotates along with page3. The code is similar. The angle is somewhat different, because the rotating axis is not side D1, D4, but side D2, D3.

In addition, you need to add a function to check how the page is rolled back and forward. In my final version, I used the mouse release function.

Basically, there will be another difficult step: How to check the first and last pages. Without those, you cannot increase the number of pages.