Hack 25 A Page-Turn Effect (Exploit Symmetry and Masking)

Create a page-turn animation and other Flash effects with scripted drawing and masks, and by exploiting symmetry.

Many designers see clever Flash effects, and think, "Wow! I wonder how that works!" After reviewing the initial draft of this chapter, I couldn't help but think there was one important hack missing: how to think up drawing effects yourself or how to deconstruct drawing tricks created by other designers. To be able to see how to create an effect simply by looking at the SWF online may seem like a dark art, but it can be done as long as you are looking out for the most common structures (rather like being able to replay a piece of music on a guitar after hearing the music several times).

In this hack, I show how I deconstructed the effect du jour: the page turn. First though, let's look at the most common structure of all: symmetry. And our old friend masking comes in handy, too.

A Mathematical Hall of Mirrors

In mathematics, something on the left side of an equation is equated to something on the right:

3 = 1+2

e = mc2

Many designers I know start backing toward the door as soon as they see an equation because they don't like to think nonvisually. Of course, that ignores the fact that the preceding equations are simply a way to quickly express a visual concept: symmetry.

The equals sign is just a formalized way of representing a mirror. The lefthand side is the same as the righthand side. As soon as you know that, you have a powerful tool to plan drawing effects. (Don't confuse the equals sign in common mathematics with the ActionScript assignment operator, =. In ActionScript, the = operator is used to evaluate the expression on the right side and assign it to the variable or property on the left. This hack is talking about symmetry/equality in the mathematical sense, not the programming sense. For what it's worth, ActionScript uses the == and === operators to test whether two expressions are equal.)

Whenever you are planning an effect (or trying to deconstruct this month's popular Flash trick), look for symmetry and mark it up on a diagram. To show this in practice, let's look at an effect that, on the face of it, looks very complicated. Although it appears nonobvious, it's based on simple symmetry.

Page Turning

One of the classic recent Flash tricks is the page-turn effect (see http://welcome.hp.com/country/us/en/msg/corp/flashdreamworks.html for one of the earliest examples of it). When discussing the initial ideas for this hacks book, my editor, Bruce Epstein, said, "It would be cool if we could get the page-turning effect in the book. I saw Erik Natzke outline the process briefly in his Flash Forward session. Do you know how it is done?" I did not have a clue how to do it, but while we were speaking, I was sketching (like many people, I'm always sketching when I'm on the phone; it helps me to think). Figure 3-47 shows what I drew.

Figure 3-47. The solution to the page-turning effect

Figure 3-47 depicts my solution to the page-turning effect! It describes the single premise behind the whole effect, and as soon as I'd drawn it, I said to Bruce, "I think it won't take me long to figure out the page-turning effect, let's add it."

What does this sketch mean, and how did I come to draw it?

First, I knew the page-turning effect has something to do with page turning (duh), so I drew a turning page.

Next, I knew that most scripted drawing problems use symmetry somewhere, so I kept looking at the diagram until I found a symmetrical structure. In this case, it was staring me in the face. The triangle that represents the turning page is the mirror image of the triangle that is the revealed page below it. The two triangles are symmetrical about the dotted line A with an equals sign through it, shown in Figure 3-47. At the end of the page-turning animation, we have two new pages, which are still symmetrical (about the book spine). All that has really happened is that symmetry line A has moved so it is now line B. The scripting for the page-turning animation is fundamentally concerned only with moving the line of symmetry during the animation!

Sometimes symmetry is seen in nature as related concepts, fractals (mirroring the same process at all levels) and particles (creating large effects with lots of little identical effects). Nature also tends to arrange symmetry into hierarchies, so that symmetry can be recursive as in the branching of a tree [Hack #6].

All these more complex effects are rooted in symmetry, and you will be hard pressed to find many Flash drawing effects that do not use symmetry (often combined with a slightly random behavior to prevent things from looking too symmetrical).

The sketch in Figure 3-47 is what I call a "visual equation." Like a math equation, it has an equals sign in it, but I am keeping the equation true to its original form—a visual representation of the problem—rather than moving over to the symbolic world of math equations. The sketch tells me that something is symmetrical (equal) about the dotted lines.

The center line with an equals sign through it is just my shorthand; it is not a standard symbol. In geometry, however, it is typical to draw hash marks through two line segments to indicate they are equal or proportional to each other.

Okay, so that's the premise. How does it actually work in practice? Well, we now need to work out the relationships that describe what happens over time.

The one thing that is changing over the course of the animation (shown here via the four pictures, left to right, in Figure 3-48) is the position of the line of symmetry. It starts off at 45 degrees at the righthand corner of the turning page and ends up at the lefthand corner of the same page and at 90 degrees (i.e., pointing straight up).

Figure 3-48. The line of symmetry moving over time

The line of symmetry is only the concept behind the effect, not the effect itself (an important point to remember when you generalize!). To create the effect, we need to break it down further into things that can be implemented. Figure 3-49 shows my route to this solution.

Figure 3-49. One of the two masks controlled by the line of symmetry

The effect animates by moving two movie clips around the symmetry line. One of these is the image for the reverse of the turning page (we will call this reverse_mc for clarity). It starts off rotated by 90 degrees, at the position of the dotted rectangle in Figure 3-49. The clip reverse_mc tries to make its right edge parallel to and at the same position as the symmetry line. The other clip is the mask for reverse_mc, which we will call maskReverse_mc. This clip starts off at 45 degrees but tries to get to the same end position as reverse_mc. This means that at the end of the animation, the reverse_mc clip is fully visible because none of it is masked out.

From symmetry, you can also see that the light gray area in Figure 3-49 (the visible area of the new page) is the symmetrical opposite of the area we just discussed. The revealed clip stays stationary, but its mask clip is very similar to maskReverse_mc. It moves in the same way but is mirrored around our symmetry line. Figure 3-50 shows this new mask as maskNew_mc.

Figure 3-50. The mirrored mask

The fact that the two masks are placed symmetrically around the symmetry line is, of course, one big reason why the area of the turning page and revealed page underneath are symmetrical. There is a hierarchy of symmetry revealed here, and it should be obvious by now that the whole effect is just a series of fiendishly placed mirrors!

Final Thoughts

The page-turning effect was first created by Erik Natzke (http://www.natzke.com), a designer whose SWFs tend to be very visual. Looking at his work in particular, I can see that many of his drawing engines are based on symmetry or particle effects (and sometimes both). Taking on that same mindset does more than just reproduce Erik's work—it allows you to expand from it.

These hacks show the core trick behind the page-turning effect to illuminate a common way to deconstruct such effects:

• Look for and pick out basic structures (of which symmetry is the most common, but they may also appear as fractal or particle effects), and then sketch diagrams showing where in the effect they exist, using whatever visual shorthand you feel comfortable with.

• Expand the idea with further sketches that look to build from the basic idea and move it toward implementation in Flash. As a general rule, if you can't see what could create the effect, then it is probably a mask. Based on experience, I can say that masking combined with scripting usually creates the most nonobvious tricks.

• Don't worry about moving the concepts into written math straight away, because visually representing processes makes it easier to pick out patterns or useful high-level concepts. Despite their big advantages, math equations are actually very poor at giving you something that you can visualize immediately. Equations are more symbolic than visual (which is, I guess, the reason the more visual designers intuitively dislike them!).

This hack concentrates on finding the hack rather than implementing it. I hope you will agree that this is a more important ability. It's the key that will open up next year's big Flash drawing trick as well as the current king of the hill. That said, a sample implementation of this effect, pageturn.fla, can be downloaded from this book's web site.