Becoming a Digital Publishing Master with in5

A free online course to help you design interactive projects with InDesign & without coding

 

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

Estimated time for lesson

Today’s lesson should take approximately 20 minutes.

Today's Course Outline

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

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

Introduction

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

DPS was Adobe's Digital Publishing Solution/Suite.

DPS no longer exists, but in5 supports all the functionality from those original panels, and has expanded on them.

Important note

As of in5 v3.3, you no longer need to install the Overlays panel. in5 comes with it's own replacements found under in5 > Interactive Widgets.

interactive widgets menu that replaces Overlays

These panels will let you create additional interactivity from InDesign that you cannot create any other way.

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 Slideshow overlay/widget adds some additional capabilities to slideshows.

To create a slideshow overlay, just select a multi-state object with the Selection tool, and open in5 > Interactive Widgets > Slideshow (or 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.

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:

  • Play smooth animation
  • Allow fluid user interaction with a group of images. For example, a subject can be placed on a turntable, and then be photographed every 5° or so as it spins. Each image is then saved as a jpeg. As the user swipes across the image sequence, they can then “spin” the image.
  • Create animated or video effects with a transparent background, since each png image can have a transparent background.

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 Animate 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, open in5 > Interactive Widgets > Image Sequence (or 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, in5 > Interactive Widgets > Scrolling Frame (or 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 in5 > Interactive Widgets > Pan and Zoom (or 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 in5 > Interactive Widgets > Slideshow (or 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


Alternatively, if your source application (e.g., Adobe Animate or Tumult Hype) creates an OAM file, you can simply use File > Place to insert your content. You don't even need the Overlays panel installed to use this method.


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 in5 > Interactive Widgets > Web Content (or 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.

More Interactive Widgets

In addition to recreating the DPS Overlays options, in5 also adds several tools for creating interactive content, including

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 Using Animation & Interactivity in Your in5 Project course on Ajar Academy.

back to top