Build 3D Page flipping effect with flash component

Today, i am going to have a tutorial on how to create a 3d page flipping effect with flash component. There exist many page flipping solution around the net. But this one – PageTurn 3D is awsome. It has a relistic 3d page turn effect and i think it is very easy to use. Here is a tutorial how i use it to create a flipping book.

Step 1. Prepare images for each page from a pdf.

First, you need to prepare images for building the book. If you have Acrobat, you can simply export the pdf to jpg from the export menu. Then, you will create a sequence of jpg with file name arrange by page number.

Or, if you are not working from a pdf. You can save from other program to the jpeg files.

Step 2. Create a config xml for the components.

After you have the image of each page, you need to create a xml for config. The xml is use to describe which image use in your book.

If you have Photoshop, you can create the xml automatically. In Photoshop, goto menu>file>automate>Web Photo Gallery. Then, you will see the interface to create a web photo gallery from a bundle of images. Choose the folder which you put the images from step 1 and then choose the destination folder. You can save in a sub folder in your working folder for better management. After press the ok button, you will see photoshop automatically resize the photo and save in the destincation folder with a photos.xml generated.

If you havn’t photoshop, you can create your own xml. Open up any text editor. Copy the code below. Each <item> tag is describing a page in the book. You need to set the “path” attribes and the dimension of the file by width and height. Remember to add type = “bitmapfile”, this indicate the page is from a image file. After finish editing, save the xml inside the folder where you put your images.

<items id = “items” relativepath=”true”>

<item path = “page1.jpg” width = “450″ height = “800″ type = “bitmapfile”>
</item>

<item path = “page2.jpg” width = “450″ height = “800″ type = “bitmapfile”>
</item>

</items>

Step 3. Setup the component in a project.

This is the easy step. Create a new ActionScript 3.0 project or open your working project. Save it in the working folder. Make sure you have same the images and xml in the same working folder.

Open component panel, press command + F7 is OS X or ALT +F7 in windows. You will see the PageTurn 3D component sitting under the digicrafts catalog if you install it properly.

Drag from the panel to the stage. Resize it to what you want.

Make sure you selecting the component. Press Shift+F7 to open up the component inspector. Then, you will see the setting of the component. You can play around it.

Then, fill in the path to the xml which you created below in the field show below. The path should be relative path.

Almost done, you can futher customize the book from the component inspector. The setting is displayed in real time. Just play around with your eye and hand.

Then you can test the movie. You will see a flipping book in 3d. You can drag on the page and see the realistic page flipping effect. When click on it, you can zoom in the page view.

Step 4. Add control to the component.

Last, i want to add button to control the navigation of the book.

First, I drag 2 button from the component panel to the stage.

Then, i give a instance name to them. I call them “NEXT_BTN” and “LAST_BTN”.

Select the PageTurn component and open up the component inspector. Goto interactive section. You will see the field for fill in the next and prev control button. I filled in with my button name
“NEXT_BTN” and “LAST_BTN”.

That all, you can test the movie. You can now navigate the book by the button.

If you interesting on this components, you can get the demo from here. Or, you can buy it from digicrafts.