Adding Popups to Slideshows

As of version 5.3 of Mag+, you can add items such as Jump Links, Web Links, Popups, and Videos to Slideshows. It involves using the Object States panel in InDesign and adding the interactive element to an individual Object State. This article will show you how to add a Popup to an Enhanced Slideshow.

Before You Begin

  • 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.

Additional Information

How to Add a Popup to a Slideshow

1. In InDesign, create each slide in your slideshow.

Note: Slides can be images, text frames, or objects that are grouped. In the example below, there is one image frame (Label 1) and a grouped object (Label 2) that consists of an image frame and text frame. They are shown side-by-side in the screenshot, but they will be placed on top of each other by the end of the example.
In InDesign, create each slide in your slideshow.

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

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

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

 Note: This creates two states (or slides) for the slideshow.
Select the image box and the grouped object and then click the "Convert to multi-state object" button at the bottom of the Object States panel.

4. Click on each state and move the frames so that they are on top of each other.

Click on each state and move the frames so that they are on top of each other.

5. Select the state which shows the grouped object in the Object States panel.

Select the state which shows the grouped object in the Object States panel.

6. Now go to the Mag+ Object Panel and click on the "Popup" button.

Now go to the Mag+ Object Panel and click on the "Popup" button.

7. A Clickable Area (also called a Hotspot) and an empty frame will be created.

Note: In the screenshot below, the Hotspot and the empty frame have been moved slightly in order to show them more clearly.

The Clickable Area frame will default to cover the entire state and will be light blue in color. The empty frame will be centered on your screen and will be created on the Popup layer associated with your content.

A Clickable Area (also called a Hotspot) and an empty frame will be created.

8. Resize the Clickable Area to cover the part of your Object State that the user will tap to show more information.

Resize the Clickable Area to cover the part of your Object State that the user will tap to show more information.

9. Now set the empty Popup frame to contain some text and style it as you see fit.

Note: You can always create a new object (or grouped object) instead of restyling the empty frame Mag+ creates for you. In order to use your own object, first select the empty frame Mag+ created and copy the Object ID (Label 1) in the Mag+ Object panel. Then delete the empty frame, select your own object, and paste the Object ID into the correct field in the Mag+ Object panel. Be aware that Object IDs must always be unique in a Mag+ layout. Therefore, be sure you delete the empty frame before you preview or export your layout.
Now set the empty Popup frame to contain some text and style it as you see fit.

10. Now select the whole Multi-State Object by clicking on it once.

Note: When you select a Multi-State Object, you will see a thick dashed line around the object; this tells you that you have selected the entire object and not just one state.
Now select the whole Multi-State Object by clicking on it once.

11. In the Mag+ Object Panel, the "Object Type" pulldown menu should read "Slideshow."

Note: You can choose different options as to how the slideshow behaves. You can read more about slideshow settings by reading the article "Creating Slideshows in InDesign."
In the Mag+ Object Panel, the "Object Type" pulldown menu should read "Slideshow."

12. Now go to the Mag+ Verticals panel and click on "Fast Review" to preview your Slideshow.

Now go to the Mag+ Verticals panel and click on "Fast Review" to preview your Slideshow.

13. On your review device, you can now swipe through the slideshow and tap on the Clickable Area to view the Popup.

On your review device, you can now swipe through the slideshow and tap on the Clickable Area to view the Popup.

Additional Information

Following the above steps, with minor modifications, also allows you to add Audio start/stop Links, Web links, Jump links, and Popups. For more information, consult the following articles:

0 Comments

Please sign in to leave a comment.
Powered by Zendesk