FlipBooks from InDesign

Flipbooks and page turning effects have been around for years; a variety of flash plug-ins, conversion services and source files have made them accessible to everyone. Though print designers have been able to export flipbooks directly from Adobe inDesign since version CS4, the tutorials and sample files here will help you get the most from the effect.

Along with a set of video instructions on how to fine-tune the InDesign export process to produce more attractive results, I’ve developed a “book scaler” in flash that allows adjustment of a book’s size relative to the screen. An “autoscale” feature fits the book to a viewer’s screen when it first opens. “Page jump” buttons have been added for the front and back covers, table of contents, next and previous pages or any page number you care to type in. An invisible “drag area” in the book’s gutter/spine allows it to be manually positioned on-screen. Optional settings allow ranges of pages to be hidden from the viewer. The full source code is available to customize, but is set up so people with no coding skills can easily modify it to suit their purposes.

Who is this for?

  • Designers more comfortable working with print than interactive media can produce interactive portfolios that show their work in an engaging way.
  • Publication designers can produce digital proofs or include multi-page projects in their portfolio sites.
  • Authors can release printed works without the loss of formatting or typographical design associated with export to ePub and similar eBook formats.
  • Authors wishing to serialize their work can do so without having to export a partial book file each time they introduce a new chapter.
  • Anyone wishing to release an eBook can do so in a single, freely available format that runs in any browser on any desktop.

Who is this not for?

  • If you want your book to be viewable on most eReader platforms, you’ll need to export to Adobe PDF, ePub or the proprietary format associated with a particular eReader. Though the tutorial does not currently cover Adobe AIR export, it is possible to use Adobe AIR to create apps for Android and iPhone/iPad platforms. However, if you need your content to be viewable on all mobile browsers, you should consider using HTML/CSS and related technologies as an alternative to the flipbook format.
  • Good print design does not always translate directly to good interactive design. If your content does not lend itself to good “book presentation,” consider a different design approach. The flipbook effect is fantastic when used appropriately, but there’s a reason most websites aren’t realized in flipbook form. There are many, powerful and effective aesthetic directions and technologies; choose the right tool for the job.
  • Indesign ‘Export to SWF’ flipbooks do not include searchable text or text that’s available to sight-impaired people. Though there is an ‘Export to Flash’ function that allows embedded text, the flipbook effect is primarily of value as a visual effect.

Examples

  • A portfolio site mockup with interactive thumbnails exported from Adobe inDesign
  • A serialized novel that preserves the original book layout and typography. Though the entire book is online, the page-restriction features allow only author-specified pages at the beginning and end of the book to be viewed.

Planned Updates

    I’m continually expanding on the capabilities of the book scaler and am currently on version 5. Future versions will include the following features:
  • Add bookmarks and store them in a shared object (the flash equivalent of a browser cookie).
  • “E-Reader mode” for small screens – this will center the current page on screen, shuffling the spread left and right as “next page” and “previous page” buttons are clicked so that only a single page is in view at a time. Help windows and navigation bars will scale to fit the screen.

Download the files

    Download the files here. Included is an Adobe InDesign file set up as a small photographer’s portfolio site with interactive thumbnails, a bookScalerAutoSize.fla file that loads the exported inDesign file and adds the scaling and navigation features, and the necessary HTML and swfObject.js file that load the book into a browser at “full-screen size.

What does it offer?

Greatly extends the functionality of flash flipbooks exported from Adobe InDesign CS4 or higher.

Scale a book between 50% and 200% of its original exported size without blurring the text with a simple slider control.

Choose to load the book at a preset scale or have it automatically scale to fit the browser window its loaded into.

Adds navigation buttons for front cover, back cover, table of contents, next page, previous page and table of contents.

Adds a “page jump” window where the viewer can type in a page number and jump to it instantly or at the click of a button.

Easily configurable without opening flash by editing a simple XML text file. A clearly written manual is available online and video tutorials are provided

Allow viewers to see the entire book or a range of pages at the front and/or back. This is useful for offering a new chapter at regular intervals (for example) without having to export a new version of the book from InDesign each time.

Jump to any page by passing a query through the URL. In English, this means you can add “?p=25″ to the book’s web address and it will open to that page when it loads.

Smart navigation hints and help screens that remind the viewer to use navigation features they’ve missed after a specified amount of time passes. If the features are used, the hinting is disabled.

Full source files for both Flash and InDesign available to download, study and customize.

Actionscript 3 source code is fully commented

Learn how to set it up

    It’s easy to configure the book scaler without editing in Flash by modifying a simple file in any text editor. Detailed instructions for configuring the XML file are available in (of course) flipbook form at http://onehourselfpub.com/flipmanual/

Video Tutorials

    Video tutorials cover the entire process from setting up the inDesign file to configuring the book scaler to setting up the HTML file to display your book. The tutorials can be viewed in the YouTube play list below. All are recorded at 1080p high definition, so use the full-screen viewing to see the fine details.

 

Why Am I Doing This?

    I’m a University graphic and interactive design professor, a novelist and the author of a nonfiction book about self-publishing. By developing new and better tools for pushing my own creative work farther into the stream, I empower designers and writers to share their work in engaging formats that don’t require royalty-sharing or adaptation to proprietary standards that aren’t friendly to design and typography. For more information about my books and writing, see www.EssentialAbsurdities.com