Timeline for 360 slides (static/video)

Intro

A while ago I published several blogs and interactive movies (created with Captivate) about the ins and outs of the Timeline in Captivate, which is still the feature that causes most frustrations because of lack of understanding. With CP2019 some new features are added to that timeline, for the VR projects (360 slides) and for interactive video. Looks like it is time to explain those new features. This blog has focus on the timeline in 360 slides inserted in a non-responsive project.  Those slides are not able to have overlay Quiz slides as is possible in a full VR project. In a future post I will talk about the overlay Quiz slides and their timeline. I published recently a short post with some tips for a VR project.

360 slides

In a non-responsive project you can use the big button Slides to insert a slide which has a centered button to choose either a 360° static image or a 360° video. It is not possible to drag a 360 item to the slide from the Library, you need to use that button.

The 360 image is inserted as background, whereas a normal image inserted on a slide will have an individual timeline. In the Library you will see the images in the Background folder, and you have to use 'Find Background'.

Static 360 image

Editing a 360 slide is more limited than editing a normal slide. You will not have an Actions tab in the Properties panel, which means that you cannot use the On Enter/On Exit events for the slide. The Big Button Bar is mostly dimmed. There are only two assets that can have a timeline as you are used to:

  • Audio (under Media button) can be added as slide audio, which will have its timeline as expected under the slide timeline. Slide audio can be paused on a 360 slide by a hotspot, just like by any interactive object: you find the feature 'Stop Slide Audio' on the Options tab of the hotspots (including Character which is also inserted as hotspot). 
  • Label (under Text button): can be added, formatted and timed. It can be used for titles or for instructions that need to be available even if the playhead moves. Labels can be moved and will be 'distorted' to fit in the spherical image if necessary. IT is not possible to apply an effect on the labels. 

You will see 'Characters' available' under the Media button as well. However inserting a character will create a hotspot where the character is used as custom image.  It is not possible to resize the image, only the location. In most cases the characters will be very big due to that lack of editing.

The functionality of a 360 image is mainly in the so-called  'HOTSPOTS' to be inserted from the big button with that name. Referring to existing terminology, a hotspot is a new type of  interactive object similar to click boxes, (shape) buttons. However hotspots have a timeline with zero duration. In the timeline the visual representation of a hotspot is  either a half circle (brownish) if the hotspot is on the first frame of the slide, or a full circle (when on a later frame).  A selected hotspot has a blue circle surrounding the normal icon. In the following screenshot Hotspot2 is selected. The generic names were kept, but I have changed the stacking order by dragging hotspot 2 on top of Hotspot3.  Each hotspot is marked on the stage and after publishing by one of the SVG's, a custom image or a character as mentioned above. 

Default setting for each hotspot is to keep the timeline paused. For simple actions triggered by buttons in normal slides, the default setting is 'Continue playing the project'. For the hotspots, that setting is unchecked by default (if you trigger 'Play Audio' with a hotspot it will change as expected to Continue movie after audio is finished).

If you leave that option unchecked, the playhead will remain paused. If you use the option 'Explanatory', this means that all hotspots sharing that frame will be visible to the learner. In some cases you'll have only hotspots in the first frame (look at the sample project), but to avoid overload in a complicated image, you could choose to have groups of hotspots in a later frame. You see an example in the screenshot of the timeline inserted earlier: two hotspots are in the first frame and 3 more in frame 45(1,5secs). In that case you have to release the playhead, which can be done in two ways:

  1. By checking the option 'Continue playing the project', not so interesting if you have set up the image in 'Explanatory' mode where the earner can choose the sequence of clicking the hotspots. But it can be a solution in 'Guided' mode.
  2. By adding a hotspot with the action 'Continue', which is available in the dropdown list. That was the case for the screenshot above: it has a character hotspot (with attached audio) and a second Continue hotspot. One of the hotspot icons is clearly recognizable as a 'Play' icon.
  3. By showing the playbar (and maybe instruct the learner to click the Play button). Both commands 'Hide Playbar' and 'Show Playbar' are available to be triggered by a hotspot, but I was never able to use them using a hotspot in a slide. However you can show the playbar by default or use a slide event on a previous static slide.

As I explained in previous articles, the Timeline panel is also a Layers panel, defining the stack order of objects. In a 360 slides the stacking order is not always respected: even if you put a label on top of the stack, it will always be covered by any hotspot in the same location.

