Interactive Video Buttons

Intro

When I posted the article about Pausing the Timeline (part of the sequence of articles about that most important panel), I promised to add some use cases to illustrate using pause and pausing points. Let us start with a  simple use case, based on a recent forum question in this thread: Interactive Video Buttons


Use Case - description

It is clear that the user is not aware of the difference between pausing the timeline by an interactive object (pausing point) and by the command Pause. The idea is that the learner, while a video is playing, can launch a popup that has some static content (text, images...). While that popup is opened, the video should pause. On closing the popup the video should resume playing. The user proposed to have a close button for that purpose, which is the easiest solution (Scenario 1 below).   hyperlink instead of the close button as I described in this article: More is in a hyperlink - Close button

It could also be done with defining the open button as a toggle button Scenario 2).

For both scenarios it is necessary to insert the video as a multi-slide synchronized video to be able to control the video with Captivate functionality. If you insert the video as event video it will play totally independent from Captivate.

Scenario 1 

In this scenario the popup will appear with one button, and be hidden by another button or hyperlink. 

This makes it possible to have two actions, simplifies the setup: no need for a variable, no need for a conditional action. You can use two standard actions. If you want multiple buttons and popups, or expect to be using this work flow in other projects, I strongly recommend to create shared actions instead of advanced actions. This article will describe only the advanced standard actions.

Have a look at the setup of the slide. Look at the Timeline panel. It has only 3 objects (from bottom to top: video, shape button, popup). In the screenshot the shape button SB_Info is selected. It will open the popup 'Info'. Look at the Timing properties of the button. The option to pause is unchecked (which is not the default situation), the shape button is timed for the rest of the slide. The result is that the button will be active for the whole slide, there is no inactive part. 
The popup in this example is a shape used as text container, labeled 'Info'. That popup has to be invisible in output (eye icon in the Properties panel). If you expect that the slide can be revisited,  a better approach is to use the On Enter event of the slide to hide this popup 'Info'. To close the popup I preferred using a hyperlink over a close button.  The popup is ta single object. If you prefer to have a 'real' close button, you'll end up with two objects (text +  button). In that case you can group them, to reduce the number of commands for showing and hiding.

Standard Advanced Action ShowContent

This action is triggered by the Success event of the button SB_Info as you see in this screenshot:

After showing the popup (only one text container, can also be a group), I choose to disable the button SB_Info. If you want it to more user friendly, you can add a custom state 'Inactive' to that button and change to that state. This will avoid confusion for the user, some may expect that button to be a toggle, which is not the case in this first scenario. The last command will pause the timeline unconditionally, resulting in both video and audio to be paused.

Standard Advanced Action CloseContent

to be triggered by the hyperlink over the big X character:
if you prefer a Close button, this same action will be triggered by the Success event of that button; you can use exactly the same action. If you are using a responsive project, or HTML5 output only, the work flow with a button is to be preferred because the hyperlink event is not to be trusted with HTML5 output.

It is a similar advanced action (use the duplicate feature), with three commands which are the opposite of those in ShowContent: Hide (was Show), Enable (was Disable), and Continue which will release the Playhead, both video and audio will resume.

Scenario 2 

In this scenario aToggle button is used both for opening and closing the popup.

In that case you can use an approach similar to what I explained in: 1 action = 5 toggle buttons
It is a little bit more complicated because:
  • You need an extra custom state for the popup button which indicates that it changes to a close button after having opened a popup:
  • You'll need a variable to track the status: I will use v_visib, a Boolean, with value = 0 when the popup is not visible,
    and value = 1 when the popup is visible; since I used a shared action from an external library, that variable is created automatically.

  • You'll need a conditional advanced action to be triggered by the Success action of the button:, this is the advanced action version created based on the shared action:

More Possibilities

An interactive video will often be spread over multiple slides, to offer navigation buttons to different parts of the video. It is not a problem to have the scenarios available on all slides: time both the button and the popup groups for the rest of the project, always on top.

