Tips: adding Audio to QSP-slides (ready-to-go slides)

Intro

In some previous blogs I have warned to be careful with using the Switch to Destination Theme feature, have demonstrated an alternate but safer workflow to embed ready-to-go slides in a course with a custom theme. Because the themes in the responsive and non-responsive Quick Start Projects are not identical, I added a third post explaining the possible issues in the responsive version. That last post offers a free table with the names of all the master slides (including the most recent Alliance project).  It is an important resource if you want to avoid issues when embedding a ready-to-go slide. Issues occur when your present custom theme and the theme of the embedded slide have identically named master slides.

Only two QSP projects have audio in the Library: Rhapsody and Wired. The clips are used on the Podcast slide, triggered with the Play Audio command. As you all know, adding good Narration (VO) to an eLearning course will enhance the efficiency of that course considerably. Designers of the QSP’s have taken care of an easy replacement of graphical assets for you, but if you want to add narration or other audio to the course, you get no help.  This post will try to help you with some tips. It will not handle the creation of the audio clips, whether you use the TTS feature or a real audio recording. Only tips to avoid frustration when adding audio to the slides. Since the Closed Captioning feature of Captivate is limited to slide audio, the post will not explain how to add other types of audio. At the end you’ll find some more links which could help you in that case.

Adding audio clip

My usual workflow for inserting an audio clip as slide audio is:
  • Import the audio clips to the project Library
  • Drag the audio clip to the timeline of the slide (or to the stage, be careful not to drag to an object on the stage). Originally the slide timeline on most QSP slides is 3 seconds. If the audio clip is longer, a dialog box will appear. Choose the first option to extend the slide timeline.
  • Audio timeline appears below the slide timeline. I will increase the slide timeline duration manually bit more, so that I’m able to move the audio clip to leave a small gap before and after the audio.
  • You see in previous screenshot that all the object timelines have been extended automatically.  Reason is that most - but not all  - slides in the QSP are timed for the 'Rest of the Slide'. Check Timing Properties. Have also a look at Tip 1 below.

  • Test the audio, not by using Play Slide but by using a real Preview. This means for a non-responsive project that you need to use F11, Preview HTML5 in Browser. For responsive projects any Preview is fine. The three following tips are meant to fix problems detected during previewing.

Tip 1: Fix when objects disappear

In many slides, objects are timed for the Rest of the slide. Result: when the slide duration is increased to fit the audio clip, all object timelines will follow that example. However there are some exceptions, as seen in this screenshot:

In this slide (12 from Aspire) some objects have a timeline keeping the original duration of 3secs. When playing that slide in Preview, those objects will disappear after 3 seconds.

How to fix?

Select those objects which are not correctly timed. This can be done by clicking their timelines in combination with CTRL (or SHIFT for sequential timelines) key. TUsing the shortcut key ‘CTRL-E’ will change their timing to ‘Rest of Slide’. You can use the Timing properties of course.

Tip 2: Pause commands on slide events

Many slides in the Aspire project have the setup as shown in this screenshot.

This setup will prevent the audio clip on the slide from playing because the Pause command on the first frame will pause also slide a udio.

You have to take out that pause. You can safely replace it by ‘No action’ which is the default setting both for On Enter and On Exit slide events Result will be that the slide will not be paused, but the playhead will move seamlessly to the next slide when the audio has finished. That is IMO the most logical situation. If you want to mimick a presentation, where each slide is paused at the end and needs learner intervention, you can change the On Exit action to ‘Pause’ or add a button ‘Next’ to pause the slide. However do not forget that this may not be the best practice.

Many slides in the other QSP projects have set the On Exit event to Pause, to imitate  a Powerpoint presentation.  It is a personal liking, of course, but I prefer largely to have the playhead proceed to the next slide without learner action. If you share that idea, just take out the Pause for the On Exit event.

Tip 3: Pausing points

Contrary to the Pause command (see tip 2) a pausing point will not pause slide audio, although the playhead will be paused and so will all graphics assets/effects which are running or appear later.  By default, all pausing points will be set to occur at 1.5secs, either on the slide (for Quiz slides and Drag&Drop), or after the start of the interactive object timeline.

In most cases the increase of the slide duration due to inserting an audio clip will not cause problems, when the pausing point is due to an interactive object like a button. Reason is that the button will often trigger an action jumping to another slide, or revealing some content. The frames after the pausing point (inactive part) are not important in that case.

Possible issues can occur on quiz slides, if you insert an audio clip.  Here is an example (T/F slide 23 in Alliance):

