Ajar Productions

How to Create an HTML Slideshow with Adobe InDesign

There are multiple ways to create a slideshow using InDesign. Let’s go through the options and how to export your content to HTML.

We’ll cover the following slideshow options:

Multi-State Objects with Button Navigation
Autoplaying Slideshow using the Animation Panel
Easy Slideshows using the in5 Slideshow and Image Sequence Widgets
Using in5’s Slideshow Builder to make life crazy easy
in5’s Presentation Mode

There are two main ways to create HTML from InDesign: Publish Online, which is built into InDesign; and in5, which is a paid add-on made by Ajar Productions. You can see a comparison of Publish Online and in5 in this post.

Creating an Interactive Slideshow with Object States

You can create a Multi-State Object (MSO) using InDesign’s Object States panel, found under Window > Interactive.

When you create Object States, you’ve effectively created different visual versions of your content.

Each one of these states can act as a slide in your slideshow.

The nice thing is that you can control these states with InDesign’s button actions…the downside is that you can’t easily transition between states with animation when exporting to Publish Online (though you can do it using in5’s Slideshow Widget, see more below).

Animating Between Objects to Create Slide Transitions

You can use InDesign’s Animation and Timing panels to take a stack of photos and animation them from hidden to visible one-at-a-time, showing the top photo last. Each new photo effectively hides the one behind it as it fades in.

This option is a little messy to set up, but it can be exported to Publish Online. in5’s Image Sequence and Slideshow Widgets provide a much easier way to do this (see more below).

Easy Slideshows using the in5 Slideshow and Image Sequence Widgets

The in5 Slideshow Widget (in5 > Interactive Widgets > Slideshow) can take any MSO in your document and turn it into a slideshow with animated transitions.

All you have to do is select the relevant options in the panel and export with in5.

Using this option, you can still have complex and interactive content within your Object States.

If you want a simple image slideshow, using the Image Sequence Widget (in5 > Interactive Widgets > Image Sequence) is even easier.

For an image sequence, you can simply select a folder filled with images and in5 will turn it into a self-running slideshow for you.

Using in5’s Slideshow Builder to make life crazy easy

If you want to build a slideshow the fastest and easiest way possible—be it interactive or animated—and you have an in5 Pro plan or higher, you can simply run the Slideshow builder…which will create thumbnails, navigation buttons, and animated transitions for you.

See it in action in the video below.

in5’s Presentation Mode

If you want to get really sophisticated with your slides using InDesign pages, then in5 can turn your entire document into an HTML slideshow using Presentation Mode with the autoplay feature. You can learn more about in5’s Presentation Mode in this post and see an example of a self-running slideshow in this post.

More UX Design Patterns for InDesign

Do you want to learn how to create more working User Experience (UX) and User Interface (UI) elements from InDesign without coding?

Check out the complete InDesign UX Design Patterns guide (it’s free with an email sign-up).

Get the guide

Stop Struggling with Animation in PDFs: Discover the InDesign Alternatives

Justin

Animation can add a dynamic and engaging element to your designs, but can animation be used in PDFs? Unfortunately, the short answer is no. While it may seem like a convenient option, using animation in PDFs can be problematic due to inconsistent support across different applications, the death of the Flash Player, and the fact that PDF was never built to support animation (e.g., animation from InDesign, or formats like animated GIFs)…all of which can cause playback issues and visual holes in your documents.

In the past, PDFs were primarily opened with Adobe software, which included the Flash Player bundled right inside it. This allowed for some use of animation in PDFs through the use of Flash Player content (though only by embedding SWFs, not using InDesign’s native Animation panel). However, with the demise of Flash, this option is no longer available. So, what are the alternatives?

The answer is HTML5. This browser-native format is capable of replicating the capabilities of Flash and it does not require coding to create content visually in InDesign and export it to multiple HTML-based formats. In this article, we will explore three formats that support animation: fixed layout ePub, Publish Online, and in5 (InDesign to HTML5). All three formats support animation that you can easily create with InDesign’s native Animation panel.

Say Goodbye to Video in PDFs: Why You Should Avoid It at All Costs

Justin

When working with multimedia in design projects, it’s natural to want to include video content in your PDFs. However, it’s important to understand that the use of video in PDFs can be problematic in a number of ways and may not provide the consistent support and playback that you desire.

How to Create a Skip Link for Screen Readers with InDesign & in5

Justin

A Skip Link lets disabled users easily skip over purely visual content and jump ahead to substantial content (e.g., skip over a cover page to the main story).

To create a Skip Link with InDesign & in5:

Create a Button or Hyperlink from the element that you would like to use as a Skip Link.
Point that link to the page with the main content.
Use the Accessibility panel* to designate a text frame on your target page as a <main> element using the Custom Tag drop-down (optional).
In the Accessibility panel, select Treat as Skip Link.
In the Accessibility panel, choose Show ONLY to Screen Reader under the Screen Reader Visibility (optional).

* The Accessibility panel is only available to Elite and Enterprise plans.

Treating the element as a Skip Link means that in5 will move it off the page and into the top of the reading order in the output, ensuring that a screen reader sees it immediately.

You can see in the video below why I suggest that you create the Hyperlink or Button first.

Accessible PDFs from InDesign vs. Accessible HTML from InDesign

Justin

The article is written as a parallel to Adobe’s article on Creating Accessible PDFs, so that you can compare the steps required to set up accessibility for both PDF and in5, and to get a sense of the accessibility of the output.

For the purposes of this article, I will assume that you’re not interested in InDesign’s native HTML export, because it does not support layout the way a PDF does. In contrast, in5 exports HTML while maintaining your InDesign layout.

in5 is a 3rd-party InDesign plugin that can create accessible, interactive HTML output (without any coding on your part).

Both the PDF export and in5 can produce 508 compliant output from InDesign, but there are some key difference detailed in the article below.