However for the hotspots it also has a third functionality, only for Guided mode. The stacking order will define the sequence in which the hotspots are presented to the user: starting from the bottom. In the example screenshot, at frame 45 hotspot 2 will be presented before hotspot 4.  You can change the order by switching the layers.

The dropdown list with actions to be triggered by the hotspots is more limited than for another interactive object. I already mentioned the command 'Continue' and its possible use. There are several navigation commands (previous, next slide, jump to slide and to last visited slide). There is the Exit and No Action commands which are self-explanatory. The most useful  commands are :

  • Display Image:  the image will be displayed for a duration specified in the Properties panel, Actions tab. You cannot choose an image in the Library, and once the image is imported it will not appear in the Images folder of the Library but in the Backround folder. Images folder only has the SVG icons of the used hotspots, whereas the SVG folder remains empty. Once the image has been displayed for the chosen duration,  the hotspot is converted to a visited state but remains active.  It is possible to click another hotspot before the duration of the first has ended. If you want all displayed assets to remain you have to choose a long duration for each of them.
  • Display Text: behaves the same way as Display image, you need to specify the duration. Very little formatting is possible, hence a suggestion in a previous blog post to replace Text b: y images with text in the wanted font and with controlled colors for the background. Hotspot will also have a visited state.
  • Play Audio: you can import a clip, or get it from the Library (they are stored in the Audio folder). No need to define a duration, once an audio clip is started it will continue playing unless you launch the command 'Stop Triggered Audio' from another hotspot.  If you have several hotspots using the Play Audio command and the learner clicks next hotspot before the first audio is finished, that first audio will automatically be stopped. That is the normal behavior of those audio clips as I explained in 'Pausing Timeline and Audio Clips'

360 Video slide

When you insert a 360 video in a 360 slide, it will end up in the correct folder 'Video' in the Library (under Media). I couldn't find a 'Find in Library' option. The video is represented the same way as a Video Demo slide or a FMR slide in a software simulation, it is merged into the background of the slide (mention for Usage in the Library uses also 'Background of slide).

Of course, the location of the playhead is now more important than for a 360 image. You can have an image where only the first frame is used to stack all the needed hotspots. However that makes no sense for a video, where movement is crucial. It will not be easy to create an engaging experience if the video has already audio embedded, because each hotspot will pause the video, which means also the embedded audio. Adding slide audio is possible the same as for a static 360 slide. However synchroniang will not be easy neither.  I need more exploration of this type of slides, but here are some first tips:

  • Try to offer audio only by using hotspots. I start the video with an inserted character that is set up to play audio, and have the video continue immediately after the audio is finished.
  • If you have only one hotspot in a frame, activate also the option 'Continue playing the project' whether you use Display Image/Text or Play Audio.
  • If you have more than one hotspot in the same location, and you use the Guided status, keep that setting only for the last hotspot to be presented. For the Explanatory status, you probably will need the playbar or a hotspot with the Continue command.

In the screenshot you see the video slide in its first frame. That frame has a character (selected) as hotspot which will play auio. The label indicates what the learner has to  do, but cannot be put on top of the character. When the audio is finished the video starts playing. It will pause again at 4.3 seconds which has two hotspots. The last hotspot has also Continue selected, status was here Guided.


Easy Timeline Tweaks

Intro

Last week at the Adobe eLearning Conference in DC I presented two sessions about the Timeline. The first part 'Demystifying Captvate's Timeline' allowed me to explain the basics without having to rush as was the case in the Adobe Learning Summit at Las Vegas 2017 (watch the interactive version of that presentation in: Captivate's Timeline). The second part 'Mastering TImeline' had its focus on more advanced workflows, using micronavigation, advanced/shared actions and multistate objects. In the first part I didn't use any advanced nor shared action, just offered some small practical tips. For those who couldn't participate in the conference I will summarize those tips.In this article you'll find 3 tweaks.

Tip 1: Pausing all slides at the end

This request often appears in the forum, and is also useful when using Captivate for presentations  (as I usually do). The user has to take an action to continue to the next slide. Two possible situations: you are using a default playbar, or custom navigation. Both workflows are using a shape button on master slides. Shape buttons are the only interactive objects allowed on master slides. You can use them in non-responsive and responsive projects (both Fluid boxes and Breakpoint views).