You see the pausing point on the slide timeline at 1.5secs. Some smart shapes are not timed for the rest of the project (see Tip 1). However since the slide is paused at 1.5secs, before the end of those shape timelines, you’ll not be bothered by that while the audio continues playing (not paused). However, if while testing that slide, you have to wait a long time after the Submit process, and you see the shapes disappearing, that is due to the Actions setup in Quiz Properties. They were set in this slide as shown here:

Both actions are set to ‘Continue’, which means that the playhead is released. It will have to move through all frames after the pausing point (inactive part), and only moves to the next quiz slide after reaching the last frame. Not exactly what you want. Two possible fixes:

Fix 1: 

As is the case for other quiz slides in the QSP projects, replace the action ‘Continue’ by ‘Go to Next Slide’. You don’t have to bother about the wrongly timed smart shapes in that case.

Fix 2: 

Move the pausing point on the quiz slide with the mouse (not possible in Timing properties) to place it near the end of the slide. In that case you have to extend the smart shape timelines as explained in Tip 1. This workflow is recommended over the first fix,  if you expect slow connections with the LMS.

Similar problems can occur on Drag&Drop slides but will not expand on that. Know however that the pausing point is not visible on D&D slides in the Timeline panel as is the case for quiz slides.

Some links

If you are want some more information about the tips explained above. Not surprising, they all link to understanding the Timeline (priority 1 for each Captivate user). Maybe this blog (one of a sequence about the Timeline) can help you:

Pausing Captivate’s Timeline

For quiz slides, the Submit Process is explained in detail in this post:

Submit Process

If you want to add audio clips from another type than slide audio:

Pausing Timeline and Audio

Edit SVG in Captivate 11.5

Intro

If you have read my first blog about this major update, you will know that the extended functionality of SVG’s for use as buttons is one of my favorites. I didn' t mention that you get some editing features within Captivate. Thisat means that you don’t have to do a roundtripping with Illustrator (or use another vector editing application) if you just want to change some colors. This post is meant for those who are rather new to vector images, and the way paths are used.  Next post will be about roundtripping with Illustrator for more complicated editing.

You may also ignore that the new Assets Panel (wait for an in-depth exploration in the near future) includes a set of ‘icons’ which are SVG’s. The hotspots used in 360 slides are SVG's as well, the editing functionality was added to make customizing their colors possible. All SVG’s in your project end up in a dedicated folder of the project Library.

Remember: SVG used as button is only possible for HTML5 output, not for SWF output

.

Example slide

The example uses only included  assets from the Assets panel, to be found in the Audio and Icons part. All icons have edited colors (not meant as a design example) to illustrate the workflow I will explain in this post (and later on in an interactive video). The biggest SVG in the center of the slide is configured as a button. You can click it as many times as you want, you’ll be able to listen to some of the audio assets. There is no poster image in this example, just the default Play button.



Step-by-step ‘Edit colors’

I will explain this for the Normal state of the big SVG which you clicked in the example slide.

1. Insert SVG and resize

As I explained in the intro, this SVG is one of the Icons in the new Assets panel. Insert it from that panel (name ‘Cover’). You can resize either by using the Options tab of the Properties panel for the SVG, or by dragging a corner with the mouse while keepoing SHIFT pressed to preserve the width-height Ratio. Since this is a vector image, you’ll see that it remains crisp even when enlarged considerably.  The original icon uses a uniform dark grey. I check the option to use it as a button, and uncheck the option to make the whole bounding box clickable (Enable Click in Bounding box). You can see that the bounding box extends above the image. There is an option to ‘Fit to Bounding box’ but it would have distorted the SVG.

Step 2: Edit mode

To enter edit mode for the SVG double click the SVG. You find the tooltip when hovering over the Fill in the Properties panel. Do not use the button ‘Edit SVG’, which would let you choose an editing application on your system, nor the option Edit with Illustrator.

Step 3: Select a ‘path’

A vector image is composed mostly from several paths, which can have a width (may be variable) and/or a Fill. The image I used as example has 3 paths, all closed and with a fill. You select a path by clicking it. Selected path will have a blue surrounding line as you can see in this screenshot:

Step 4: change color

Click the Fill icon in the Properties panel to open the Color dialog box. For this simple demo slide I used the color wheel to select a color. In a normal project I would have used the Theme Colors palette of course. Click OK to confirm the color change. Repeat that workflow to the remaining shapes.

SVG button states

When you convert a SVG to a button, the InBuilt states Rollover and Down are added automatically. You can use the edit workflow described above for each of those states. I added also the Visited state (with a speech bubble) and the custom state ‘Done’ which appears after you have listened to the 5 available audio clips. Here is the Object state panel of the big SVG button:

