Becoming a Digital Publishing Master with in5

Images from apps and sites created with in5.

This course will teach you how to use InDesign and in5 to create beautiful and accessible sites and mobile apps. Learn to become a master of digital publishing from the ground up by using familiar design tools.

For full course details, visit the main course page.

Lesson 18: How to Create Long, Scrolling Pages

Tall, vertically-scrolling chapters, along with horizontal swipe navigation can make for a dynamic digital publication. This lesson will show you how to create tall, scrolling chapters.

Expert Contributors to this lesson

Justin Putney

Justin Putney

Creator of in5

Today's Course Outline

  1. Creating a Tall Page with New Content
  2. Creating a Tall Page from Existing Content
  3. Linking within a Tall Page
  4. Exporting Tall Pages
  5. Bonus Video

Estimated time for lesson

Today’s lesson should take approximately 10 minutes with the video.

There are a couple of ways to create tall "chapters" from InDesign.

Creating a Tall Page with New Content

If you haven't already laid out the content in InDesign, the simplest way to create a tall page is using the Page tool.

page tool lets you resize pages

You can then type a new Height (H) value into the Control bar.

If you want your page to be a multiple of the single page height (e.g., 3 pages tall), you can use an asterisk (*).set the page height using multiplication

Appending * 3 will make the page 3 times as tall. Hit Enter to apply the change.

the resulting tall page

Your tall page is ready for content.

Creating a Tall Page from Existing Content

If you already have pages that you'd like to merge into a tall chapter, in5 comes with a free script to make it a snap.

Open the Scripts panel (Window > Utilities > Scripts) and expand the Application > Ajar Productions directory.

Double-click the Merge Pages Vertically.jsxbin file to run the script.

script dialog

Set the starting page and the number of subsequent pages to merge and click OK.

the completed results of the script - a merged tall page

The script merges the pages into one tall chapter.

Linking within a Tall Page

If you want to link to a specific location inside of a tall page (e.g., halfway down), you'll need to create an anchor.

Creating a Bookmark Anchor

Figure out where you want your link to take the reader (e.g., halfway down) and create a new text frame (or select an existing one) and double-click inside the text.

Open the Bookmarks panel and create a new bookmark.

new bookmark in the bookmarks panel

Note that the bookmark has an anchor icon, indicating that it points to a specific location inside a text frame.

Linking to the Bookmark Anchor

Next, create a new button.

Inside the Buttons and Forms panel, click the plus sign (+) to add a new Go to Destination Action.

go to destination action in the buttons panel

Make sure the bookmark that you created is selected in the Destination field.

myanchor destination selected

Note: the Zoom option is not used by in5.

Clicking the button will now take the reader to the tall page and scroll to the anchor location.

Exporting Tall Pages

There's no magic trick to exporting tall pages with in5. Tall pages are supported with all of the Slider and Continuous Scroll Page Formats and all of the different Output formats.

You can use them with Baker Framework apps, Liquid State apps, PhoneGap Build apps and even websites.

Tall pages will automatically return to the top when you revisit them (unless you link to an anchor as shown above).

Bonus Video

The following video shows tall pages inside of a Baker Framework app, as well as the creation techniques covered in the text above.

 

Take Aways

  • Tall pages are easily created with the Page tool or a free script that comes installed with in5.
  • You can link to locations within a tall page using a Bookmark anchor.
  • You can create a beautiful, touch-enabled publications with InDesign and in5 using simple techniques like tall pages.

Create tall, scrolling chapters for digital apps & sites right from InDesign