Creating Slideshows in InDesign

With mag+ you can create swiping and auto-playing slideshows directly in InDesign. mag+ uses the Object States panel in InDesign with each state representing one slide. Additionally, an Object Type called Slideshow in the mag+ Object Panel allows you to set how the slideshow behaves.

Important Information

As of version 5.3, mag+ supports Enhanced Slideshows, which allow you to add Popups, Web Links, Jump Links, Videos, and more to your Object States. The following items are supported with Enhanced Slideshows:

Web Links and Jump Links can be added to individual slides. Note that you cannot jump to other slides within a Slideshow. For more information, read the article "Adding Links to Slideshows."
Popups can be added to individual slides. Popups on slides can be closed by using the “popup://pop1/close” syntax on Hotspots/Clickable Areas. For more information, read the article "Adding Popups to Slideshows."
Videos can be added to individual slides. Inline videos can be shown on a slide. Hotspots/Clickable Areas can trigger popup videos or fullscreen videos. Note that triggering videos when they are "in view" is not currently supported. For more information, read the article "Adding Video to Slideshows."
Audio clips can be triggered from individual slides.
HTML Objects can be added to individual slides.
Pan and Zoom are now supported on image slides.

Before attempting to use Enhanced Slideshows, please make sure of the following:

Make sure you have installed version 5.3 or later of the mag+ InDesign Plugin.
Make sure you have installed version 5.3 or later of the mag+ Reviewer app.
Make sure you have built a version 5.3 or later version of your app and have it available in the appropriate app store prior to publishing Issues with Enhanced Slideshows.

How to Make an Image-Based Slideshow

1. In InDesign, draw an image box on the content layer where the slideshow will appear.

2. Open the Object States panel by going to Window > Interactive > Object States.

3. Select the image box and click the "Convert to multi-state object" button at the bottom of the Object States panel.

 Note: This creates two states for the selected box.

4. Select "State 1" in the Object States panel.

5. Now double-click on your image box and use the Place command to put the image for your first slide in the box.

6. Select "State 2" in the Object States panel.

7. Double-click on your image box and use the Place command to put the image for your second slide in the box.

8. Add new states using the Object States panel for each image you want in your slideshow and follow the steps above to fill them with images.

Note: Clicking on the "Create New State" button will duplicate the previous state and its contents. You can rename states in the Object States panel and replace the contents of the state using the steps above.

9. When done, select your image box by clicking on it once.

Note: When you select a multi-state object, you will see a thick dashed line around the box; this tells you that you have selected the entire box and not just one state.

11. You may now click on "Fast Review" in the mag+ Verticals Panel to preview your slideshow.

How to Create Text or Mixed Media Slideshows

Slideshows can consist of any elements you like. To create a text-based slideshow, simply draw a text box and create different states for it. For instance, if you want a headline to auto-animate in, just add a word in each new state and select auto-play from the Slideshow panel.

States can also be applied to groups of objects, and each state can contain different types of objects (images or text), so you can easily create an animation of elements moving or building on the page.

Slideshow Panel Settings

When an InDesign object is selected and the mag+ Object Type is set to Slideshow, the following options are available:

Object ID: This field does not have to be filled out for Slideshows.
Horizontal/Vertical Pin/Snap: Slideshow objects can have pinning and snapping just like any other mag+ object.
- Read more about Object Pinning.
- Read more about Object Snapping.
Transition (auto-play only): The effect shown when slides change on auto-play:
- None: no transition, the new slide just appears.
- Fade: Slides fade into view.
- Slide: Slides push (or slide) into view from right to left.

Note: User-controlled slideshows are always shown with a Slide transition.

User-swipeable: The user can swipe the slideshow to advance slides or go back.

Note: This feature can be activated for auto-play slideshows as well.

Slideshow Indicator: A series of dots at the bottom of the slideshow indicating how many slides are in the slideshow and which is currently being viewed.
Loop: After the last slide is shown, the slideshow will repeat, starting with the first slide.

Note: Loop can be activated for either user-controlled or auto-play slideshows. If enabled, users may also swipe backward from the first slide.

Auto Play: The slideshow will advance through the slides automatically using the Auto Play Interval.
Auto Play Interval: The amount of time between slides, set in seconds.

Note: The interval can be as low as .1 if the transition is set to Slide. The larger the slides, the more memory they will use, so larger slideshows with a very fast transition may stutter on first play on slower devices.

Slideshow Tips

Even with the addition of native slideshows, you can continue to use HTML slideshows built from the mag+ Feature Builder or coded on your own.
You can have multiple slideshows on a Vertical, and slideshows can even overlap.

Note: Beware the memory limitations of devices — more images equals a bigger file which can translate to slower performance. In general, native slideshows will use less memory and be less processor-intensive than HTML-based slideshows.