With Default Playbar

  • Open the Master slide panel
  • Select the Main Master slide
  • Add a shape button, with Alpha = 0 for the Fill and width = 0 for the stroke to make it invisible to the user
  • Check the settings for that shape button in the Actions tab of its Properties panel, to look like this screenshot:

    No action is needed for this shape button, its unique use is to Pause the slide. Each shape button set up this way will pause slides using this master slide at the end of the slide, whatever its duration.
  • Check if the daughter master slides have the option 'Show Main Master Slide Objects' checked. With the included themes, that is the case for most master slides, with the exception of the Title and the Blank master slide.

With Custom Navigation

If you use master slides with an inserted Back and/or Next shape button for custom navigation, you can use that shape button with the same settings as described under the previous workflow. Those buttons will have a Fill and perhaps also a stroke, and they may not be on the main master slide but on other master slides. You just have to check that each master slide has at least one shape button to pause the slide.

Tip 2: Reset a slide

This tweak can be used in several situations:

  • to reset a knowledge check slide
  • to reset a Drag&Drop slide configured as knowledge check slide
  • to reset effects, including motion effects
  • .....

In the second presentation I explained an advanced workflow using micronavigation, but this workflow is easier, though it will increase the number of slides, which means that you cannot use the system variables cpInfoCurrentSlide and cpInfoSlideCount to show the progess of the slides. Try this out:

  1. Insert a short dummy slide before the slide that you want to reset. Give it a timing of 0,1sec (shortest possible).
  2. On the slide to reset, insert a (shape) button which you can style as you wish.
  3. The success action of that button should be: Go to Previous Slide'. When you click that button, the playhead moves to the previous slide which is so short that it is practically invisible. Since the content slide is re-entered it will automatically be reset for the situations mentioned above.

This workflow is also valid for all types of cptx-projects, responsive or not.

Tip 3: Avoiding frustration in Quiz

Quiz and score slides have a default pausing point at 1.5secs. That pausing point is visible on the Timeline, but is not present in the Timing Properties panel. Here is a short description of the 'role' of this pausing point:

  1. On Quiz slides it is linked with the two-step Submit process (and Submit button). In the first step the playhead remains paused while the learner sees the feedback messages. In the second step, the playhead is released. If you keep the default Success/Last Attempt actions set to Continue, the playhead has to visit all the frames in the inactive part of the quiz slide (part after the pausing point) before reaching the next slide. You could change those actions to 'Go to Next slide', but sometimes (depending on the setup for transmitting the score, bandwidth etc) this could lead to problems.

  2. On the Score slide the pausing point is linked with the Continue button. Contrary to the Submit pausing, the actions triggered by that button which you specify in the Quiz Preferences (If passing/failing grade) are only done when the playhead reaches the last frame of the score slide.

In both cases you can avoid frustrations by dragging the pausing point closer to the end of the slide timeline, but not completely till the end (leave a small inactive part). 

Moving the pausing point is even more required when you have slide audio on the question or score slide. In almost all cases, that slide audio will result in a longer slide duration than the default 3 seconds.  You have to know that it is not possible to pause slide audio on a quiz/score slide by a pausing point, as is possible on other slides when using an interactive object. You may not be aware of the pause at all, audio will just continue. Many users are confused by that.  If you leave the pausing point at 1,5secs, the learner will have to wait a frustrating long time when completing the Submit process (quiz slide) or leaving the score slide with the Continue button. Make sure to drag the pausing point in such a situation:

Tip 4: Forcing views

As a professor with a lot of experience in tutorials for adult learners, I really dislike this request that appears too often on the forums: how can we force a learner to 'view' all the content on a slide. Forcing viewing doesn't mean understanding, nor learning at all, can even have the opposite effect. But that is off topic.

You have to forget the default playbar in this situation. Each slide will need a Next button. The timeline of that button has to start after all content has appeared and all audio has been listened to. Timelne will look similar to this screenshot:

Such a setup will become very annoying if you allow the user to revist the slide: he will have to wait again until all audio has played and all content has appeared to be able to proceed. Is there a solution? Sure, but not without advanced/shared actions. Watch out for a next blog post, linked with the second part of the Timeline presentation. I will offer you a shared action that makes it very easy to avoid that boring situation on second and later visits. 



Timeline - Advanced Workflows

Intro

At the Adobe Learning Summit (Las Vegas - 24 October 2017) I was invited to present a session about the Timeline for advanced workflows. It is one of my favorite subjects (bit below my most preferred topic 'Advanced/Shared actions') because I see so many questions on the forum that are due to not or misunderstanding the Timeline functionality.

