FX

This sample simulates page flip effect using combination of Translate, Rotate and Clip attributes. Move the mouse towards bottom left or bottom right of the page. The page will indicate that it can be flipped by slightly moving towards mouse. Now click on the corner and drag the page towards opposite corner of the book. The page will be animated and flip to display the next page.

Understanding the Code

A page in book is represented by Page class which is a CustomNode.

class Page extends CustomNode {

public var fill = Color.RED;
public var stroke = Color.WHITE;
public var text = "A";

override function create():Node {
    return Group {
	var r:Node;
	var t:Node;
...
...

Several instances of Page are added to form Book node.

        Book {
            translateX: bind (scene.width - bookMaxW) / 2
            translateY: bind (scene.height - bookMaxH) / 2
            pages: [
                Page { fill: Color.BLUE   text: "A" }
                Page { fill: Color.ORANGE text: "B" }
                Page { fill: Color.RED    text: "C" }
                Page { fill: Color.GREEN  text: "D" }
                Page { fill: Color.YELLOW text: "E" }
                Page { fill: Color.PURPLE text: "F" }
            ]
        }
    

When user moves mouse closer to bottom corner of the page, the x and y deltas between the current mouse location and the bottom corner of the book, angle (theta1) of the vector connecting the current mouse location and the bottom corner of the book are found. Compute the distance between the bottom corner of the book and the bottom fold of the page. The angle of the vector connecting the bottom fold and the top fold is found. The coordinates of the top/bottom page folds (relative to the book's origin) is found. Based on these information the Translate, Rotate and Clip for the page is found. Refer to updateCorner method for more implementation details.