The Page Turn Effect in Flash MX
Pages: 1, 2

Creating the First Page (Area b)

The easiest page to create is the page under the one being turned, or area b in the previous diagrams. As stated in the book, this area is a mask that is placed to the right of the line of symmetry. As the line of symmetry is moved from PAGE_EDGE to PAGE_SPINE, the page underneath the one being turned is revealed. In the interactive diagram below, the page being revealed is the one with the "2" on it.


The source .fla for this animation, pageTurn02.fla, is on the download page for the Flash Hacks book. Click on the image above to open the animation in a new window.

When interacting with this diagram, you should see that:

  • The grey rectangle will move with the line of symmetry. This is because it is embedded within the movie clip for the line (thus, no code is required to make the rectangle follow the line).

  • When you click the red text ("click here to activate the mask"), the rectangle will start masking the page with "2" over it.

  • The lower page ("2") is in reality above what appears to be the upper page ("1"). This is due to the way Flash masking works, which is the inverse of what you would expect. When the mask is not over the "2" (when the line of symmetry at the 45 degree position), the "2" is invisible, or "fully masked." When the mask is totally covering the mask (with the line of symmetry at the 90 degree position) the "2" is fully visible, or "unmasked." Because of this inverse action, we have to mask the "2" page rather than the "1" page, and this is why the "2" page is above the "1."

In terms of implementation, the mask clip is within the instance line and has the instance name rightMask. To make this rectangle start acting as the mask for the "2" page (which has an instance name bottomPage), we use the line:


 bottomPage.setMask(line.rightMask);
You can see this (the file pageTurn02.fla) being used in the onRelease event handler for the button corresponding to the "click here to activate the mask" button (button activate);:

activate.onRelease = function() {
  bottomPage.setMask(line.rightMask);
};

It should now be becoming clear what area we have chosen to ignore (area a). For those that have not worked it out, all will be revealed when we look at area c.

Creating the Second Page (Area c)

Creating the second page area, the reverse edge of the turning page, is harder to create than the previously completed one. This is not because of the code involved, but has more to do with visualizing what the mask that reveals this page needs to do.

Not to fear, because you can visualize what needs to happen via the interactive animation below. This adds the second mask area and the reverse of the turning page (area c). Again, click the "click here to activate the mask" text to make the mask start working.


The source .fla for this animation, pageTurn03.fla, is on the download page for the Flash Hacks book. Click on the image above to open the animation in a new window.

The area corresponding to the part we want to reveal as the page turns (A) is shown in green hatching in the diagram below. It is created by masking the reverse of the turning page (C) with a mask to the left of the line of symmetry (B).


Creating the reverse side of the turning page

The equation of the reverse side of the turning page (C) has much the same equation as the line of symmetry, except that it starts at 90 degrees instead of 45, giving us the equation for the rotation of the back of the page (as represented by the dotted red line) of:


backPage._rotation = 90*(line._x-PAGE_SPINE)/page._width

The back of the page is actually an embedded movie clip--an instance of backPage that contains a second movie clip, page. The instance page contains the actual page graphic. As backPage rotates, page moves with it, but page also moves relative to its own x axis (noting that this axis is also rotating). In the diagram, the movement of page relative to the red dotted line shows the result of this embedded movement. The embedding allows us to create the fairly complex rotational motion required of the turning page without having to resort to trigonometry, which would 1) be something that many designers hate and 2) potentially slow down the effect (accurate trig calculations are slow because they use a rather long binomial series to give the result).


The embedded animation that creates the back of the turning page

The interactive animation also shows us why we were able to get away with not considering the area a in the page turn effect; it is simply what is left over when areas b and c are added! As long as we place the top page below the other movie clips, it will naturally get obscured by the turning page. By realizing this (or rather, assuming it is unimportant because of symmetry early on), we have avoided having to animate it at all!

Note: to keep the discussion simple, I have made the pages single-sided (the pages only have content on one side, and in the effect so far, the back if the turning page is seen as a blank page.). You can easily create double-sided pages by making the movie clip back change per page turn.

Completing the Effect

The page turn doesn't look accurate at the moment, because of our approximation of assuming a perfect fold. Although we could fix this mathematically, Flash just doesn't have the performance needed to support the calculations to simulate curved pages. Readers of the Hacks book will know the fix to this--think of a hack to get around the problem.

In this case, the illusion of flexible pages is provided by some static alpha shadows that are applied to the pages as they turn. Although these are approximated shadows, they give the effect a real feeling of volume, and lift the animation towards realism considerably.

This is a major issue with much of Flash design--although you can do a lot with ActionScript, you almost always need some artistic ability to know how to create the graphical approximations needed to get beyond the code and create stuff that looks cool and/or realistic.

The page turn with faux shading created via alpha gradients superimposed over the pages

The interactive diagram below shows the effect with some shading added to the movie clips. Click-drag on the reverse of the page (the curled page area to the lower right) to turn the page.


The source for this example is available as pageTurn04.fla from the Flash Hacks download page. The final effect, pageTurn.fla, shows the same effect, but with multiple pages. You can download it from the same page. Click on the image above to open the animation in a new window.

Conclusion

The page turn effect described in this article shows how a fairly complex effect can be created through ActionScript.

As shown with this example, Flash retains its roots as a visual authoring tool even if you are using code to drive your motion graphics. The effect also relies heavily on other graphical features in addition to the code. These include embedded movie clips, masking, and faux 3D shading.

If you want to create compelling scripted motion graphics in Flash, being able to use the drawing tools is usually not that far away from being able to use ActionScript in relative importance.

You may be interested to know that a fully featured and open source page-turning .fla file is available at www.iparigrafika.hu/pageflip. The URL is well worth a visit if you want to create a commercial site based around the page turn effect quickly (that is, without further extending our version). Although it was created for Flash MX, the downloadable file extends the effect to include tear-off pages, solid pages (for book covers), and page cutouts.

Sham Bhangal is an author of and contributor to numerous books on Flash and ActionScript, including Foundation ActionScript for Flash MX, Flash MX Designer's ActionScript Reference, and Macromedia Flash MX Upgrade Essentials.


In June 2004, O'Reilly Media, Inc., released Flash Hacks .


Return to the Web DevCenter