Tutorial

For those users who were not able to attend ALS2017, I converted my Captivate presentation into a self-paced learning tutorial.

It has been published as Scalable HTML5 project. Autoplay is turned off (not allowed in some OS), just click the triangle button to start the movie (with narration). You can watch it directly on any device from this link

Or you can watch it below:

The tutorial has at its end links to different published movies, examples using the described features of the Timeline. Several features are used in the movie itself: skipping audio on the dashboard (second slide) on later visits, Delay commands for automatically building lists on different slides. Be sure to use the circular button at the bottom to show the value of the system variable cpInfoCurrentFrame, to discover (some of) my secrets.

Feedback

I would appreciate feedback and welcome questions. Are you interested in learning more about the examples? Are the mysteries not totally clear to you? Please let me know... If you want a copy of the handouts created for this presentation, send a mail to info@lilybiri.com.




1-2-3 Eye Buttons Mystery

Title is not an nostalgic reference to the best spreadsheet application ever (Lotus 1-2-3) but is related to... Captivate.

The THREE 'eye buttons' in Captivate are a source of confusion because they have exactly the same look (contrary to my image above) but show very different functionality. 
Questions due to that confusion appear not as frequently as the timeline misunderstanding questions, but nevertheless think that a clear explanation could help to dissipate confusion:

1. Eye button on the Timeline

This button appears in the timeline panel in the first column, on top, next to the lock button. If you click the top button all objects on the stage are hidden. To hide individual objects, click a radiobutton left of the object timeiine. A red cross will appear (see screenshot below). A full explanation of this and other timeline features and can be found in this article. Hiding an object on the stage has no effect whatsoever on the presence of that object when publishing (or previewing) the course: the object will be visible. What is the goal of this eye button? As you know (if you did read the article about the timeline), contrary to normal video timelines (included the Video Demo Timeline), a cptx slide will show all objects on the stage, whether they are scheduled to appear from the start or later on. That makes aligning a lot easier, but can also lead to a very crowded stage where objects are covering up other objects (except in the case of Fluid Boxes). To facilitate editing, it can be useful to hide some objects using this first Eye button.

This screenshot, taken from the game explained in 'Using the While loop' shows several hidden (on stage) objects and even a group. Since the topmost group still has one visible object (click box), its bounding box is visible on the stage. For the other group even the bounding box has disappeared.

There is one exception: you can also click the radio button left of the slide timeline. In that case the slide will be hidden (with all its content) and it will not appear when previewing/publishing. It is an alternative work flow for using the right click menu on slide(s) in the Filmstrip, option 'Hide Slide'. With both work flows you'll see a dimmed slide in the Filmstrip and an eye icon (not a button) as indicator.


Eye button in the Properties panel: Visibility in Output  

If you want an object to be initially invisible in the published course, you need to click this button in the Properties panel (inspector) of that object, top left. It is almost the opposite button of the first because the object will not disappear on the stage at all. Why would you hide an object in a published course? Maybe because you'll want to make it visible later on.  Example: you want to allow navigation to the Next slide only after certain actions have been performed by the learner (like clicking hotspots, or entering text in fields). Showing an object will be done with the command 'Show'. Making an object invisible by using this second Eye button can also be done on runtime by the action 'Hide' and that is often a better approach.  Since you can show a hidden object, it means that the object is included in the published version which is not the case with a hidden slide. A hidden slide is not included in the published course.


Eye button in the Drag&Drop panel

When this button is set to 'active', and you did set up the Drag&Drop interactivity by defining the drag sources, the drop targets and the links for correct answers those three components are made visible: green rectangles for the drag sources, blue rectangles for the drop targets and blue arrows for the links. When you deactivate this eye icon, those indicators will disappear. Since it happens that Captivate deactivates that button without your consent, it is good to know how to make those indicators visible: click on the barred eye icon: 

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.

Challenges for Starters

Intro

Seven years ago I started blogging about Captivate (with version 4 - 5). Most subjects are more advanced, you'll find many use cases for advanced and shared actions. Meanwhile I also have spent thousands of hours on the Captivate forums, answering questions ans solving issues. Moreover I am busy as a Consultant and a Trainer (for Captivate and other Adobe applications), both in live and online classes. Based on the combination of those 'Captivate' experiences with my former career as college professor, I planned to write this article to line up the three most important Challenges for any Captivate developer, especially for newbies.  It doesn't matter whether you are developing software simulations, soft skills training, responsive or normal projects, if you master those Captivate features you'll feel more comfortable and save a lot of time. Bonus for me: less questions on the forums :). Imagine standing before this natural stone porch, in the middle of the most beautiful desert in the world. You got that Captivate license, but how to start, where to go?

