What is a Lightbox?
A Lightbox is a user interface convention – simply put it is when you darken or blur the main application in the background, and pop something up in the foreground – usually an informational or interactive dialog. It is essentially a modal dialog – a small area of the screen that blocks all or some of the parent (main) application, and that must be acknowledged with at least one click before you can return to the main application. The Lightbox is thus named, because the surrounding area is ‘dark.’
Adobe Captivate makes creating this kind of thing simple, because you can take advantage of groups to link together many different items, and then show or hide the entire group with just a simple command. Here’s a breakdown and an example.
Step by Step
Step 1: On the top layer(s) of a typical slide, add a simple rectangle with a black color and a transparency around 70%. This will darken the application when the lightbox is triggered.
Step 2: On the top of the dark shape, add the lightbox and any content you want.
Step 3: Select all of the newly created elements, including both the shade rectangle and all of the layers in your lightbox.
Step 4: Press CTRL + G (on Windows) or CMD + G (On Mac) to Group all of the selected items together. You’ll see the group shift into a collapsible folder in the timeline, and the property inspector will now show the name property for the new group.
Step 5: Change the name of the group in the property inspector to something you’ll remember, like ‘LB_Popup.’ This will make it easier to show / hide the lightbox. Just below the name field you’ll see a check box labeled, ‘Visible in output’ – uncheck this box. This will set the initial visibility of your lightbox group to be invisible.
Step 6: Choose or create some item on the screen that will be used as a button or trigger to open the lightbox. In my case I used this little text button.
Step 7: Associate the ACTION of the button with making the LB_Popup group visible. The action you will choose is ‘Show’ because you want to show the dialog and dim the background when the button is pressed. When you use the ‘Show’ action it will ask you what item you want to show. Just choose your group (LB_Popup) as the item to show.
Step 8: You’ll want to be able to hide your group as well. For that you’ll need to select the semi-transparent black shape inside your group. Just double click to select the rectangle. Because the rectangle is a smart shape, it can be easily converted into a button. Do that now, by checking the ‘Use as Button’ checkbox in the property inspector.
Step 9: Add an ACTION to the smart shape rectangle. This one will be a HIDE action, because you want to hide the lightbox when any click is made on the screen.
Tada! Hit preview project and admire your brilliance. One word of caution: When you create a simple action – the ones using the dropdown menu under ACTION in the playbar, Captivate actually restarts the paused timeline. This is only true with simple actions, but if you use this simple method, you’ll want to use some other mechanism to ensure that you stay on the active slide. You can avoid this indiscriminate restarting of the playback by using Advanced actions instead. Just chose ‘Execute Advanced Action’ and then give the single command to Show or Hide the relevant group for each respective element.
Why not give this a try and share your results? As always, I look forward to your comments and questions in the area below.