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.