Flash E-book Mouse Drag-and-drop effect principle

Flip | mouse

Recently to do some e-books, was ready to go online to buy ready-made page effect components, but a look at the quote startled, and the implementation efficiency is not high, a component called AsFlipPage4.0 CPU occupancy rate of 70%, shouting price 1000RMB, really black-hearted businessman. Download a few open source programs that you can not understand. So a bite to do one's own, and put the source program. After two weeks, the variable interface is done and released free of charge.

to set the final product after the mask and shadow :

Main principle:

• The ebook is divided into 3 content layers, stacking order as shown. The first layer is the current page layer, the page that is now being displayed, and the second layer is the page corner that is rolled up when the mouse is dragged, and the third layer is when the page corner is rolled up, exposing the next page's layer.
• Set matte: When the page is rolled up, layer 1 displays only the quadrilateral Fbde, Layer 2 only shows the ABCD section, and Layer 3 displays only the BGHD part.
• Rotation: The contents of the Layer 2 will be changed with the mouse movement and the tilt angle is always the same angle as the AC side slope.
• Paging: When the page is completely out of date, the current number of layers 1 = Current page +1

The core of the program is how to get the four-point ABCD coordinates, I am using the method of seeking Street, both: Point C is the mouse position, point h is the page corner position, BD not only for this two points between the Street. A function of a line BD is obtained by a known c,h coordinate y=kx+b and then the FG is obtained. The tangent point of Eh, which has a point of b,d coordinates, point A is the point G in the line BD's symmetric point, by finding the point G to BD's symmetric points can get point a coordinates.

Demo1:4 the calculation of vertices: Move the mouse to the yellow hot area and drag

Several other points:

Limit c point range: When the mouse is in the gray area of the figure below, the coordinates of point C are equal to the mouse coordinates, when the mouse leaves the gray area, point C must remain in the area. Arc KML is a circle with Dot J, kj as radius, arc knl is a circle with point I and IK as radius (demo1 does not limit the range of C points, An error occurs if the mouse is over an arc area.

Response Event: Set up 4 hot zones, respectively, at the 4 vertices of the book, set the Rollover,rollout,releaseoutside,release event function separately. In fact, this part of the function is written extremely time-consuming, and needs to consider a variety of possibilities and targeted processing methods.

Mouse adsorption and viscosity: when the mouse into the hot zone and rapid movement, the page angle is gradually adhered to the mouse, which can make the animation look smoother. Demo4 set the adsorption, Demo1 is not set.

Shadow: The shadow of the page should always be consistent with the position of the line BD, the background shadow of the book to take into account the home page and last two special cases.

Home and last page: In flip to the front page and last Page 3 mask must be reset to the entire book width of 1/2