Hot Spot Button Workaround for InDesign Dig Pubs

The Digital Publishing Suite is still in its early stages. When the project began, all interactive objects had to be created with a separate tool and added to the InDesign document as placeholder files that were converted during the bundling process. Now, all interactive elements such as buttons, slideshows, movies, and image pans are created natively in InDesign. However, not all of the interactivity features have been hooked up.

Two limitations in particular make it difficult to create button hot spots:

  • Buttons can have only one action.
  • States in multi-state objects cannot include interactive objects.

Fortunately, there’s a workaround. The key is to create a multi-state object (MSO) that includes both the hot spot image on the base state and the “close button” image on the target state, but no object in the MSO can be interactive. Once you create the MSO, you place invisible interactive buttons on top of the MSO These buttons switch states. Here’s a quick video of the button effect shown in the Desktop Viewer:

1. Create State 1

Place the hot spot images or objects that users will tap to display a full image. State 1 is the base state that users see unless they tap the hot spot. The hot spot image is just the picture, not the interactive button. Make this state the same size as the full image. I also included an icon to show that this area is interactive. Group all the objects that appear on this state.

2. Create State 2

State 2 consists of the full image and a placeholder close icon. Use the pasteboard to create this state. Again, this icon is not a real button–it just represents the tap area. Group the image and the placeholder icon. State 1 (the base state) should appear in front of State 2 (the full image), but you can always change the order later.

If you want to create multiple hot spot buttons, as shown in the video example, create a separate target state for each button. These states should be part of the same multi-state object.

3. Create the multi-state object

Align the grouped objects that will act as states. These objects should be the same size. Select the two grouped objects, and use the Objects States panel to create a multi-state object.

4. Create the invisible button that displays State 2

Create a frame the same size as the hot spot image. Make sure it has no fill and no stroke. Select it, and use the Buttons panel to create a button with a Go To State action that jumps to State 2 (the full image). Move this invisible button over the hot spot image.

5. Create the invisible button that displays State 1

Create a frame the same size as the “close” image. Make sure it has no fill and no stroke. Select it, and use the Buttons panel to create a button with a Go To State action that jumps to State 1 (the base state). Move this invisible button over the hot spot image. (If you need to see where the hot spot image is, you can click State 2 in the Object States panel.)

Now you’ve got all your pieces together — the MSO with the hot spot placeholders and the invisible interactive buttons.

That’s it. This workaround isn’t too bad, but let’s hope we see multiple button actions and interactive slides soon.

Special thanks to Minette Layne for letting me use her fox photos.

Go to original post