Hot Spot Button Workaround for InDesign Dig Pubs

The interactivity features in InDesign were originally designed to work with SWF and PDF formats. When using DPS tools, some of these interactivity features are fully supported, some are partially supported, and some are not supported at all. The Buttons feature is partially supported in DPS. One limitation makes it difficult to create button hot spots: the Show/Hide Buttons action is not supported.

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.

If you have a mobile device, you can see this example by downloading DPS Tips for the iPad or DPS Tips for the Android.

Brian Wood used a slightly different technique to create a similar effect. See his video on creating a tooltip.

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

45 Responses to Hot Spot Button Workaround for InDesign Dig Pubs

  1. Kamal says:

    Hi Bob,
    Attach here the sample files…

    • Bob Bringhurst says:

      I actually tried, but the blogging tool limits the type of file I can upload. I’ll look into it some more, because I’ll be posting more entries like this.

  2. Stein says:

    Hello,

    it works great and is easy to realize. But what to do if I have two images on a page and both to have a separate hotspot-button? When both images are scaled to the big size than are the two close-buttons on the same position.

    And when I created two MSO – for each image one – the one big image will shown at the same time as the other small image. Must I create only one MSO with 3 states? Any tip would be helpful. Thanks a lot.

    Best regards

    • Bob Bringhurst says:

      Yes, one MSO with 3 states — if I understand the question. Make sure the fake close button is in the same place on the second and third states. That way, the invisible button that appears over the MSO works for both of those states. If you watch the fox video, you’ll see an example with two states.

  3. Hugo says:

    Hi Bob,
    This walk through is really helpful, I’ve yet to dig this deep into interactivity through MSO’s but the more I see the better it looks, thanks for sharing it really helps me to scope ideas and concepts for my clients.

  4. Sisi says:

    Hi Bob,

    Thanks for posting this. I’m attempting to create something similar, but have been running into trouble.

    I’ve placed the invisible buttons all on one layer, above a layer with the MSO. However, for some reason, as long as my invisible buttons are on top of the MSO, they don’t react. Just to test it, I dragged on invisible button to an area on the screen that’s above the MSO, and voila. I’m not sure what’s going on here, but the button and MSO aren’t playing well together.

    Any ideas would be helpful.

    Thank you.

    • Bob Bringhurst says:

      Are you sure they’re on top of the MSO? I didn’t add the objects to a different layer. You may want to try putting the invisible buttons on the same layer as the MSO, and make sure they’re on top. If that doesn’t work, post your files on the prerelease forum.

      • Sisi says:

        Hi Bob,

        I was able to figure this out. It seems that if I have swiping enabled, then the buttons are disabled. But after I disabled it, then the hotspots worked.

        Thank you!

  5. Michael says:

    Hi Bob, Thx for you post.

    • Just one question: how do made a FadeIn and FadeOut on the same image?

    Try to do it but i get it work just one way

    Thx again for a great lesson

    • Bob Bringhurst says:

      In the Slideshow section of the Overlay Creator panel, use the “Cross-fade” option to fade the images in and out.

  6. Fred says:

    Bob, I do not have the Slideshow section in the Overlay Creator panel (beta v0.2.127.3692).

    • Bob Bringhurst says:

      Are you saying you have the Overlay Creator panel installed and it doesn’t have a Slideshow section? Perhaps you could go over to the prerelease forum and attach a screen shot.

  7. Fred says:

    Bob, I actually was using the prerelease version, which if I understood well does not feature the Overlay Creator in InDesign.
    I have switched to Drop10, by uninstalling and reinstalling everything. Overlay Creator is now available, some features now work – they didn’t with the prerelease.

    But I now have other questions. Running on an Android device is ok, but the iPäd version has not been updated yet. Any clue for the availability of a Drop10 compativle viewer?
    I have installes the Desktop version (on a PC) of Drop10. Documents load, stack icons are visible, but the pages themselves are not. Am i doing anything wrong?

    • Bob Bringhurst says:

      The drop 10 viewer will be available when Apple approves it. Should be any day now…

  8. Fred says:

    Ok, thanks for your kind and quick replies, I do appreciate!

  9. GustRCM says:

    Hello Bob,

    I stumbled on your page not 5 min ago while looking for some control that works over video. While reading I shouted “unbelievable!” and had quite a laugh here.

    I´ve reached the very same solution, only I called it “invisible mapping as in html”. You can do a lot more with this simple idea, as I later discovered. Think multiple states as a single eye trick, as images of a movie are in fact static frames.

    It´s amazing to see the same solution with a whole ocean of distance.

    Kind regards from Brazil!
    Gustavo R C Monteiro

  10. Pingback: Adobe is taking InDesign to new levels of interactivity | Lukas Engqvist (Artcoach.se)

  11. Adam says:

    Maybe thats a stupid question, but i tried and faild.
    How can I make (or just can I) opening and closing button at the same spot? If you know what i mean. In your example opening and closing are in different corners.
    What i want to do is some kind of photo description. User can tap the button to see it (like change state) and then he can tap it again to close it.
    Thanks for help.

    • Bob Bringhurst says:

      Try putting the invisible button over the MSO. Tapping the button switches the two states–one states that displays the button image, one that hides the button image.

  12. Barry says:

    Hi Bob, is it also possible to use the image as the button so that is looks like tap to zoom in and tap to zoom out?

  13. smej says:

    are the invisible buttons on the document layout itself freely hanging and not inside the MSO?

  14. donna says:

    Do you have a video tutorial for this?

    I’m quiet confuse…

    Thanks!

  15. Pingback: My next project – iPad Magazine’s « RichTea Designs

  16. Gopal N. says:

    it worked for me …cool

  17. Lana says:

    Hi,

    Im having a problem. I have four images that need to enlarge. So i made them into MSO. So i have four hotspots on top. When you tap each hotspot it enlargers corresponding images. It works just fine in adobe preview but once i go to the ipad to test it. It doesnt work. Any clue why?

  18. Ray says:

    I have the same problem with just a 2-state MSO. I have followed all of the instructions here to the letter. It works perfectly in the desktop viewer, but it doesn’t work on the iPad. Is anyone else having this problem? I don’t know what else to do to fix this issue.

  19. Pingback: Is it possible to set an image to zoom full screen when clicked? | free icons download

  20. Cee says:

    I have a similar question to the one posed by Adam – I’m not quite sure if I understand the response.

    I have a spot where I would like the same position to have both the open and the close button.

    For example, an image with a little “+” icon : when you tap the “+” icon, a box opens up with information, and the “+” icon changes to an “x” icon (the “x” is in the exact same place as the “+” was before)

    The image with the “+” icon is one state, the second state shows the information with the “x” icon – I would like it so that when you click on this “x” it brings you back to the first state. However, given that the invisible button is in the same location, it doesn’t work.

    Does this make sense? I know it can be done because I have seen it used in other digital magazine publications (for example, in Bon Appetit magazine, if you click on an ingredient in a photo it opens up a box on top of the ingredient with more information, and then tapping in the same spot closes the box)…

    Thank you!

    • Bob Bringhurst says:

      Now that buttons can be nested within slideshows, you can create on/off buttons in the same place. The nested button on slide 1 jumps to slide 2; the nested button on slide 2 jumps to slide 1.

  21. Cee says:

    Thanks – I added it to the states and then re-created the button action. It seems to work in my Object States preview (which I know is not accurate) but not in my Folio preview – any idea why?

  22. Angel says:

    Hi, I´m trying to make an MSO with seven states in it, beign the first one the base point for all. It (the first) includes seven small photos that, when pressed, turns into one big shot, and it works fine. The problem is when i tried to close the big photo, if i don´t touch exactly where the mark for closing is (a big X) but also in one of the other buttons, it does not close but shows another photo. Sorry for my bad english, i hope you´ll understand.
    Many thanks, Angel.

    • Bob Bringhurst says:

      Sometimes it’s wise to make a separate invisible button that’s larger than the button’s image.

  23. Ryan says:

    I have a different issue. I have an MSO with pictures in each state. I then add an mp3 sound clip to each picture in the 3 different states. To navigate between states I have 2 buttons that are set to Go to state and a home button to take the user back to the 1st state. My problem is that when the mp3′s are added in the states, the buttons just stop responding. When I remove the mp3′s from the 2nd and 3rd state the buttons work again. Please help.

  24. Chris Davis says:

    Is it possible to assign a button two on tap, on release actions for the same MSO? So, on the first tap the MSO appears and on the second tap the MSO returns to its blank state? I saw this done in a iPad magazine I subscribe to and once the first tap takes place, the button has a (-) minus sign on it. If you tap the button again, the MSO returns to its original state. I tried to do this. When I tap the button the MSO appears, but the MSO returns to its blank state without a second tap?