Creating Page Flip Effect

This tutorial will guide you how to animate the pages of a book. It is very simple but you have to clear the place & remove method.

You can download .swf file here.

Lets get started.

Background:

First design a book, it depends on your choice but the pages should be in sequence not out of proportion, those should cover the edges. Just like below:

Steps:

Step 1:

Copy the page you made and paste it in the scene. Now go on its timeline and insert "move" effect on 0 frame, duration should be "5", then on the 6th frame, insert "remove" by right click on the specific frame. No need to animate this one.

Step 2:

Ok, now copy the same page and paste it in the scene, insert "move" effect on its "5" frame and adjust the same duration "5" as before. Then, insert "remove" on the "10" frame. Select the preview frame and stretch the page inside. But do not drag it. Just leave the page as it was only you need to stretch. See the following image:

Step 3:

Follow the same above methods and stretch them in sequential way inside. See the following image:

Click to enlarge

Step 4:

The most important step. Convert all the above pages into sprite, copy this sprite and paste it in the scene. Then, flip them "Horizontally" now ungroup the both sprites. You can check now, that all the shapes are acting like a flying bird . So, you have to arrange them. Follow the points:

1. Drag the "move" effect of the first shape, where the last one of the previous sprite ended. Could not get it?

Ok no problem, see the image:

1.

2.

2. Check them now, they are right but still an error, that they are getting removed and placed without any sequence, its because we did not insert "Stop". You don’t need to stop it otherwise it would stop the animation of the pages, so use "goto frame", it is up to you how long the gap you like. For example, if the complete animation ends on "50" frame so at least you will use goto frame on "70" frame. By following it, the pages’ animation will have gap of 20 frames.

Now check the complete animation. Hope it helps a bit.

Regards