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.

Captivate's Timeline(s) Demystified - Intro

Intro

Happy New Year 2017 to all Captivate users!

Quite a few years ago I wrote an article about Timeline secrets in Captivate 5: Tiny Timeline Tidbits

Since the change in the UI with Captivate 8 , the newbie User Interface minimizes the Timeline panel by default which is a pity IMO. Some of the questions I read, at least partially due to that decision to hide the Timeline: 

  •  'I want to get rid of the timeline, don't need it at all'
    (user thinking that Captivate is just a Powerpoint clone).
  •  'Why is the timeline not showing the whole project, so user unfriendly'  
    (user supposing Captivate is a mini video application)

  •  'Why do I see all the objects on the slide, even when the playhead is in a part where some objects shouldn't be visible, not intuitive'  
    (user with  an Animation background)

For those reasons I suspect it is Time to update that old article, to explain the ins and outs of the Timeline panel with its latest additions like CPVC-projects and slides, Effect Timelines, Drag&Drop. 

Timeline panel, in collaboration with the Timing Properties panel is at the core of the Captivate applications. Personally I'm persuaded that it should be a top priority in the skillset of any Captivate developer, whatever its level.

Since I cannot offer you a 'digestive' (limoncello, grappa, schnapps, single malt;;;) I will split up this (broad) subject in several articles. You are reading the introduction. Following posts will treat topics like 'Timeline in a cpvc-project', 'Timelines in a cptx-project, master slides and normal slides', 'Color coding and Shortcut keys for Timelines', 'Why/how to pause a timeline?'. 

Why a Timeline?

Many users talk about the output of a Captivate project as 'a movie'. Although this is only completely true for a file published to a video format (MP4), this indicates well that Captivate is related to video applications like Premiere Pro and After Effects.

No one will have doubts about the importance of 'time' for video. A movie has a playhead, which moves at a certain speed. That speed is usually indicated by the term 'frames per second', or FPS.

Frames remind me always of the traditional way of producing cartoon movies: each frame, drawn by a graphic artist, was slightly different from the previous and the next frame. By playing those frames at a certain speed,  movement could be simulated: the slowness of our eye/brain made it possible to see fluid movements from those frames.

Captivate has two types of 'raw' files: the cptx-files (slide-based) and the cpvc-files (less-known, Video Demo files). Both types have a Timeline panel but with some differences as I will try to explain in this sequence of posts. Let us start with those features that can be found always in the Timeline.

Common features

You can either read the following text, or watch this interactive Captivate slide:

Some items are available in all Timeline panels: for cptx and cpvc projects:
  1. Contrary to some video or animation applications, the Timeline ruler in Captivate is always in Time units (seconds), cannot be changed to frames (look at the horizontal ruler in the top of the Timeline panel). The smallest increment in the timeline is 0,1 seconds. With a default rate of 30FPS (which can be changed) 0,1seconds = 3 frames

  2. The Playhead is represented by a red rectangle. When you use the play button in the control panel (see 4), you'll see its movements. You can also drag the Playhead to a certain position on the timeline. The size of the rectangle is bit different between a cptx and a cpvc project as you can see in the screenshot.

  3. In the first column of the panel, on top you find the Eye button, and each track (horizontal line in the panel) in the Timeline has a (blue, filled with orange) dot under this button. See the screenshots:
    When clicking the Eye button on top of the column, all objects in all tracks will be hidden on the stage. This is only meant for editing reasons, it will not affect the published course.To hide items after publishing you need to click that 'other' Eye button in the Properties panel of the objects (hidden in Output). When clicking on a dot under the Eye button, next to a track, all objects on that track will be hidden. In the exampled on the screenshot, the second tracks from the top have been hidden.

  4. Next to the Eye button is a Lock button, also with dots next to each track. When you click the button itself all objects on all tracks will be locked: not available for selection nor for editing properties. However, if you click a dot next to a track, there are two states. On the first click only size and position will be locked. In that state you can still select /style the objects. The blue Lock icon is surrounded by 4 arrows, as you can see in the screenshot: for the cpvc it is the track immediately above the Video/Audio track, for the cptx project the uppermost timeline. Clicking twice on a dot results in full lock: no selecting/editing is possible. This is the case for the uppermost Objects track in the cpvc-screenshot and for the image I_topics in the cptx project. Watch the different look of the lock icons.

  5. The Control panel at the bottom of the first column (see screenshot above) has the classical (video) buttons:  'Move Playhead to start', 'Stop', 'Play', 'Move Playhead to the end'. Play and Stop can also be activated with the space bar if the timeline panel is active.
    Warning: Play Slide under the button Preview has the same function as Play in this control panel. Although it is under the Preview button it is NOT a preview at all! It is just meant to be used for editing, will not show how the slide will look after publishing. This is a common misunderstanding.
    The last button on the control panel: 'Audio' is a toggle, will mute/unmute Audio when watching using the Play button. Like the Eye button, this will not affect audio when publishing. The state of this button will apply to all open projects.

  6. In the second column at the same vertical position as the control panel described under 6 and the horizontal scrollbar, you'll find 4 tiny icons in all normal slides (they have no sense for the Master slide which has no real duration)

    1. Hourglass icon: indicates the location of the playhead from the start of the track; its tooltip is 'Elapsed Time'; this indicator is always available, even when no track nor object is selected.
    2. Vertical line + right arrow (Selected Start Time) will only have a value when a video clip or a static object is selected; it will indicate the start time of the selected video/object. In the screenshot the Smartshape on top is selected.
    3. Vertical line + right arrow + vertical line (Selected duration) will show the duration of the selected clip/object, is only available when a video/object is selected on a track.
    4. Chrono icon: Total duration of the slide 

      The Zoom slider to the right of this total duration,  allows the timeline to zoom in/out. 

Next post

The next article will be about the specific features of the Video Demo timeline (cpvc-project) and the cpvc-slides. You'll not have to wait long, neither for the third article about the specificity of timelines in a cptx-project (master slides and normal slides).