Learn how to convert Adobe InDesign layout into stunning HTML5 digital flipbook

In this tutorial, learn how to design the index page for a fictional home and lifestyle magazine called "Homelike" in Adobe InDesign and add interactive elements such as navigational buttons from this page to sections in the layout.

You will also learn how to upload the interactive magazine as a digital flipbook, using the platform Flipsnack — a free tool to convert PDFs into stunning HTML5 flip book presentations.

In this lesson, you will need to use the Buttons and Forms as well as Bookmarks panels to set up the navigation from index page to other pages.

Let's set the destinations first, using the Bookmarks panel to have the index page images jump to correlating stories in the flipbook.

Adding Bookmarks

1. Go to Window > Interactive > Bookmarks.

2. Open the Page Panel and double-click the page thumbnail you want to set as a bookmark.

3. In the Bookmarks Panel, click the Plus icon in the bottom right hand corner to create a new bookmark.

4. Rename the bookmark to something that will make it easier to find when you're linking it to the button.

5. Repeat the same steps to create bookmarks for the other images in the Index page in this layout.

Here's a visual overview of the steps mentioned above.

Now that you have set up the Bookmarks, it's time to link them as a button action — essentially taking readers from the opening page to specific sections of a publication.

Go To Destination

1. Go to Window > Interactive > Buttons and Forms

2. Click on the first image in the index and convert it into a button by selection the Type dropdown and selection Button

3. Rename the button to correlate with the page it will direct viewers too. (Example: If you named the Bookmark Home Decor, name the Button Home Decor Index).

4. Under the Action option, click the plus icon to add an action and select Go to Destination.

5. In the Document dropdown, select the InDesign document you are currently working in.

6. In the Destination dropdown, select the bookmark that you want the button to direct to in the document.

7. Set the Zoom option to Inherit, but you can experiment with different Zoom levels to suit your preference.

8. Repeat Steps 2-7 for the other three index images.

Here's a visual overview of the steps explained above.

Follow along in the video tutorial to learn the steps on how to export the pages as PDF and upload to Flipsnack as a HTML5 digital flipbook.

Here's a look at the end product. Feel free to share your flipbook with me (amontilla81@gmail.com) for a potential critique on one of my videos.