The Visited state is selected in this screenshot. Look at the Properties panel: you see that the opacity is reduced to 50%. This always applies to the full SVG, but in this case only to this state of course. You see a user variable inserted in the added speech bubble. That bubble has no reduced opacity, it is not part of the original SVG but an added shape£.

More?

Main topic is finished, you may stop reading if you want. But for the curious fans,  the audio clips are attached to a state in a second multistate object, which is a shape to which I added an icon in the Normal state (no audio) and an audio clip with its name to the other states.

The Advanced action triggered by the big SVG buttone:

No need to trigger the Visited state, it appears automatically after the first click on the SVG button.

Audio in Learning Interactions

Why?

A question posted recently pushed me at creating this short post: “....a way to stop the main slide audio when a tab on the interaction is clicked”. I pointed to an older blog where you can find some tips for using learning interactions. It offers a table, tells about their limitations etc. I want to explain why there is no simple solution for this question at all. The audio referred to in the question was slide audio, the used Learning interaction was Tabs. What I explain is also valid for Accordion and Timeline. As I explained in the mentioned blog post, the term ‘Learning Interactions’ was introduced to distinguish the widgets compatible with HTML5 output from the older ‘widgets’ which were created for SWF output. Both have however the same extension ‘wdgt’ and are sometimes both indicated as widget. Terminology can be confusing

Static and Interactive

It seems logical that Learning Interactions are interactive, because they allow the learner to click and interact, and they are listed under the Interactions big button. Indeed, they all have some of interactions internally. However not all are also ‘Interactive object’ in Capativate’s timeline. A Captivate interactive object can be recognized this way:

  • It has an Actions tab
  • Under the Actions tab you find up to two events (Success, Last Attempt)
  • A pausing point is automatically inserted at 1.5secs.

You know the common interactive objects: button, shape converted to button, Text Entry Box, click box. For those objects you’ll see the pausing point immediately on the slide timeline. Moreover the object timeline, when not selected will be green. Look at this screenshot, where I kept the original generic names to clarify the type of objects.

Learning Interactions are internally interactive but as objects in Captivate they also come in the two flavors: static and interactive. You can recognize them by the presence of the Actions tab, with the possibility of scoring and reporting. However the score in the game interactions are not linked with the game results (see article)

Interactive interactions can also be identified, based on the generic name in the Timeline panel. In this screenshot I have inserted two interactions: Tabs (static) and Jigsaw Puzzle (interactive). Look at the generic names:

Look carefully at this screenshot: you see that both interactions also have a colored timeline, but exactly the opposite of what you expect. Please, support me by logging this bug. You may also wonder about the presence of a pausing point? No pausing point for the interactions? The static interaction has indeed no pausing point, you need to add an interactive object like a button, to keep the slide paused. That is needed to allow time for the learner to explore the interaction. However the Interactive Interaction doesn have a pausing point which is not showing in the Timeline panel, you’ll find it in the Timing properties.

Audio Problem

The question was about avoiding having slide audio still playing when the user clicks one of the buttons in the Tabs interaction. That interaction allows  to add audio to a button, which is object audio.  Only object audio allows simultaneously playing of multiple audio clips, either from object audio or, in this case, slide audio. Pausing the slide audio, when a button is clicked in the Interaction would need access to the source code of the widget, which is not available. I can only propose two possible solution to avoid hearing two audio clips at the same time.  I will only explain the first solution in this article. The second solution, with a custom interaction will be explained in a later article.

Interaction available after Slide Audio

This is the easiest workflow. The learner would not be able to use the Interaction while the slide audio is playing. With a normal interactive object that would be easy: disable it for a certain time with and On Enter action for the slide and enable after a certain time corresponding with the audio length. However, even an Interactive Interaction cannot be disabled! You need a workaround.

Steps:

  1. Create a static image of the interaction, either using Captivate or another screen capture app like Snagit. Quality should be good to excellent.
  2. Resize that image to the exact size of the Interaction.
  3. Insert the image on the Timeline and time it for the duration of the slide audio.
  4. Move the learning interaction to appear just after the image.
  5. For a static interaction (like Tabs, Accordion….) you need to insert a button or click box to pause the slide. That is not necessary for an interactive Interaction.

Have a look at this screenshot of the Timeline, which illustrates the described steps:

The timelines from bottom to top:
  • Slide audio, about 3,5secs long
  • Tabs Interaction, starts at 3,4 seconds, extends till end of the slide
  • Image of the Tabs interaction, same location and size, starts from the first frame and ends at 3,8secs; overlap with the Interaction is meant to avoid seeing the transition
  • Click box – duration of the slide –  to pause the slide at its end; it could be a Next button as well.

