How to Make an HTML5 Flipbook with Interactivity from InDesign

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.

in5 v3.1 brings the best digital publishing experience so far

in5 v3.1 header collage of new features

Five years ago I had an idea.

I wanted to help my fellow designers publish digitally without relying on coders, and without being beholden to restrictive publishing pipelines.

I launched the project on Kickstarter and 238 people backed the initial version of InDesign to HTML5 (in5).

Thanks to the continued interest and support of many customers, in5 has grown through many updates and has helped designers build better digital publications year after year.

Today I’m announcing another quantum leap forward in what in5 can help designers create—without coding and—using the freedom of an open format.

The new capabilities are almost too numerous to list in a single post, so what follows is a high-level summary of what you can do with in5 version 3.1.

Mobile Article Explorer (in5 v3.1 New Feature)

The Mobile Article Explorer lets your reader’s see the pixel-perfect layout as well as a simple text version of the article that is easy to scroll through.

Check out the video below that features a beautiful layout from Experience Life magazine.

The Mobile Article Explorer widget is available to those with Pro plans (or higher).

It’s just one of the ways that in5 will make your layouts even more reader-friendly.

To learn more about using the Mobile Article Explorer, check out the Creating Your First Interactive Document with InDesign & in5 video course.

3D Interactive Flip Card from InDesign to HTML (in5 v3.1 New Feature)

The introduction of Interactive Widgets now let you create even more interactivity with InDesign and in5.

These widgets make it easy for you to build sophisticated interactivity and animation with a few mouse clicks.

The the 3D Flip Card lets your readers switch Object States in 3D space.

Check out the video below to see the whole process and the beautiful results in just over a minute.

The 3D Flip Card widget is available to those with Pro plans (or higher).

It’s just one of the ways that in5 puts more publishing power in your hands without having to code.

To learn more about using 3D Flip Cards, check out the Creating Your First Interactive Document with InDesign & in5 video course.

How to Publish Interactive HTML to Your Own Server From InDesign

indesign to your own webserver

It’s well-known that Adobe InDesign is a powerful layout tool.

It’s slightly less well-known that InDesign is loaded with interactive capabilities (buttons, object states, animation, audio, video, etc).

These interactive capabilities were partially supported by interactive PDFs…until mobile devices came around.

These devices used all different kinds of PDF reader applications, and none supported the Flash-based interactivity inside the PDFs.

Now even the desktop version of Adobe Reader doesn’t automatically come with the Flash Player installed.

So how can a designer make use of all the interactive tools?

HTML can support the interactivity that PDF does not, and it can be viewed on mobile devices.

InDesign has a “technology preview” called Publish Online that publishes a document as HTML onto Adobe’s servers.

This is an amazingly fast way to get your document online and viewable.

However, the content is only hosted on Adobe servers and cannot be saved, moved, or modified.

What if I want to customize my output? Or host it on my own site? Or make it viewable to search engines? Or create an app?

If you want the files to be your own and to host them on your own servers, etc…you’re in luck, but you’ll need to use a tool other than Publish Online.

Keith Gilbert’s free script

Keith Gilbert discovered a hidden scripting object that let him make use of InDesign’s Publish Online export (essentially the same as the Fixed-Layout ePub export) and save the files locally.

The script is awesome and free, but limited in certain ways (e.g., you have to take some extra steps to create working page navigation, but Keith created a script to help with that as well).

in5 (InDesign to HTML5)

in5 (InDesign to HTML5) logoin5 is a commercial InDesign to HTML exporter that I launched on Kickstarter several years ago and have fine-tuned over multiple versions.

in5 is fully-featured, supports all of InDesign’s interactivity, and lets you add new kinds of interactivity.

It’s easy to customize, built to host on your own site, has easy search engine optimization features, and the output can easily be converted into a mobile app.

Here’s how it works

  1. Create your content with InDesign
  2. Export with in5 (File > Export HTML5 with in5…)

(Yes, it’s that simple).

Check out what customers have already made with in5.

There’s a free course to get your started with in5, which includes a lesson on publishing to your own site.

I’m here if you have any questions or need help with in5.

Happy publishing!