플래시로 ebook 넘기는 효과 관련된 글.

http://oreilly.com/javascript/archive/flashhacks.html

The Page Turn Effect in Flash MX

by Sham Bhangal, author of Flash Hacks
09/03/2004

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 Hacksbook. 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 theonMouseMove handler for the instance line (given that onMouseMove is more efficient than anonEnterFrame when you are dragging), and pageRelease acts as the onRelease handler.

Within pageTurn, the if statement constrains the line between the limits PAGE_EDGE andPAGE_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;

 

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 Hacksbook. 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 namerightMask. 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 Hacksbook. 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. AsbackPage 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, andMacromedia Flash MX Upgrade Essentials.

---

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

• Sample Hack 10, "A Custom Color Transform Glass," (PDF) is available free online.

• You can also look at the Table of Contents of the book.

• For more information, or to order the book, click here.

---

Return to the Web DevCenter