Custom Interaction

Using shared actions, multistate objects, it is perfectly possible to recreate this interaction on a slide. At that moment you have full control over all objects. To avoid multiple audio clips playing at once, the easiest way is to use only audio started with ‘Play Audio’ command.  If you start a second audio with that command, the first one will be stopped automatically. For this example:

  1. Use Play Audio with the On Enter event to replace the slide audio.  That is possible if you don’t need Closed Captioning.
  2. Use Play Audio in the actions triggered by the Tabs buttons. Clicking the button will automatically stop the previous audio, whether it is the audio started On Enter, or the Audio started with another Tabs button. Object audio would also be possible, if you use the command ‘Stop Triggered Audio’ to stop the first audio clip started On Enter.

Do you want to see the setup for such a custom interaction? Post a comment, please.

Playtime with Audio and Widgets

Intro

Holiday time means playtime, travelling to me. For personal reasons not travel for me this year. So thought it a good idea to offer you some information and fun about a small country that I visited several times being the home country of my husband. In this text I will not try to explain everything. If you want explanations about some of the techniques I have been using, please post a comment. Just know that I used of course Captivate but also enjoyed the roundtrip functionalities with Audition and Photoshop in the eLearning Suite 2.5 extensively. 

In several previous articles I have been using widgets that are included with Captivate. Those were all static widgets. But recently two great widgets were published by friends, and I had a lot of fun including them in this movie.

Since months I planned to offer some tips about audio, will try to keep them really simple (KISS) and as promised without long texts.

Playtime

Watch this movie and try to have a high score playing with the widgets described further. You'll need some patience, due to the many audio clips it is bigger than the files I normally add to these posts. You can also download it if you want.

Widgets

I used two widgets, one is an interactive widget and the other is a question widget. This means that both can be (and were) used to include scores in a quiz. Here is a short description of the widgets and of course a link to the sites where you can find them. Highly recommendable, both of them!

Drag and Drop Interactive Widget 
This interactive widget was released by InfoSemantics (by Rod and Tristan Ward) and can be found here: Drag and Drop Interactive Widget. Rod explains very well the functionalities of an interactive widget and offers also a comparison with their previously released Drag and Drop Lite Question Widget. Of course, I used Advanced actions to construct the Question slides created with this recent widget. Let me know if you want me to explain those actions in a more elaborate article. I love this widget for its great range of functionalities, especially in combination with advanced actions.

Jumbled Word Widget
This question widget was released by another Captivate-friend, Yves Riel (Flash-Factor) and can be found here: Jumbled Word Widget. Because it is a question widget, it takes over all functionalities of question slides. Just one example: here I used Captivate 5.5 and the new Review feature is automatically attached to the slide with the question widget. No need for advanced actions to add scores to the Quiz in this case. But of course you also get the limitations of question slides : no way to have a partial score (as I created with the other widget for dragging the names to the map). I love this widget for its great design and it confirmed what I suspected since a while: Yves is a perfectionist!

Audio

A lot of audio was used in this movie: background (drums music), slide audio (some of the Voice overs are attached as slide audio) but the most powerful way to add/control audio is using object audio. Some reasons with examples:
  • Object audio allows you to have more than one audio clip playing simultaneously without having to create a multi-track audio file. 
    Example: slide 8 with the rollover slidelets; each slidelet has two audio clips, the first is attached to the image, and the second (Voice over) is attached to the Text Caption that appears later. This allowed also to fade out the first music clip, without effect on the Voice over.

  • You can manipulate object audio by (advanced) actions: hiding the object results in the audio not playing, showing the object plays the audio. If you want an audio to play only the first time that a slide is visited, this is a solution: attach the audio to an object that is visible to Captivate but not to the user. To myself I call those audio clips "audio objects".
    Example: the question slides constructed with the widgets have a Voice over that plays when the user takes the quiz, but not when he is reviewing the quiz. Moreover some question slides have a music clip as well, that will only play during the Quiz time, but not when reviewing. This was realized by attaching each music clip (VO and music) to a rectangle with a stroke width of 0 and a Fill with Alpha=0, thus making it invisible to the user. With an advanced action I hide those rectangles when reviewing, resulting in not playing nor the VO nor the music.

  • Same technique can be used to play another music clip in different situations.
    Example: I did not imply it in the movie because it was already very heavy, but this can be used to replace the Text Captions (Review Messages) in the Question slides created with the Drag and Drop Interactive Widget by Voice overs, or to add a Voice Over to those text captions.

I do feel that you have more questions, but I promised a no-text-heavy post this time. If you want me to explain something more in depth, please post a comment.

Have fun!