Adobe DPS Made Simple: Creating a Slideshow

If you’re unfamiliar with Adobe DPS then I would recommend you to read the introductory post in the series in order to learn the basics: Adobe DPS Made Simple: Introduction & Building a Basic Folio

. . .

In this guide I will show you how to build an interactive slideshow using a series of images, which you can browse through either from the use of buttons or swiping the page.

 

Step 1

Create a new InDesign document for Digital Publishing.  Import all the images you want to use by going File > Place.

slideshow DPS

 

Step 2

Select all the images and in the Align Panel (Window > Object & Layout > Align) align all the images in the center, both vertically and horizontally so that they are all on top of one another.

dps slideshow

 

Step 3

With all the images still selected, open up the Object States panel (available through the [Digital Publishing] Workspace mode) and press the Convert select to multi-state object button.

dps slideshow

Step 4

Draw or place left and right arrow icons at each side of the images.

slideshow

 

Step 5

Select the left arrow and open up the Buttons and Forms panel.  There, set the Type to Button, click the plus icon in Actions and select Go To Previous State from the options.  Also make sure in the object field it is set to the state we just created and that Stop at First State box is ticked.

Repeat this process again for the right arrow, however in Actions select Go To Next State instead.

dps slideshow

You can now preview the slideshow on Content Viewer to test the buttons.

 

Swiping the Screen Instead of Buttons

Here’s an alternative way to interact with the slideshow.  Keep the document as it is, but you can remove the arrows if you want to make the UI more minimal.

Select the bike images, open up the Folio Overlays panel and select Slideshow.

dps slideshow

 

On the Slideshow options, tick Swipe to Change Image.

slideshow

 

Now you can preview the slideshow to see the results.

. . .