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:
- 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.
- 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.
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.
- 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.
You can watch the project below (fixed resolution) or using this link (rescalable output)
Objects – timeline
See the setup, using this screenshot of the timeline panel:
From bottom to top:
- Five question buttons, which are shape buttons labeled SB_Quest1….SB_Quest5. They have a pausing point at the default 1.5secs. For those buttons I deleted the InBuilt Rollover and Down states, but added two custom states: ‘Current’ and ‘Done’.
- A group of shapes used as text container for the answers SS_Answer1…. SS_Answer5. I could have used a multistate object as well. I started using individual texts because I hoped to use a hyperlink for the lightbox switch.
- A shape used as Cover. Its position in the stack order is important: it needs to be above the answer and question objects, but under the multistate object SS_ExtraInfo. That cover is a shape, filled with dark gray, partially transparent. Beware: it is also used as text container: look for the text ‘Close Lightbox‘ which has been converted to a hyperlink triggering an advanced action.
- Multistate object SS_ExtraInfo which has a state to appear in the lightbox for each of the answers. The Normal state is empty (Alpha and Stroke shape = 0).
- Button Bt_Info (used a button from thitOt not necessary to be on top of the stack, Its position in the stack order is not important, because will be hidden when the lightbox appears.
Events and Actions
On Enter slide event: "EnterAct"
This simple non-conditional action is meant to set the slide to its original situation:
If I had used a multistate object for the Answer popups, with a Normal state that was invisible (like for the SS_ExtraInfo), I would not have needed the second command (Hide Gr_Answer). By hiding the Cover, I also hide the hyperlink since it is a text in the cover. No need to hide SS_ExtraInfo since the Normal state is invisible. Why didn’t I use a hyperlink instead of the button Bt_Info? Because the advanced action was not triggered as it does when using SWF output. Too bad.
Question buttons: Shared Action "QuestAct"
Another non-conditional action, based on this Advanced action:
I converted it to a Shared action, with these 6 parameters:
Button Bt-Info: Advanced action "ShowLightBox"
This is an action with 6 decisions. The first decision is non-conditional, the five remaining decisions are conditional because a different state has to be shown based on the question number in the variable v_quest. Those decisions have only one command and can easily be created with the duplicate decision button.
Hyperlink: Advanced action "CloseAct"
The hyperlink in the Cover shape triggers a 6 decision action very similar to the previous one:
You can extend the described workflow to more than 5 questions. The shared action can be used, and you may have to add decisions to the two longer advanced actions.
I didn’t provide a close button on the answer popups, for learners who don’t want to see the lightbox, for whom the answer popup is sufficient. It could be done with a hyperlink or an extra button.
It would be possible to have something happen when all question buttons have been clicked, but that will require the creation of one extra variable for each button, a Boolean to be toggled from 0 to 1 if a button has been clicked. The check for the extra happening has to be added to the CloseAct.