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 9: Adding Interactivity with Overlays

A solid layout and great graphics are a good start, but interactivity will help your website or app engage viewers. In this lesson, Keith Gilbert will help you take designs to the next level.

Expert Contributors to this lesson

Keith Gilbert

Keith Gilbert

Digital Publishing consultant

Today's Course Outline

  1. Slideshows
  2. Image Sequence
  3. Scrollable Frame
  4. Pan & Zoom
  5. Web Content
  6. Video Demo

Estimated time for lesson

Today’s lesson should take approximately 20 minutes.

Be sure to watch the video at the end to see all of the interactivity in action.

In addition to supporting multi-state objects, buttons and forms, hyperlinks, and the animation and timing panels, in5 also supports interactive DPS “overlays”.

These interactive items are created with the DPS Folio Overlays panel in InDesign CS6 and CC 2014 and the Overlays panel in InDesign CC 2015. This panel provides some unique interactive features and options that can’t be created any other way in InDesign.

The panel is located in Window > Folio Overlays (InDesign CS6 and InDesign CC 2014) or Window > Overlays (InDesign CC 2015). If you don’t see this option in your menu, you will need to install the panel from this link for Mac (or Windows).

overlays panel

If you attempt to poke around this panel, you’ll see that you can’t access most of it’s options. That’s because this panel only becomes useful after you’ve done some other things first.

Keep reading, and I’ll show you how.

Slideshows

Slideshows can be created with just a combination of multi-state objects and buttons, as explained in another tutorial. But the DPS Slideshow overlay adds some additional capabilities to slideshows.

To create a slideshow overlay, just select a multi-state object with the Selection tool, and click Slideshow in the Overlays panel.

slideshow overlay

Auto Play

If you select this option, the slideshow will begin to play automatically when it appears on the screen. This can be used not only for slideshows, but for creating very simple, low-frame-rate animation. When this option is selected, the Delay, Interval, Play, Loop, and Stop at Last image options become available.

Tap to play/pause

This allows the user to tap the slideshow to cause it to begin playing, or to pause the playback.

Cross Fade

This can be set to any value between .125 and 60 seconds. This is how quickly a slide transitions into the next slide. Slideshows created without the Overlays panel have no transition between slides. Setting a transition speed of .5 seconds or so provides for a nice fluid movement between slides.

Creating Slideshows with the Overlays panel lets you crossfade images

Swipe to change image

This allows the user to swipe to navigate from image to image in the slideshow.

Note: The Export Format in PDF Articles setting has no affect on in5 output.

More information about these and the other settings in this panel can be found in this section of the DPS on-line help.

Image sequence

Image sequences are extremely versatile, and very useful. An image sequence is simply a series of two or more jpeg or png images that can be set to either play automatically, or play as the user scrubs across a frame.

Image sequences can be used to:

To create an image sequence:

  1. Create a series of jpeg or png images. Some tips for creating the images:
    • Photoshop, After Effects, and Adobe Flash are some of the tools in Creative Cloud that can output a series of numbered jpeg or png images from video or animated content.
    • The images must be numbered sequentially with the same number of digits, e.g., file001.png, file002.png, file003.png, etc.
    • Save images as compressed JPG images, with as much compression as possible while still achieving the quality you desire. Use 24 bit PNG format if your images must have a transparent background.
    • Use the fewest number of images you can get by with while still achieving a smooth sequence.
  2. Draw a frame on your InDesign page. The size of the frame doesn’t matter. It will be automatically resized to fit your image sequence content in the next step.
  3. With the frame you just drew selected, choose Image Sequence in the Overlays panel
  4. Click the folder icon next to Load Images, locate the folder containing your jpeg or png images, and open it.

    load image icon in panel

    browse for image sequence files

  5. Position the image where you want it on the screen.
  6. Set the options in the Overlays panel as desired. More information about these options can be found here.

configured sequence

Scrollable frame

The Scrollable Frame overlay is an easy way to add text that scrolls within a frame to an in5 page. And, this type of object is quite versatile and useful.

  1. Create the text that you want to scroll, in a long text frame. The text must not be overset in the frame. You may need to increase the size of the pasteboard in InDesign’s Preferences to accommodate the long frame.
  2. Create a second frame that will be the “container” frame that the text is going to scroll within. This frame may have a background color, stroke, transparency, etc.

    component parts

  3. Position the text frame over the container frame where you want it to be positioned at the start.

    positioned frame

  4. Cut the text frame (Edit > Cut)
  5. Select the container frame, and choose Edit > Paste Into
  6. With the container frame selected, choose Scrollable Frame in the Overlays panel
  7. Set the Scrollable Frame options as shown below

scroll settings

With a little ingenuity, this same technique can be used to create an infinite variety of “tabs” or “drawers” that pull out from the top, bottom, left, or right sides of the screen.

pull tab closed

pull tab, open part way

pull tab, fully open

Pan & Zoom

The Pan & Zoom overlay is simple to create. Just place an image on the page, select the frame, choose Pan & Zoom from the Overlays panel, and turn Pan & Zoom On.

pan and zoom

Web content

In5 supports Web Content overlays. These are frames that either contain local HTML/CSS/JavaScript content, or embedded HTML content for widgets such as maps.

To create a Web Content overlay with local HTML content that is stored on your hard drive or file server:

  1. Create some HTML/CSS/JavaScript content using whatever tools you choose, and save it into a folder by itself.
  2. Draw a frame on the page, and with the frame selected, choose Web Content in the Overlays panel.
  3. Click the folder icon next to URL or File: and select the index.html file in the folder that contains your HTML/CSS/JavaScript folder. Fill in the panel options as show below.

web content overlay settings with URL

To create a Web Content overlay with Web-based content using a widget that generates iFrame code, such as a map:

  1. Using a site such as Bing maps, generate an “embed code” at the appropriate dimensions for your page. Copy this embed code to the clipboard.
  2. In InDesign, choose Object > Insert HTML
  3. In the dialog box that appears, paste in your embed code, and click OK.

    Insert/edit HTML code dialog

  4. Resize the frame, if necessary, to match the iframe dimensions (in the example above, 770 x 390 pixels)
  5. Choose Web Content in the Overlays panel. Fill in the panel options as show below.

web content options with Allow User Interaction selected

So if you are looking for ways to include meaningful interaction in your projects, don’t overlook the refinements to slideshows that are made possible with the Overlays panel, as well as the entirely unique Image Sequence, Scrollable Frame, and Web Content interactivity made possible with this panel.

Video Demo

Check out this video demonstrating all of the Overlays on an iPad.

You can also view the sample project online.

Take Aways

  • Overlays let you quickly add sophisticated interactions.
  • An MSO can become a slideshow with a couple of clicks.
  • A Scrolling Frame is just a simple copy and paste away.
  • You can load live content from other sites into your site or app.

For more on Overlays and advanced interaction, check out Keith's Adobe Digital Publishing Suite Interactive Techniques or InDesign: Fixed-Layout EPUB Interactive Techniques & Publish Online courses on Lynda.com.