Creating Scrollable Content Using InDesign CS5 and Adobe Digital Publishing Suite for iPad

One of the coolest features of publishing to iPad with InDesign CS5 and DPS, is how you can optimize the screen’s real estate by using scrollable frames. Scrollable frames can hold text, images, or both, and allow the viewer to swipe through the content. Here’s how they’re created:

Scrollable frame on Content Viewer

  1. Select the Type Tool and draw a text frame on the page.  Still using the Type Tool, draw a second frame on the pasteboard. The frame on the page is the container that the viewer will scroll through. The text frame on the pasteboard is the content that will feed into the container.
  2. Switch to the Selection Tool and set the width to identical values for both frames. Matching width is especially important to make it work. In the example I created, the frame widths were set to 430 pixels.
  3. Set the fill of both text frames to paper (white).
  4. Enter your content into the frame on the pasteboard. If you wish to use both text and images, the images should be inserted as Anchored Objects. (I won’t be getting into the subtleties of anchored objects here, but this link will take you to an Adobe TV lesson that explains them pretty well.)
  5. To create enough space for all the content, go to Preferences > Guides & Pasteboard and adjust the Vertical Margins in the Pasteboard Options section. In the example, I set the Vertical Margins to 1024 pixels, giving me a total of 2816 pixels of vertical space (1024 + 1024 + 768).Guides & Pasteboard Preferences
  6. With the pasteboard frame selected, switch to the Selection Tool. Go to the Control Panel, and set the X coordinate to 1024 pixels, if using a horizontal layout, or 768 pixels, if using a vertical layout. This is important. The edge of the content frame on the pasteboard, must touch the edge of the page.
    Scrollable Content frame coordinates
  7. Now open the Layers Panel (Window > Layers) and create a new layer. Name this layer, Scrollable Content. Type this carefully,  as the layer name is case-sensitive.
  8. Expand Layer 1 in the Layers Panel by clicking the arrow to the left of the name. The pasteboard content frame should still be selected, so a small square will be displayed in the Layers Panel next to the selected object.  Click, hold and drag the object from Layer 1 to the Scrollable Content layer.
  9. Now you will have to give both the content frame on the Scrollable Content layer, and the container frame on Layer 1, the same name. To rename an object, go to the Layers Panel, click on the object, pause, and click again so that the object name is highlighted. In this example, I named both content and container, recipes.
    Layers Panel
  10. If you are creating both horizontal and vertical versions, select the Scrollable Content layer in the Layers Panel, open the Layers Panel menu, and select Paste Remembers Layer. This will allow you to copy/paste between versions with the Scrollable Content layer functionality intact.
    Paste Remembers Layers

And that’s it! Bundle your file, and test the scrollability on your iPad or the desktop Content Viewer.

Scrollable frame on Content Viewer 1

Scrollable frame on Content Viewer 3

To learn more about InDesign and Adobe Digital Publishing Suite, check out InDesign training on our website. You can hear about our latest Digital Publishing blog posts by subscribing to our newsletter. Click here to subscribe.

About Webucator

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, Azure, Windows, Java, Adobe, Python, SQL, JavaScript, Angular and much more. Check out our complete course catalog.


6 thoughts on “Creating Scrollable Content Using InDesign CS5 and Adobe Digital Publishing Suite for iPad”