You are Here:Home>>Old Posts>>Build 3D Page flipping effect with flash component

Build 3D Page flipping effect with flash component

Carlos Pinho
By | 2009-04-22T06:46:26+00:00 Apr 22, 2009|Old Posts|

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.

coverpage

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.

fig21

fig31

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.

fig41
fig51

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.

fig61

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

fig71

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.

fig81

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

fig91

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.

fig101

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.

fig111

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.

fig12

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

fog13

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”.

fig14

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

fig152

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

About the Author:

Carlos Pinho
A father, a husband and a geek... Carlos was the founder of projects like The Tech Labs and Flash Enabled Blog. He is the founder of TekTuts He is passionate about technologies. Their main skills are in analytics, transport & logistics, business administration. He also writes about programming resources, trends, strategy and web development.