Why?

Lightbox is a popular technique to make extra information (text, images, video…) stand out. Traditionally that information will appear on a background of an object which hides or dims the original objects on the slide. A way to close the lightbox is necessary, and will also make those objects visible again. In a way, the overlay slides in an interactive video are sort of lightbox as well. It is evident that such a lightbox is rather easy to create in a non-responsive project, but several limitations (like stacking) in Fluid Boxes project make it almost impossible. The example shown here, and the setup, was for a non-responsive project.

Recently a Captivate posted a question in the Adobe forums.: ‘How to create a lightbox within a state of an object‘. She was upgrading an older project, where the developer used a slide for each lightbox, by using multistate objects to replace the multiple slides.  After having asked for some extra information, it turned out to be more complicated than just the creation of lightboxes.  It was about a two-step process for extra information:

1. Clicking a ‘question button’ would show the answer to the question as a popup (Click-Reveal workflow). That popup didn’t really need a way to close it, but clicking another question button should replace the content by new content. OP was correct that using a multistate object was the perfect workflow for this first step, with a Normal state which was invisible by setting Alpha (for the Fill) and Stroke both to 0. I have demonstrated this use multiple times in blogs.
2. The content needed to have a way to open a ‘lightbox’ (in the traditional sense explained before) with more information related to the question/answer already shown.

Problem

States in a multistate object, with the exception of the Normal state cannot have interactive objects! In both steps such an object is necessary. In the first step it is needed to open the proper lightbox, in the second step to close the lightbox.

Such an interactive object can be a button, a click box or… a hyperlink. Quite a while ago I wrote a couple of articles to demonstrate the power of hyperlinks which is ignored by many. However, for HTML5 output in the recent version (11.5.1) its use to run advance actions seems not always to be functtional, needs lot of testing. Originally when creating the sample output, I planned to use hyperlinks in most cases, but had to give up for the reason just explained. BTW all actions triggered by hyperlinks worked perfectly for SWF output. So I had to revert to buttons in most cases. I will explain the complete setup in a blog.

Example project

Watch this project. There is no real content for questions, answers nor lightboxes. Focus is only on the structure and workflow. There is one slide after the title slide, which has 5 question buttons:

• Clicking a question button will show a popup which should contain the answer, and there is a (image used as) button to open the lightbox. The question buttons shows a ‘Current state’ when clicked.
• Clicking the button opens a lightbox: cover, shape with content, and a hyperlink used to close the lightbox. When the lightbox is closed, the question button will revert to a ‘Done state’. It is not a Visited state, but a custom state.

Setup

Complete setup will be explained in a blog post. It includes the creation of a user variable, a Shared action (for the question buttons), two advanced actions for the Lightbox button, and the hyperlink in the Lightbox. The popups are not in a multistate object (would have been possible); the lightbox uses a multistate object and a cover which has a hyperlink text.