FLASH: PAGE PEEL TRANSITION

 

EXAMPLE

 
Please wait until the picture loads.

 

 

CREATING THE PEEL ANIMATION

 
 

Create a new movie sized 300 by 300.  To make this process easier, I suggest turning on the Snap-to-Object feature.  The animation will be created by utilizing the shape-tween feature in Flash.  The animation will have 4 key frames.

Creating the layers
Create a new layer so that your movie has two layers.  Name the top layer GuideLayer, and name the bottom one AnimLayer.
On GuideLayer, draw a plain yellow rectangle sized 250 x 250 pixels centered of the stage.

Key frame 1 at Frame 1 on AnimLayer: 
A simple rectangle with a dog ear at the lower-right corner the same size and position as the guide rectangle.  An example is shown below.  The circles shown below are shape hints, they aren't actually necessary for this project, but I include them to make the illustration easier to understand.  

Key frame 2 at Frame 20  on AnimLayer: 
Since we will be tweening the shape, do not build this shape from scratch.  Instead, copy from the first frame, then Paste-in-Place at frame 20.  Adjust the corners by moving the endpoints d, e, and f.  If you're having trouble, make sure Snap option on.  

Insert shape-tween between Frame 1 to 20.  After you're done, check to make sure the tween works fine.  Don't continue before it does.

Key frame 3 at Frame 40 on AnimLayer: 
Here, most of the paper should be outside the space previously occupied by the paper.   Copy the first frame, then Paste it so that it's positioned like below.  Then get rid of dog ear by clicking and deleting the lines.  Fill the shape with the same color as the paper (cyan in my example here).  It's important to keep the curve as simple as possible for tweening.  Again, the yellow area is the stage, not part of the shape.

Insert shape-tween between Frame 21 to 40.  Test it, and you can see a big problem.  Here's how frame 22 looks like, it's quite messy.

 

This problem occurs because Frame 20 has 2 shapes and 6 corners; whereas Frame 40 only has 1 shape with 5 corners.  What we need to do is to insert another key frame that takes care of this transition problem.

Keyframe 4 at Frame 21 on AnimLayer: 
Why Frame 21?  Because in Frame 20, the front side of the paper is almost invisible, so we can get rid of that front side completely here.  The easy way to do this is to draw a rectangle covering half of the paper area.  Then create two more corner points like below.

Test the movie.  You can adjust the keyframes if you feel the animation is too slow.

 

To make the page look better, let's change the paper color to white and fill the back side with gradient.  For example, here's the gradient fill for Frame 20.  I just use the preset white-to-gray gradient.

Here's how it looks now.

 

 
 

<<NEXT PAGE>>
<<
INDEX>>

(C) F. Permadi
permadi@permadi.com