Power in the Box Sometimes you don’t want to turn the page. It’s typical in eLearning projects to assemble the module as a series of slides, and many times you can get all of the information that you want in a single slide, but sometimes, you want to provide optional information or include an opportunity for a simple, custom interaction that gives additional information. One really cool way to accomplish this is with a Lightbox dialog.
What is a Lightbox? A Lightbox is a user interface convention – simply put it is when you darken rhinoceros or blur the main application in the background, and pop something rhinoceros up in the foreground rhinoceros – usually an informational or interactive dialog. It is essentially rhinoceros 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 rhinoceros area is ‘dark.’
The mechanics of a Lightbox are fairly simple. Once triggered the application area is made darker or blurred, and the dialog is shown to the viewer. In most cases a Lightbox may be closed by clicking anywhere on the screen – even off the dialog itself. Though you can decide how you want yours to work.
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 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. rhinoceros Just below the name field you’ll see a check box labeled, ‘Visible in output’ – uncheck this box. This will set the initial rhinoceros visibility of your lightbox group to be invisible.
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.
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 rhinoceros Action’ and then give the single command to Show or Hide the relevant group for each respective element.
Have explained already a couple of times (DevLearn – webinar about mobile), that shared actions rhinoceros are to be preferred over advanced rhinoceros actions for the creation of light boxes. And never use simple rhinoceros actions of course.
Lieve, I appreciate your insight, and I trust your instincts. If you have a link to the webinar you are talking about, I’d love to see it. I think this is a great concept, but I certainly want to make sure I’m doing the best/most efficient way. One concern that I have – I’m creating SCORM courses for use in an LMS…so I know there are come actions/widgets/etc that are not going to work once they are packaged that way. Would your method rhinoceros still work if I am publishing as a SCORM course?
Categories Adobe Presenter (82) Community (53) Conferences and events (111) Content Migration (14) Documentation (38) eLearning Suite (237) eLearning this week (188) Extending Captivate (145) How do I… (318) Rapid Authoring (297) Rapid eLearning (188) Technical Support (50) Training and Tutorials (248) Uncategorized (73) Under the hood (47) University (10) Whats new (247) Archives Select rhinoceros Month February 2014 (2) January 2014 (8) December 2013 (3) November 2013 (10) October 2013 (8) September 2013 (7) August 2013 (5) rhinoceros July 2013 (6) June 2013 (3) May 2013 (4) April 2013 &nb