Challenge 1: Timeline

Why?

Captivate's Timeline is without any doubt one of the first stumbling blocks for Captivate newbies. This observation is based on the many problems popping up in forums and social media, on my experiences with consultancy and while offering basic training. It is not the normal timeline that you have in video applications, or in animation apps. It shows all objects at once on the stage, timeline is per slide, not for the whole project. Lot of reasons to be confused. Pausing the timeline by a command or by an interactive object is THE key to building interactivity in a Captivate course which is the main reason why you have chosen for an eLearning authoring tool instead of a video capturing tool. Understanding the Timeline and being able to control should be the first priority of any Captivate learning (and training) process. How do you stop this touareg caravan ;)?

Resources

Nothing can replace a live (or virtual) training for this challenge, but recently I published a sequence of 5 articles on my blog and in the eLearning Community to clarify this subject.  Here are the links, not in the 'logical' sequence which I used for publishing, but ranked by importance:

Pausing the Timeline, why and how?

Captivate Timeline(s) in cptx-file demystified

Introduction

Color codes and shortcut keys

Captivate Timeline in cpvc (Video Demo)


Challenge 2: Quiz

Why?

Captivate quiz and score slides have pretty strict rules. A lot of functionality is built in the quizzing and score master slides. The two-step Submit process, the priority of the embedded objects cause a lot of problems for starting Captivate users. That explains why every blog post I ever wrote about Quizzing is very popular. Most of them, even after many years, are still visited daily. The challenge here is about the normal Quiz slides, not custom Quiz slides that are created using standard objects, widgets, variables and advanced/shared actions. Those custom question slides are challenging for intermediate/advanced users (watch out for a later blog post for those users). Drag&Drop slides, used as Question slides can be included in the starter's challenge because they make a quiz more engaging.

What a relief when the car transporting our food and cook was found after a long quest:

Resources

Some of these blog posts do need an update, although most of the information is still valid

Question Question Slides - part 1     with the new Review buttons in Captivate 9 the confusion Next-Skip is gone

Question Question Slides - part 2

Knowledge Check Slides

Drag&Drop tips

Drag&Drop Captivate 9 - InBuilt states


Challenge 3: Theme

Why?

It is one of the most hidden gems in Captivate: design of any project can be streamlined when using a custom Theme. A theme includes all object styles, master slides, skin and defaults for software simulations. All are based on a (custom) Theme colors palette, which can even be applied to most Learning Interactions. Creating or editing a theme before starting any project may seem a waste of time, but I guarantee that it will save a lot of time in the process. Small changes to the design, so often asked for, are done in minutes. In many circumstances a well-designed theme makes templates superfluous. 

Architects of Macchu Picchu knew very well how to prepare 'design' of their city. Sorry for my adding the acronym TQT (Timeline, Quiz, Theme):

Resources

Here are some links to get you started with Themes and Theme colors:

What's in a Theme/Template?

Theme Colors


Conclusion

This was my personal view on the stumbling blocks for Captivate starting users. I am not pointing to any step-by-step work flow which may seem astonishing. My focus is on what is often causing the most frustrations for the so-called 'newbies', whatever their experience with other applications. As a college professor I used Flipped classes long time before the word was invented: do not spend valuable training time by explaining processes that can easily be found somewhere (videos). Students do not need a trainer for them. Spend class time by taking away obstructions that are slowing down the learning process.








Captivate Timelines: color coding and shortcut keys

Intro

This last article about the Timeline is sort of a bonus for those who want to know 'everything' about the timeline panel. The color codes can be a quick visual help to recognize object timelines, and I personally use the shortcut keys quite a lot to avoid the many mouse movements to the different tabs in the Properties panel. 

If you have problems with the used terminology, maybe you missed some information from this articles, already published:

Captivate's Timelines demystified - Intro

Video Timeline demystified (cpvc)

Captivate's Timelines cptx-project

Pausing Captivate's Timeline (cptx)


Color coding

