This memo describes how to create a pageflip book, like the example below (click on the picture to see it live).
What you need:
- The FlashPageFlip engine which you can get for free at http://www.flashpageflip.com
- Your book pages, in JPEG format.
- A server to host your book on.
Step 1: When you unpack the zip file, go to the folder “Free Version”. You will need to modify the file “Default.html”, the contents in “pages’ and the file “Pages.xml” in the xml folder. You don’t need to touch the other files/folders!
Step 2: You need to decide how big your pages are going to be. In my example, I have used the dimensions 800×586 pixels, but this depends of course on your book.
To resize my original book pages (which are much larger, of course) I use the Image Processor from within Bridge.
The picture above shows how I have selected my book pages in Bridge. For the Pixopolis books, the first (left) page is always a blank, as well as the last (right) page. I include these in the resizing process as well, but you only need to do this if you plan to use the cover page as well. If you don’t have a cover, skip the blank pages!
Select all the pages you want to resize, then choose Tools>Photoshop>Image processor… and fill in the details as shown below.
Notice that I resize the pages to fit within a 800×800 window and I set the quality to 8 so the pages load a bit quicker while still retaining quality. I also make sure the pages are converted to sRGB as most web browsers are not color aware. Finally I select a folder where I want all my 800 pixel pages to end up. They will actually be stored in a subfolder called JPEG, but I think you will find them.
You can do web sharpening at the same time by first creating an action in Photoshop that uses the Smart Sharpen filter with e.g. 85% and radius 0.3 and including a call to this action at the bottom of the Image processor dialogue (not shown in this example).
If you want to incorporate the cover of the book as well, I recommend that you load the cover page into Photoshop and use the crop tool set to 800×586 (in my case) and crop out the right half of the cover. Then do Image>Image size… and resize it to 800×586 and save it as CoverR.jpg. Repeat for the left half. With most books you have to sacrifice part of the cover to get the same aspect ratio as the pages, and you will probably be struggling where to put the spine – on the left, on the right, or cut in half?
Step 3: Copy all your 800 pixel pages (optionally including the cover) to the folder called “pages”.
Step 4: Edit the file “Pages.xml” in the folder “xml”. I marked the parts you have to change with, eh, pink.
The first page in my book is the right part of the cover. After that I have a blank page (Page00L.jpg), followed by my first “real” page. At the end, I finish with the last “real” page (Page16L.jpg) and a blank page (Page16R.jpg) and finally the left part of the cover.
Step 5: This step is easy. Change the line
<title>Flash Page Flip</title>
in the file “Defaults.html” to something like
<title>Kristina & Johan</title>
You may also want to rename the file to index.html so people don’t have to include Defaults.html in the web address.
Open the file in your web browser and see if it works!
Step 6: Change the name of “Free Version” to e.g. “kristina+johan” and upload the files to your server.
Finally: There are lots of other things you can do with FlashPageFlip, but this will at least get you started. Once you have done your first book, it is very easy to copy the entire folder to a new place and fill it up with some new pages. With some actions and a smart FTP-agent, you can do this reasonably fast.