The Page Turn Effect in Flash MX

In Hack #25 of Flash Hacks, I talk in general terms about how symmetry can aid the thought and design processes when you are developing scripted effects, because symmetry is a very common feature in both natural and man-made effects. I go on to show how to deconstruct one of the most recent "How is that done?" effects, the page turn, by looking for symmetry in the effect. What I don't cover is how to develop code that can be used to create the page turn effect. This article provides that part of the equation.

The development of the page turn hack is a useful exercise to develop, because it contains three of the most common tricks in Flash motion graphics effects--property-based animation, embedded movie clips, and masking. The last two are features that seem to confuse developers coming to Flash from other web programming languages. Having a good understanding of how these two features are used in the page turning exercise is instructive in learning how complex graphical effects are built up in Flash, because you can rarely create such effects using traditional property-based animation alone.

The source files developed in this article can be found on the download page for the Flash Hacks book. Although the code presented in this article is for Flash MX 2004, you will also find additional source files that are compatible with Flash MX for this hack (and almost all of the other hacks in the book) on the download page.

Symmetry and Page Turning

The symmetry of a turning page is shown below. Assuming that the turning page is folded right over, the shape of the two revealed pages is always symmetrical around the fold.

Four stages in a page turn. The dotted line shows the page fold, and this is also the line of symmetry

In any coded version of the page turn effect, creating this line of symmetry is a crucial first step.

During the page turn, a number of things happen.

The first is that the original page (area a) slowly disappears, and is replaced by the reverse edge of the turning page (area c). As the original page disappears, the page underneath it appears (area b).

The changes that occur as the page turns

The second step in working out how to create the code is in deciding which of the three areas (a, b, or c) that our code has to control. Symmetry tells us that we will have a much easier life if we chose to consider b and c. How do I know that a is irrelevant?

• Area a is not symmetrical and is also an irregular shape. This would make it difficult to form equations that describe area a.

• Areas b and c are symmetrical images of each other. We can immediately see from this that areas b and c must be part of the same process, and this makes their motion easier to implement in code.

Not only does symmetry help us deduce the way the page turn works, but considering symmetry also helps us to find the easiest solution!

We can now split the process of finding a programmed solution to animating the page turn effect into three parts:

• Creating the line of symmetry.

• Creating the animation of area b.

• Creating the animation of area c.

We will tackle each in turn below.

Creating the Line of Symmetry

Looking at the previous diagrams, we see that the line of symmetry in the page turn effect starts at 45 degrees and moves towards the book spine. As it reaches the spine, the line of symmetry is at 90 degrees (straight up), giving us a fully open page on either side of the line of symmetry.

The interactive diagram below shows the required motion for the line of symmetry. Click-drag the circle at the bottom of the dotted line to see the line of symmetry move as per the final effect.

The source .fla for this animation, pageTurn01.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 line of symmetry is constrained between the left and right edges of the page-- PAGE_SPINE and PAGE_EDGE.

• The line is at 90 degrees when it is at PAGE_SPINE.

• The line is at 45 degrees when it is at PAGE_EDGE.

This gives us the following equation for the angle of the line of symmetry, assuming that we have created this line as a movie clip with instance name line:

line._rotation = 45*(line._x-PAGE_SPINE)/page._width;

(Note: the line movie clip points straight up when it is at 90 degrees; hence, the above equation is really subtracting an angle between 0 and 45 degrees as the position of the line is moved between PAGE_SPINE and PAGE_EDGE.)

The rest of the code in the listing is pretty self-explanatory. The function pageTurn runs as the onMouseMove handler for the instance line (given that onMouseMove is more efficient than an onEnterFrame when you are dragging), and pageRelease acts as the onRelease handler.

Within pageTurn, the if statement constrains the line between the limits PAGE_EDGE and PAGE_SPINE. The updateAfterEvent() makes sure that the line is animated whenever the mouse moves. (This is usually much faster than every frame, thus ensuring smoother animation than if we had used an onEnterFrame, as per Hack #71 in the Flash Hacks book, which talks about a performance budget and the best use of each event to build responsive animation.)

The pageRelease function simply deletes the onMouseMove handler, which makes sure that animation stops when you release the line movie clip.

function pageTurn():Void {
  line.onMouseMove = function() {
      line._x = _xmouse;
      if (line._x>PAGE_EDGE) {
        line._x = PAGE_EDGE;
      } else if (line._x<PAGE_SPINE) {
        line._x = PAGE_SPINE;
      }
    line._rotation = 45*(line._x-PAGE_SPINE)/page._width;
    updateAfterEvent()
  };
}
function pageRelease():Void {
  delete line.onMouseMove;
}
var PAGE_SPINE:Number = page._x;
var PAGE_EDGE:Number = page._x+page._width;
var lineAngle:Number = 45;
line.hotspot.onPress = pageTurn;
line.hotspot.onRelease = pageRelease;
line.hotspot.onReleaseOutside = pageRelease;