Tutorial: Exporting a Flash Flipbook from inDesign CS5

Note: This book scaler is a semi-finalist entry in the 2011 Adobe Design Achievement Awards Education Category.

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

By popular request, full-screen capability is now available.

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

Download the flipbook scaler 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.

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.

Recent Updates (Version 7)

  • By popular request, full-screen mode is now implemented. A new “enableFullScreen” parameter is added to the XML file. When set to “true,” a full-screen toggle button appears in the upper right-hand corner next to the “help” icon. NOTE: input text is not available in Flash when full-screen mode is active. The page jump box is hidden and associated controls are hidden or revealed as the screen mode is switched.
  • The swfObject.js javascript that loads bookscaler.swf into the browser has been updated to the most recent version along with index.html. This also includes an expressInstall.swf file that will offer to install flash in cases when the plug-in is not available.
  • If viewed on a tiny screen (like on a mobile device), the help screen will scale to fit the monitor. It no longer shows up as a tiny rectangle that can’t be read.
  • Color setting controls for a preloader progress bar are now available in the XML. These were installed in verson 6 which I never released because it wasn’t a significant enough upgrade to bother with. Hence, version 7 follows version 5.
  • A bug was fixed where flipbooks containing video did not center properly while being resized.The fix assumes there is no video on the cover (first) spread.

Planned Updates

    I’m continually expanding on the capabilities of the book scaler and am currently on version 7. 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.

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 flipbook 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 flipbook 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 flipbook’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 flipbook 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 here.

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.

If you do find the bookscaler useful, consider purchasing one of my novels  or the One Hour Guide to Self Publishing from your favorite online book retailer.

Flipbook FAQ & Technical Notes

Q: Where can I download the files?
A: Download the files here.

Q: I can’t get the “Front Cover” button to take me to the front cover.
A. Usually, Adobe InDesign exports a flipbook swf file that has en empty first frame. Once in a while, it doesn’t and the first page is on frame 1. If that happens, open bookscaler.fla and change the following code in the actionscript on frame 1 of the man timeline:

Line 454: Usually sends the timeline to frame 2. We want frame 1 for your book

function showFrontCover(evt:Event) {//used on mouse-out to restore scale text
    scaleControl.outputBox.text = "SCALE " + Math.round(flipbook.scaleX * 100) + "%";
    flipbook.bookLoader.content.gotoAndStop(1); //CHANGE THIS VALUE TO 1
    showAppropriateButtons();
}

Line 550: Usually checks if the timeline <= frame 2. We want frame 1 for your book

if(flipbook.bookLoader.content.currentFrame <= 1) { //CHANGE THIS VALUE TO 1
    scaleControl.frontCoverBtn.alpha =.5;
    scaleControl.frontCoverBtn.removeEventListener(MouseEvent.CLICK,showFrontCover);
    scaleControl.prevpage.alpha =.5;
    scaleControl.prevpage.removeEventListener(MouseEvent.CLICK,showPrevPage);
}