Combining Slide Audio and 'Play Audio'

Intro

This short blog post is meant to answer another question on the Adobe forums. It is at the end of this thread:

https://community.adobe.com/t5/captivate-discussions/pausing-slide-audio/td-p/12312792

This was the goal:

  1. Slide has narration as slide audio
  2. There are multiple shapes used as buttons, which should trigger an audio clip using 'Play Audio' command; those shapes have no pausing point.
  3. When a shape button is clicked the audio clip should play, but the slide audio should pause, and resume after the audio clip ends.
  4. There is at least one more interactive object pausing the slide towards the end. Idea is that the learner can still listen to the audio clips after the slide audio has finished.

This learner tried to solve this with simple actions, using the feature 'Pause slide audio when clicked'. It cannot be solved that way however.

Example project

Watch this short project created to double-check my proposed workflow with a shared action for the shape buttons. After the Title slide you'll see a slide with a Next button to pause the slide, and a shared action triggered by each of the shape buttons. A copy of the Timeline panel can be found on the third slide. I used some slides from the Aspire Quick Start Project.

You can open a rescalable version using this link or watch the embedded version below:



Setup

You could see the slide audio (narration) in the Timeline panel. The audio clips for the shape buttons were imported to the Project library, and their exact duration was checked, because it will be needed in the shared action. Have a look at the shared action with its two parameters (name audio clip and duration clip):

It has two parameters:

The command Pause in the action will pause the slide audio automatically, contrary to a pausing point of an interactive object. You don't have to change any setting in the shape button Properties. The Continue command which will be done at the end of the audio clip will take care of resuming the slide audio.

Do not bother about having two clips playing at the same time. If the learner clicks another shape button before the first audio clip ends, that first clip is stopped automatically. No need to add a command like 'Stop triggered audio' which is only needed when you want to stop a playing clip without playing a new at the same time.

The user is concerned that applying the shared action will take more time than the approach he tried out with simple actions. However, since you don't have to change settings in the shape button Properties panel, the shared action approach needs even less clicks. Check it out. There is no danger of choking Captivate which could happen if you use duplicate advanced actions since you are using instances of one shared action (ecologically).

Problem

The previous solution works fine until the learner has reached the pausing point of the Next button. At that moment, the Continue command in the shared action will override the pausing and the playhead will continue until it reaches the end of the slide and moves to the next slide. It is necessary to cope with that different situation. The Delay command nor the Continue command take into account possible pausing points. 

There are two different situations, each needing a different workflow:

  • Learner clicks a shape button before the narration has ended. In that case the slide audio needs to be paused, and to resume after the end of the triggered audio clip.
  • Learner clicks a shape button after the narration has ended. You need to maintain the pause which occurs at the pausing point of the Next button.

This screenshot shows the Timeline panel, illustrating the two situations. Situation 1 in red, situation 2 in blue.

This needs apparently a conditional action for the shape buttons. You have to figure out which situation is valid. For that reason you need to know when the narration has ended. It is easy to see its duration in the timeline, in this case it was 28secs. To calculate the frame number at the end of the frame I used micro-navigation. If you are new to this type of navigation, please have a look at this blog post:

Intro to Micro-navigation

Solution

Variables

You need two user variables:

  • v_start: will store the frame number of the first frame of the slide with the narration and shape buttons
  • v_stop: will store the frame number at the end of the narration

Contrary to the timeline panel where seconds restart on each slide, the frame numbering continues throughout the project.

Shared Actions

EnterSlideAct

This shared action will be triggered with the Slide Enter event, and is meant to calculate the value of v_stop. Have a look:

The first frame number of the slide is stored in v_start. The duration of the narration is converted to frames, by multiplying with the system variable cpInfoFPS. The only parameter is that duration.

PlayAudio_Act

The former standard action has been transformed to a conditional action:

Same parameters as before. The condition checks if the learner clicked the shape button before or after the end of the narration. Only when the narration hadn't been finished it will need to resume. That has been done with the Delay command and Continue. That is not necessary after reaching the end of the narration, because the pausing point of the Next button needs to be kept pausing, and the narration doesn't need to resume.

This shared action is needed for each of the interactive objects used to play an audio clip.  In the project I used shape buttons. They are visible in the timeline screenshot as SB_Topic1…. SB_Topic4.

By using shared actions instead of duplicate advanced actions, you avoid choking the project if you need lot of those actions which was the case for the user asking the question. Moreover multiple instances of the same shared action also will result in a smaller file size. Of course they are also very easy to transfer to future projects. You can learn more about using shared actions in these videos:

Use Shared Actions: Lesson 1 (crash course)

(re)Use Shared Actions: Lesson 2 (crash course)

Showing Hint with a Delay

Why?

Recently in this thread user asked how to control the appearance of a hint caption.  It was meant to save some frustrations to the learner: hint should appear automatically after some seconds (to be defined), but should not appear when the learner had performed a certain action before that time. This is clearly not possible with the inbuilt Hint messages for interactive buttons. They only appear when the learner is approaching the place where he should click. A custom solution needed to be found. Three solutions were posted, interesting to have a look and compare them. Personally I always bear in mind that someone would like to use this workflow in a fluid boxes responsive project, and that limits the possibilities because stacking is not allowed in normal fluid boxes. We have multistate objects and since a couple of versions a “Delay Next actions….” command.

Example movie

Watch this simple example before reading the explanation:

You will see two slides where a Hint can appear if you are not successful within a delay: slide 2 (arrows) and the Drag&Drop slide (3). I used an almost identical workflow for both slides with a Shared Action triggered with the On Enter Slide event, and a simple advanced action triggered by the arrows (slide 2) or by the object actions (slide 3). Both slides have a hint which is a multistate shape. No variables were used. Slides 4 and 5 show the used actions.

If you prefer to watch the rescalable version, use this link.


Workflow

Hint = multistate object

Both Hints on slides 2-3 are multistate objects. The normal state is the green text bubble, the second state ‘Void’ is completely empty:

On Enter Shared Action

The on Enter action has to perform 4 commands:
  • Hide the Hint shape
  • Wait for a number of seconds
  • Show the Hint shape
  • Apply an effect (I used an emphasize effect).

Only two items needed to be defined as parameters: the Hint shape itself (compulsory parameter) and the literal used for the Delay, to make it possible to have a variable delay if wanted. The Parameter dialog box will look like this:

TIP: although both slides 2 and 3 are pausing at 1,5secs (default pausing point), the command ‘Delay Next Actions by…. ‘ will NOT be paused, timer just continues. That behavior is a big advantage for this particular use case!

Advanced Action ArrowAct

It would have been possible to use a simple action in this case, but the advantage of an advanced action was that I could assign it in one workflow to all the arrows on this slide.

What is the purpose of the Continue command? An advanced action will not release the playhead automatically as is possible with a simple action. On slide 2 a Next button has been added, with a timeline starting after the pausing point of the Arrow shapes acting as buttons. Release of the playhead is necessary to make the Next button visible.

Advanced Action DragAct

Although the advantage of being able to assign the advanced action at once to all the object actions doesn’t exist (could have used a simple action), it was so easy to create a duplicate of the first action that I kept with an advanced action/

It has been assigned to the 4 possible Object Actions in that dialog box, which you find in the Properties panel for the Drop target, under the Format tab. 'Object Actions'.

Hotspots in non-VR project? Workflow 1

Why?

This is not a blog post for intermediate or advanced users. Since CP2019 is released, with the hotspots for 360 images and videos in a VR project or a normal project, I see the same question appearing regularly: why cannot we have that feature for a 2D image? Hence my idea to offer you some possible workflows with a step-by-step explanation and a free downloadable project file. This first post shows a project where the functionality of VR hotspots is being duplicated as close as possible:

  • When user clicks a hotspot, text, image and/or audio will appear, and automatically disappear after a specified time (here you can also use video, which is not possible in a VR project)
  • The hotspots get a checkmark after having been clicked.