The color coding is the same for master slide timelines and slide timelines.  The hexadecimal code is just an indication because a lot of the timelines have a gradient fill..

  • Audio timeline: dark grey (about #4E5156)
  • (Master) slide timeline: beige (about #DBD7CE)
  • Placeholder objects: orange (about #DCC399) with some exceptions (Content/Rollover Caption/Rollover Image)
    • Content Placeholder: light blue (about #AFD7FF)
    • Placeholders for Rollover Caption/Image: green (about #BFDD8B)
  • Static objects: light blue (about #BEE8FB). Static objects are Text Captions, Text Animations, Shapes (not used as button), Highlight Boxes, Web objects, SVG's, Images, Videos, Animations, Characters, HTML animation. There are some exceptions
    • Rollover Caption/Image have the green color like for the placeholder (about #BFDD8B)
    • Rollover Slidelet is sort of a hybrid, between static and interactive: is also green (about #BFDD8B)
    • Zoom object: also green (about #BFDD8B)
    • Static widget/interaction: also green (about #BFDD8B)
  • Mouse object: beige like the slide timeline (about #DBD7CE)
  • Interactive objects: green (about #BFDD8B). Those include the buttons, click boxes, Text Entry Boxes, Shapes used as buttons, Learning interactions (static and interactive)
  • Effect timelines: light red (#FBDAE1), turning to darker saturated red (#F584A7) when selected

  • A selected timeline, with the exception of the slide audio  at the bottom, and effect timelines will always be blue (about #99BCBF)

Shortcut keys

I love shortcut keys, once published my favorites for moving/resizing objects (which are still functional). The timeline panel has also several shortcut keys, which can save time because you don't have to switch to the Properties panel all the time. Some of the shortcut keys also work for Effect timelines, but not all.
 

Zooming : Zooming in/out has to be done with the slider at the bottom of the Timeline panel. No shortcut keys are available.  

Spacebar or F3: alternative shortcuts for the play button on the timeline panel or the option Play Slide (confusingly stored under the big button Preview). This method (no Preview) can be used for editing timing, for synchronizing. Use this 'Play slide' (or scrub) to position the Playhead, and you can then easily synchronize start times of objects with this Playhead position. Inserting an object when the playhead is at a certain frame will result in having the object timeline starting with that frame.

HOME/END: moves the playhead to the start/end of the slide timeline

CTRL-E: to extend the duration of a selected object till the end of the slide.
This shortcut key is not valid for individual Effect timelines

CTRL-L: to move the start of an object timeline to the Playhead position, a great way to have multiple objects appearing on the same moment  (still waiting for CTRL-R to align end of timeline with playhead)
This shortcut key is not valid for individual Effect timelines but they'll move automatically with the object timeline   

CTRL-P: to move the start of an audio timeline to the Playhead position

LEFT/RIGHT arrow: moves start of an object timeline 0,1sec in the indicated direction. Applied effect timelines move with the object timeline. Shortcut keys also work for audio timelines
This shortcut key is valid for individual Effect timelines, after selecting they can be moved independently from the object timeline

CTRL-LEFT/CTRL-RIGHT arrow: moves start of an object timeline 1sec in the indicated direction (also audio timelines), applied effect timelines will move along.
This shortcut key is valid for individual Effect timelines, after selecting they can be moved independently from the object timeline

SHIFT-LEFT/SHIFT-RIGHT arrow: decrements/increments duration of slide timeline or object timeline with 0,1sec. Applied effect timelines will not be changed. This means that an effect timeline could end up being outside of the object timeline; in that case the effects will play but not with the intended duration or start.
This shortcut key is valid for individual Effect timelines, after selecting you can increase/decrease the duration of the effect timeline independently from the object timeline

SHIFT-CTRL-LEFT/SHIFT-CTRL-RIGHT: decrements/increments duration of slide timeline or object timeline with 1sec; same behavior for the effect timelines as described above.
This shortcut key is valid for individual Effect timelines, after selecting you can increase/decrease the duration of the effect timeline independently from the object timeline

Conclusion

This was the last article in the (long?) sequence about Captivate's Timelines.

I learned from the contacts with Captivate users, as forum moderator, trainer and consultant, that the Timeline is the most important stumbling block for starting Captivate users. For that reason I spent quite a lot of hours trying to assemble this 'soap' about it. Based about that same experience, and the statistics of my blog posts, I see two other similar issues causing problems to Captivate newbies. In the next article I will try to elaborate on those 'big' 3 and offer links to tutorials/articles that explain them in depth.  

Pausing Captivate's Timeline

Intro

This is the fourth post in a sequence of 5. The first post introduced features of all timelines, the second is focused on the specific aspects of the Video Demo Timeline, the third on the aspects of the normal/responsive projects (cptx) both for master slides and normal slides. To understand this article - perhaps the most important - I recommend to  read at least the first and the third article as a preparation. 

This topic is more suited for a live event: a real or a virtual training session. I expect a lot of questions, and those are easier to answer in a live event. I have presented several webinars for Adobe in the past (most about advanced and shared actions), but that practice seems to be discontinued since a while. If you want to participate in a meeting (Connect room), I'm prepared to organize it. Send me a note: either by mail (info@lilybiri.com), in the comments on this post, or use Twitter (my handle is @Lilybiri). In case of sufficient requests, I'll propose a date/hour (probably am PT, for users in USA) and will need an e-mail address for the invitations. As a bonus, will offer you some files.

Pause and Pausing points

Pausing the timeline means stopping the Playhead. However that can be done in in two ways, and they do not affect the items in the same way. Let me first explain what I mean by 'Pause' as opposed to 'Pausing Point'. You'll see that I compare them with two traffic signs: Pause with the red light, Pausing point with the Stop sign. But also in traffic, some 'items' do not respect those signs, legally or illegally. 

Pause 

This strict way of pausing can be achieved by one of these methods:

  1. With the pause button on one of the default playbars.

  2. By choosing the command 'Pause' to be triggered On Enter for a slide (doing it On Exit is not a good idea, because it will happen after the last frame, see previous post about events).  It can also be a (last) command in an advanced/shared action.

  3. By using the Success event an interactive object (like a shape button) with the command 'Pause' either as a simple command or within an advanced/shared actions. Usually it will be the last command. 

  4.  Alternative for 'Pause' command is to assign 1 to the system variable cpCmndPause (its default value is 0). This system variable controls the pause.

If you use a playbar, you'll see that the progress bar is stuck when Pause is encountered. To understand even better, I recommend to insert the system variable cpInfoCurrentFrame in a text container, displayed for the whole project (on top). 

UnPause?

You can use the Play button on the playbar, or need the command Continue, which is available as simple action and in the dropdown list in advanced actions.

Pausing point

Pausing points exist on some special slides, or you can add them by inserting an interactive object for which Pause the slide is activated in the Timing Properties panel. In many cases the pausing point will be visible on the Timeline (see previous articles), but not always. Contrary to the absolute pause, here the timeline is 'waiting' for an action by the user. For that reason the STOP sign is a better metaphor than the red light. Here is an overview of the pausing points, which will be visible on the Timeline:
  1. Quiz or question slides: the pausing point is visible on the slide timeline, but not in the Timing Properties panel. Only way to move is by dragging. Default timing is at 1,5secs, and pause cannot be unchecked. Pausing point is linked with the two-step process triggered by the Submit button. However when selecting the Submit button, you'll not see the pause in the Timing Properties panel (as is the case for the D&D Submit button). Waiting is here for the user to click the Submit button, then to press Y or click on the slide
  2. Score slide: same situation as for the quiz slides: visible in the slide timeline, not in the Timing Properties. Default timing is at 1,5secs. Pausing point is linked with the Continue button, but will not show in the Timing Properties panel of that button. Waiting here is for the user to click the Continue button.

  3. Drag&Drop slide: is pausing at 1,5secs but the point is not visible on the timeline. You will not see it in the Timing Properties for the slide, but in the Actions tab of the D&D panel. It is linked with the Submit button, when selecting that button the Timing properties panel will show the timing of the pausing point. Waiting for the user to click the Submit button, or in case of Auto Submit waiting for a correct answer.

  4. Interactive objects (click box, button, shape button, Text Entry Box) can have a pausing point, to be defined in the Timing Properties panel. That pausing point will be visible in the Timeline, and the part before the point is indicated as 'Active', part after the pausing point as 'Inactive'. Since a click box is invisible to the user, it has not inactive part, its pausing point will always be at the end of its timeline. Waiting is for the user to click either on or outside of the interactive object (click box, shape or normal button) or to confirm the Entry in a TEB. You can edit the pausing point by dragging in the Timeline or in a precise way by editing the Timing Properties panel. It is also possible to uncheck the Pause (see screenshot 3 in the Gallery).

  5. Shape button on a master slide can have a pausing point. Since objects on a master slide have no duration, no Timing Properties panel, you have to indicate that you want it to pause, in the Actions tab of the Properties panel (see screenshot 4 in the Gallery). You can uncheck the pause there as well. The pausing point will be at the end of each slide, based on that master slide. It will not be visible in the timeline
  6. Interactive widgets or learning interactions have a pausing point at 1 sec. It will not show up in the Timeline, you can find it in the Timing Properties.  Pause can be unchecked, but you'll not want to do that for this type of interactions.That is the place to edit or uncheck the Pause (see screenshot 5 in the Gallery). Static widgets/interactions do not have a pausing point. More info about difference  between interactive and static in: Widgets and Interactions

Bonus: You can download a (watermarked) pdf with this overview from PausingPoints.

UnPause?

It depends on the kind of pausing point:

  1. For Question slides: the playhead is released after the second step of the Submit process and the actions defined in Question properties will be done.

  2. For Score slide: similar, but after clicking the Continue button.

  3. For Drag&Drop: exactly the same as for the Question slides, after clicking the Submit button.

  4. For interactive objects on master or normal slides: if an advanced action is executed (Success/failure) the playhead is not released automatically. If you want this to happen you have to include a Continue or a navigation command like Jump to as last command in the action. If you use a simple action, the playhead will be released by default, but in CP9 it is possible to uncheck that default setting 'Continue playing the Project' (not done in this screenshot).
     

What is Paused?

Not everything is paused by the absolute Pause command, nor the Pausing points. Watch the interactive movie to understand better. Some items are never paused, some are paused by both Pausing points and the Pause command, some are only paused by the Pause command, not by the pausing points although there may be a workaround. 

The position of the playhead when pausing is important: objects for which the object timeline starts later than the pause will not appear until the playhead is released.

Same is the case for Effects which have a duration, a timeline: if the pause occurs while the effect is not finished, it will stall in the last position and continue only when the playhead is released.

Animations however are never paused, not even when you use the Pause command triggered by the On Enter event of a slide. They will always play.

Video clips inserted as Event video are totally independent: if they are playing when pausing, they'll continue to play. If a pause is occurring and the video is not yet started, the user will be able to use the Play button of the video control panel to watch the video. The only alternative way to pause event video is by using JavaScript (see Working with event videos). Video clips inserted as Multisynchronized video however will be paused by the Pause command and by a pausing point.

The situation is a lot more complicated for audio:

  • Background audio is totally insensitive to Pauses or Pausing points: it will continue to play.

  • Slide Audio: will automatically be paused by the Pause command, but not by a pausing point. It is possible to pause slide audio at a pausing point, to resume when the playhead is released if you check 'Stop Slide Audio' on the Options tab in the Properties panel of the interactive object.
  • For the default pausing points on quiz slides, score slide, D&D slides you cannot pause the slide audio however. This seems confusing, and can lead to a problem. Slide audio clips automatically will increase the duration of the slide. You learned that the default pausing point of this type of slides is always set to 1,5seconds. If the playhead is released with the command 'Continue', it will have to visit all the remaining frames on the slide, those frames in the 'big' inactive part of the slide. To avoid that, I recommend that you change the default pausing time and make it just a little bit smaller than the slide duration. This is not necessary if the actions when releasing the playhead from its pausing point are a navigation to another slide, because the inactive part of the slide will just be skipped.

  • Object audio: will be paused by the strict command Pause, but not by a pausing point! There is no workaround for this behavior for a Pausing point.

  • Audio started with 'Play Audio' cannot be stopped not by Pause nor by a pausing point, the only way to stop it is by launching the command 'Stop Triggered Audio'. 

Why pausing?

This blog post has become very long, for which I apologize. For that reason I will write out some use cases, to illustrate the just described theory in later posts. You're welcome to post some ideas as well. Here are some appetizers:

  • Instead of creating very long slides to fit the narrations, use the Play Audio command and have a pausing point on the slide. That can be a Next button, which offers total control to the user.

  • Question slides with narration as slide audio: you need to move the pausing point.

  • Create custom navigation: use shape buttons on the main master slide, only one of them needs a pausing point to give each user all the time needed to watch the slides.

  • Create a slide with light boxes.

  • Have multiple TEB's on one slide with a unique Submit button.

  • Create a dashboard with buttons to display multiple vodcasts, images, podcasts.

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 (SWF output):

This is the HTML5 version, also visible on mobile devices:


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).