Buttons and Multi-MSOs

Question

Hi there, I've seen similar problems but I can't seem to find a simple explanation on how to do what I'm trying to do. So I have multiple buttons, and I'm simply trying to get Button 1 to play Slideshow 1 (an MSO), Button 2 to play Slideshow 2 (another MSO), etc. The slideshows should all be hidden (and stacked on top of each other) until one button is tapped and when one is tapped, the other slideshows are hidden. Autoplay can't be on since the "hide before playing" is not working. I've also tried making the slideshow/MSO into an animation then using the button to trigger the animation, but again, the slideshows aren't being hidden when the page loads. I think I'm missing something very fundamental here.

Thank you!

Answer 1

Hello, do your slideshows need to be on the same page? If not, you could set this up on two pages: Create buttons that go to the two different pages, and an MSO set up on each page to auto play using the Slideshow widget. If the pages are identical other than the two MSO slideshows, the effect for the user will be that the slideshow changes when the buttons are clicked.

Comments

Hi, yes the slideshows have to be on the same page. I'm building a one-page scrolling website, and this section has multiple buttons bringing up different slideshows in the same "view" or window.

Answer 2

If you want your MSO to be hidden before clicking the button, then add an empty state (it's a state that includes a small rectangle with no stroke and no fill) by doing the following:

• Select your MSO
• Go to the Object States panel menu and select Add "Empty" State

Make sure that your buttons don't overlap or only the top button will work.

Comments

Hi Myra, thanks, that's worked to a certain extent. You're right about the empty states, but another problem has arisen. Because the empty state is the first state for every MSO(slideshow), when I click on another button to bring up a new slideshow, I then click on the slideshow to pause it, but then it goes to the first slide of the first slideshow, instead of pausing the current one. I THINK this is because the first slideshow is on top, in terms of layers, and so when I click on it, it jumps from the empty state to the first slide of the first slideshow. This is countering the "click to play/pause" feature on all the slideshows. So close!

How do I have multiple slideshows on top of each other so that multiple buttons control them without them interfering with each other like I just stated? I think enabling "Autoplay" will screw this up. I've also tried putting the empty state in each slideshow at the end, but now the first slide is visible for every slideshow (just stacked on each other).

Thx!

---

Would you be able to send us a copy of your InDesign file or a sample file that recreates the issue so that we can see how it's set up? It would also help if you could send us your html5_output to see the result you're getting. You can send your files to:
https://ajarproductions.com/pages/contact.php?category=in5

---

Sure thing. I just sent it about 10 minutes ago.

---

For those that are curious, Myra suggested the following work around, which does work to a certain extent. I unfortunately had to rebuild my page from scratch for some reason, since it wasn't fully functioning properly.

Here's what to do:

1. Make a new InDesign document for a set of slides
2. Place each image of the set on its own page in the document
3. Set Presentation Mode (in5 > Enhancements > Presentation Mode) with the following settings"
   • Enable Presentation Mode
   • Enable Autoply
   • Loop (if desired)
   • Slide duration (if different from the default 5 seconds)
4. Export (in5 > Export HTML5 with in5...) with the following settings:
   • In the Basic section
     • Page Format: Slider (Fade In)
     • Navigation: Enable Swipe Navigation
     • disable Show Back/Next Arrows
   • In the Advanced section
     • Mobile Device Viewport Zoom: Use Desktop Scaling
     • Desktop Scaling: Best fit
5. Repeat steps 1-4 for each group of images
6. In the main document, create a rectangle where the exported slides will go
7. With the rectangle selected, go to in5 > Interactive Widgets > Web Content
8. In the Web Content dialog box, click on the button with the 3 dots and navigate to the index.html file of the exported slides for a group
9. Repeat steps 6-9 for each exported slides document
10. Select the rectangles ​for the web content, and in the Object States panel, click on convert selection to multi-state object
11. In the Objects States panel menu, select Add "Empty" State
12. Set the buttons to go to the state that contains the appropriate slides

---

Thanks for posting the steps.

I should add that if the Transparent Background option is enabled for the Web Content interactive widget, the output for the selected document that is getting added needs to have been exported with a transparent background. To make a document of slides export with a transparent background, go to the Backgrounds section of the Export HTML with in5 dialog box (in5 > Export HTML5 with in5...) and set the Background Color to None.

Answer 3

I think the key to keeping the slideshows from interfering with one another is by using a Go To State action to 'freeze' them. Here's what worked for me:

• Slideshow 1 and 2 are MSOs with a fade in animation applied and Tap to Play/Pause applied through the Slideshow widget.
• A rectangle frame filled with the background color is in a layer above as a mask. It has a fade out animation applied.
• Button 1 is set up with the following actions:
  • Go To State (Slideshow 2: State 1)
  • Animation (Slideshow 2) with option: Reverse selected
  • Animation (rectangle) with option: Play selected
• Button 2 is set up with the following actions:
  • Go To State (Slideshow1: State 1)
  • Animation (Slideshow 2) with option: Play selected
  • Animation (rectangle) with option: Play selected