How to Make an HTML5 Flipbook with Interactivity from InDesign

Justin | design,HTML5,InDesign | Tuesday, November 7th, 2017

header image with InDesign logo and HTML5 logo

By creating a flipbook directly from InDesign—rather than from a secondary format like PDF—you’ll be able to take advantage of all the rich interactivity from InDesign that isn’t supported in PDF.

How to create an HTML5 Flipbook from InDesign in a nutshell

  1. Build your document with Adobe InDesign
  2. Add interactivity using InDesign’s built in panels (Buttons, Animation, Object States, Hyperlinks, Video, etc)
  3. Install in5 (InDesign to HTML5) and restart InDesign
  4. Export your document to HTML5 with in5 and choose Flipbook with Page Peel as the Page Format

To understand these steps in detail, continue reading below.

Short on time? Download these steps as a one-page cheatsheet.

Build your document with Adobe InDesign

InDesign's pages panelIf you’re a designer, then it’s likely that you already use InDesign.

InDesign is the world’s number one page layout tool.

If you’re a designer and you don’t know how to use InDesign, it’s time to start learning, because this knowledge will be expected of you in nearly any design job.

So why start building a page layout anywhere else?

Add Interactivity

InDesign's animation panelBecause you’re going to export directly from InDesign, you can take advantage of all of the interactivity built into InDesign.

  • Buttons and Form Elements
  • Animation
  • Timing
  • Hyperlinks
  • Audio
  • Video
  • Object States

in5 also supports Overlays (from DPS/AEM Mobile) and has additional interactive capabilities (like 3D Flip Cards).

Install in5 (InDesign to HTML5)

in5 is the export tool that will let you create a flipbook directly from InDesign.

To install in5

  1. Get in5 from the download page
  2. Unzip the package and double-click on the installer that matches your system (Mac/Win).
  3. Follow the onscreen instructions.
  4. Restart InDesign.

Export as an HTML5 Flipbook

flipbook with page peel option in the user interface of the export dialogOnce in5 is installed, you can choose File > Export HTML5 with in5… to export your document.

Choose the Flipbook with Page Peel option from the Page Format menu before clicking OK to export.

When the export is done, you can choose Open in Default Browser to see your HTML5 flipbook.

Bonus: Responsiveness and Scaling to the Browser

Your flipbook will be responsive by default.

In narrow (portrait) browser windows, only one page will be shown.

In wider (landscape) browser windows, a two-page spread will be displayed.

If you’d also like to see your flipbook layout scale proportionally to the browser window, use the Desktop Scaling and Mobile Device Viewport Zoom settings found in the Advanced section of the in5 dialog.

desktop scaling with matching mobile viewport setting in UI

Now you have a beautiful, interactive flipbook that plays well on desktop and mobile devices. 🙂

Want a quick way to remember how to create a flipbook?
Get the one-page cheatsheet

Join the newsletter & get the InDesign Flipbook Cheatsheet

Flipbook_cheatsheet

Sign up now and I'll send you these steps as a 1-page cheatsheet.

As a subscriber, I'll also send you additional InDesign and HTML tips.

Powered by ConvertKit

Leave a Reply

Your email address will not be published. Required fields are marked *