I mentioned the possibility to group a close button with text, but groups with more objects are possible as well: image, shape, animations. Group all together, hide the group On Enter for the slide, and you only have to replace the single object in the scenarios above by the group. 

Turn the actions into shared actions, and keep them in a separate project. You can open the Library of that project as an external Library in future projects. Especially the toggle action, it will save time because you don't have to create the user variable.

Future use case, example of Pausing the timeline, will be about audio. It is more complicated because there are several ways to use audio in Captivate, perhaps I will need more than one post.

More is in a...hyperlink - Close button

Intro

A while ago I published a list with events able to trigger an action, whether it is a simple, advanced or shared action. Most commonly used events are the slide events, Success/Failure events for interactive objects, Question slide and Quiz events, D&D events. Both the hybrid rollover slidelet events (now deprecated because it is not supported for HTML output) and the Hyperlinks are 'outsiders' but can be very useful as I want to point out with this article (Closing popup or lightbox) and the next article (creating a dropdown list with Jump to actions, equivalent of the former 'Goto Slide' widget). 

Example movie

Watch this two-slide example.

  1. The title slide has a text hyperlink 'Next' to proceed to the next slide.

  2. The second slide has six shape buttons, each opening a popup (it could have been a lightbox as well, work flow is identical). In the popup information you'll find  the text 'Close X' which is a hyperlink  to close the popup.


States and Hyperlink

It is not possible to add interactive objects to a custom state: button, click box, shape button, Text Entry Box, all are greyed out. However it is possible to have a hyperlink within a text container, that will be active for all states of that container. This can be a welcome workaround. It is however not possible to have different actions for the hyperlinks in different states. Since the goal here was to close the popup, I created a shape as text container with 7 states as you can see in this screenshot:

The 'Normal', or default state looks invisible: there is no text in the text container with the exception of the text hyperlink 'Close X'. This was achieved by giving the text hyperlink the color of the background, the text container a Fill with Alpha=0% and no stroke. The other states have a Fill (Alpha=100%), they have information text with a visible color (also for the Text Hyperlink) and an image.

Actions

1. Next Hyperlink - Title Slide

The commands for Hyperlinks look a little bit different than the dropdown list in the Actions tab. For hyperlinks commands 'Go to Next Slide', 'Go to Previous Slide' and 'Jump to Slide' are in one dialog box:

2. Shape buttons to open popup - Second slide 'ActionProcess'

Look at the timeline of the second slide: all shape buttons (name starts with SB_) pause the slide at the same time, 15,5 secs. When triggering an action, the playhead should not be released, to allow clicking as many times as wanted, in any sequence on those shape buttons. The number of attempts is left at Infinite.

The only command to be triggered is to change the state from the default 'Normal' state to one of the custom states. The choice is yours: 

  • you can use a simple action (be sure to uncheck the option 'Continue Playing the Project'
  • you can use a one-line advanced action, create duplicates for each button; playhead will not be released
  • you can use a one-line shared action with two parameters (text container and state).

3. "Close X" hyperlink - in text container second slide

Beware: there is NO option to prevent 'Continue Playing the Project' when you assign a command to a hyperlink. That means that you cannot use a simple action, but have to use a standard advanced in this case.It is again the action 'Change state...to Normal.' 

Another difference for hyperlink events: the command Excecute Shared Action is missing. That is too bad, because if it had been available, one shared action would have been able to achieve both showing popup (with the 6 shape buttons) and close the popup (with the Hyperlink).

Conclusion

Hyperlink makes it possible to have an action in a state for an object, although it has to be the same action for each state of the object. You learned about the differences between hyperlink events and other events to trigger an action:

  • There is no way to prevent the playhead from being released if you trigger a simple action; use a standard advanced action.
  • You cannot trigger a shared action with a hyperlink.
  • Some commands have a different look: example is the Slide command (see screenhot in this article).