So you want to CREatE a flipbook.

Overview

Creating a flipbook can be easy. in most cases you will be converting an existing print document(s) from inDesign to files that will work

with the flash page flip software.

Source files for the flipbook can be found at:172.26.130.13(Design Server) > pRoGRESSiVE Stuff > tutorials/Design Guides > web > flipbook > source files

Grab the entire folder, copy/paste or drag and drop into the working folder of your print document. it’s important to keep the source files seperate from your print files.

open your print-ready document in inDesign. Choose File > Export...

Export Settings:Choose file save destination. you can save directly to pages folder, found inside of the source folder. format: JpEGit’s important what you name your file(s) in the Save As: bar.Make sure to no use any spaces or special characters. See Export settings below:

Export > all, make sure spreads is not checked.image > Quality: High

format Method: baseline Resolution (ppi): 72 Color Space: RGb

options > Check: Embed Color profile, anti-alias, make sure you are NOT exporting bleed.

open any of the JpEG files that were exported in photoshop. Choose Image > Image Size...Record the width and height in pixels of the document. you’ll need this for the next step.

also, you will want to export a pdf (smallest file size/for web) out of inDesign so it can later be downloaded from the flipbook page by the user for later use or print. once the pdf is finished exporting place that file within your source folder.

1

Export

open Pages.xml file in Dreamweaver or text editing software from within the XMl folder.

on the top line of this document you see a line of code. this is where some of the customization of the flipbook is controlled and entered. this is also where we can tell the document what size it needs to render the pages. you’ll see:

<content width=”612” height=”792”...Enter the width and height values you recorded from photoshop.

Some of the other attributes you can customize or control are:background color, loader color, background image, panel color, button color, text color, full screen, and share with a friend.

below the top line of code you will see consecutive lines of this code:<page src=”pages/howtoflipbook.jpg”/>

Each one of these lines represents a page. the XMl document is used to to call the JpEG files you exported from inDesign from your pages folder and into the flash flipbook file.

2

XML

What ever the export file name was from InDesign will need to be replace after the / and before the . This is highlighted in green:

<page src=”pages/howtoflipbook.jpg”/>

So for example, if you named your document dolphins.jpg when exporting out of InDesign, your pages folder will have several numbered files in ascending order:

dolphins.jpgdolphins2.jpgdolphins3.jpgdolphins4.jpg

now you will need to replace the code so that it reflects your files in the pages folder. for example if you had 4 pages in your document and/or pages folder the XMl code would look like:

<page src=”pages/dolphins.jpg”/><page src=”pages/dolphins2.jpg”/><page src=”pages/dolphins3.jpg”/> <page src=”pages/dolphins4.jpg”/>

Save your XMl document.

XML (continued)

3

now, you should be ready to view your newly created flipbook in live action! Go to the source folder, you will see several html documents:

links.html – Controls the styling of the download links. this is also where the path of the downloadable pdf is entered.

book.html – this is the document that holds the flash document that is displaying your exported JpEG pages.

index.html – this holds both the links.html and book.html documents. this is also where you will want to include the tile of your page.

Go ahead and drag either the index.html or book.html into your browser. you will see the pages loading and once complete, you should be able to flip through your document and view each page. you can either use the controls or click and hold the corners of the pages to turn. if everything checks out when testing locally, your job is complete!

Testing

4

tHE EnD.