However only the status ‘Exploratory’ is used, not the ‘Guided’ status. I would be able to reproduce that as well, but the workflow will be more complicated.

Example movie

Watch the result in this movie with 3 slides. After the title slide you’ll see the hotspot slide. The last slide lists up the steps explained below, if you want to create the workflow from scratch. I will also offer you the project file, you can also copy/paste the hotspot slide to your project, thus allowing to skip some steps.

Copy/Paste Slide

You can download the project file (created in version 11.0.1.266) from this link.

You can copy/paste the hotspot slide (slide 2) to your project. Replace the image. You can edit the design of the hotspots (names start with HS_), change the content of the states in the Multistate object labeled SS_Info.

Have a look at the Library, folder Shared Actions. You’ll see that it has been used 6 times, once for each hotspot. If you change names of the states in the multistate object, you will have to edit that parameter. Same for the duration. The other parameters are always the same for each hotspot: the name of the multistate object and its Normal state.

Steps, from scratch

Create hotspot

I used a shape button as hotspot. It has several advantages over the older type of buttons. You can choose any shape or create a custom shape (here I used just a circle), you can fil it with any color from your Theme Colors as solid color or in a gradient (I used a gradient) or even fill the shape with any image. Moreover you can type text in the shape. I kept the hotspot very simple: just a question mark. But you can replace the text or the fill as you like. It is important that the shape button – hotspot has at least two InBuilt states: the Normal and the Visited state. You could also use the Rollover and Down state, which I deleted in the example file/movie. This is the state panel of the hotspot:

Duplicate hotspot

I labeled the used style as ‘Hotspot’. However, the Visited state is not part of the style (which I regret a lot). For that reason I did duplicate the hotspots (CTRL-D). In the project the names start with HS_.  In the example movie you’ll see 6 hotspots.

Contrary to the hotspots in a VR project, these hotspots have a timeline. I kept the default setup: duration of  3 seconds and pausing at 1.5secs. That pausing point is where where the playhead will pause, exactly like for the hotspots on a VR slide.

Multistate object for popups

I put all the popups in one multistate object which is also a shape: it has 1 state more than the number of hotspots. The Normal state has to be ‘invisible’ by setting the Alpha for Fill = 0 and the stroke width = 0. Each of the following states has the assets for one popup. You will see that I have states with only a text container (background in any color, partially transparent), but some have also an image, audio and one even has an event video (which is not possible on a 3D slide).  You can choose any location, it is not locked to the Normal state location. In the example file, the Object states for this shape looks like this:

Import Shared Action ‘HotspotWorkflow1’

Use File, Import, External Library and open the file you downloaded. Find this shared action in the floating Library panel which will be opened. Drag that action to the Library of your project in the folder Shared Actions. More info about external libraries in this post.

Add shared action to hotspots

Select a hotspot. In the Actions tab of its Properties panel, for the Success action choose ‘Execute Shared Action’. Click on the tiny button {p} to define the parameters which are:

  • Multistate object with the popups (labeled SS_Info) in my example file. That parameter is the same for all hotspots.
  • State: having the info to pop up for that particular hotspot
  • Time you want to leave the popup on screen, can be different for each hotspot
  • Normal state of the multistate object, is same for all hotspots.

Here is one example screenshot for the hotspot referring to the Virtual Reality project:

Conclusion

Maybe you’ll already feel that this workflow could be optimized. I would prefer to give the learner control over the time he needs to watch the popups by adding a close button. Or maybe cover up the distracting background in a lightbox style? What about the next button only appearing when all hotspots have been clicked? Or a warning if not every hotspot has been visited when the learner clicks the Next button? Lot more workflows are possible, let me know which one you would prefer?