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

Graded Surveys (Radiobuttons Interaction)

Intro

Several years ago I created a blog about a Graded Survey, which still attracts viewers regularly. Some visitors complain that the embedded example is SWF.  You may underestimate the amount of work which is needed for that type of blogs which are all offered for free. Impossible for me to convert all blogs to the present versions and for HTML5 output.

However yesterday a user asked another similar question on the forums. You can visit the thread here

The title doesn’t really reflect the full question, which was clarified later on. User wants to have survey slides, which each have two statements. The learner should rate each statement with a number between 0 and 10, and the sum of both ratings should always be 10. As usual I have a dislike for the word ‘force’ used in the title. The example you will be watching, is not forcing really. I considered three possible situations:

  1. Two ratings have a sum of 10, rating is accepted immediately.
  2. Sum of the two ratings is not equal to 10. In that case the second rating will be edited to achieve a sum of 10. Learner can accept this change or if he prefers:
  3. Learner gets the opportunity to retry to set correct ratings.

Contrary to my old blog post, where I used a MCQ, for this solution used the Radiobuttons interaction. Likert question was not possible, since I needed a rating scale with 11 dvisions (0-10). Moreover Likert is not supported for responsive projects. Although the example is a non-responsive project, the described workflow would also be possible for responsive projects (some changes needed)..

Example File

Watch this example.  You’ll see three survey slides after the title slide. Each survey slide has two statements with a rating scale. After finishing the survey slides, you’ll see the X_Score and Y_Score on a results slide. You can open the example from this link or watch the embedded movie with a fixed resolution:

Setup

Due to this specific setup, extending the survey to more than 3 survey slides is very easy.  Just duplicate a survey slide and edit the statements. Everything will work fine. I will explain the objects using the timeline, the user variables to be created and the advanced actions.

Timeline Survey slide

Have a look at the screenshot of the timeline of the FIRST survey slide:

From bottom to top you see:
  • Two statements, labeled SS_XStatement, and SS_YStatement. I didn't create a dedicated master slide with two placeholders for these statements, but that would be possible. Labeling of those statements is not so important, because they are not used in any action.

  • Two instances of the RadioButtons Learning Interaction, used as rating scales. Please don't be confused by their green colored timeline, because these interactions are not interactive, they are static. This is a design bug. The properties of one interaction can be seen in this screenshot:
    Important fields are marked in Red or Green. Beware: you have to create the variable - here ‘v_X‘ i- n the Variables dialog box.

  • Question1: text above the statements with the warning about the sum (could also be a placeholder on the master slide)

  • Submit button: needs to be a shape button, because it has to be timed for the rest of the project. Eventually you can use a SVG or bitmap image (from 11.5 on). Both can also be timed for the rest of the project.

  • A group Gr_Feedback, including the Accept button, Retry button and the Message which appears when the sum of the rates is not equal to 10.  This group is also timed for the rest of the project, which means that both buttons need to be shape buttons, SVG or bitmap images.

Variables

The use variables to be created are:
  • v_null: empty variable is used to clear the associated variables to the learning interactions. More details about its functionality in this blog

  • v_start: will store the first frame of each survey slide. For the Retry action, the micro-navigation solution described in Replay Slide (scenario 2) is used, hence the necessity of the variable which can be empty as default value. This variable is reused on each survey slide.

  • v_X: variable associated with the rating scale (interaction) of the first statement, default can be empty. This variable is reused on each survey slide. Default value can be empty.

  • v_Y: variable associated with the rating scale (interaction) of the second statement, default can be empty. This variable is reused on each survey slide. Default value can remain empty.

  • v_sum: will be calculated by adding v_Y to v_X. Default value can be empty.

  • v_XScore: will be calculated after each survey slide, by adding the value of v_X. Default value can be empty.

  • v_YScore: will be calculated after each survey slide, by adding the value of v_Y. Default value can be empty.

Actions/events

EnterAct

This action is assigned to the On Enter event of all the Survey slides. It is meant to reset everything as is visble  in this screenshot:

The frame number of the first frame is stored in v_start, the variables v_X and v_Y are cleared. The group with the Accept button, Retry button and Feedback message is hidden, and the Submit button is shown.

SubmitAct

This action is triggered by the Success event of the Submit button. Because that shape button is timed for the rest of the project, you need only one instance of this two-decision action:

The first decision ‘Always’ is not conditional, calculates the value of v_sum which is used in the condition of the following decision.

Second decision ‘Checkit’ verifies if the sum of the ratings is equal to 10. If that is the case, the ratings for X and Y score can be added to the totals, and navigation to the Next slide is done. If the sum is different from 10, the group (2 buttons + message) shows up. The value of v_Y is corrected (10 – v_Y) which will show immediately on the rating scale. The learner can accept this correction or opt for retaking (Retry) the rating.

AcceptAct

This action is triggered by the Success event of the Accept button. Because that shape button is timed for the rest of the project, you need only one instance of this Standard action:

You see exactly the same commands as for the THEN part of the SubmitAct.

RetryAct

This action is triggered by the Success event of the Retry button. Because that shape button is timed for the rest of the project, you need only one instance of this action:

As described before, I use a Replay action with re-entering the slide to reset the survey slide for a new attempt. Although it has only one command, it is necessary to create an advanced (or shared action) because the command ‘Expression’  is not available as simple action.

EnterResults

This action is assigned to the On Enter event of the Results slide. It is necessary to get rid of the objects displayed for the rest of the project:

Conclusion

Hope you liked this solution? For a responsive project with fluid boxes, the workflow will be more cumbersome, not only because of the Fluid Boxes setup but also because:

  • You cannot use grouping in fluid boxes.
  • The possibility to have objects timed for the rest of the project is limited. It is possible if the slides are based on the same master slide, which could be the case for the survey slides.

Could I have used Shared actions? Of course,  I dragged the Replay action from my external library with Shared actions bit for your convenience converted it to an Advanced action. The other actions can be converted to shared actions as well. However withthe described setup, the advanced actions are used only once. If you have issues with the timing for the rest of the project in a Fluid Boxes project, I would certainly recommend to use shared actions because you’ll need an instance on each survey slide.

Embed responsive QSP slides (Ready-to-go slides)

Intro

My two previous posts about QSP slides, the focus was on non-responsive projects:

All QSP projects have also a responsive version, created with the Fluid Boxes workflow. To embed such a slide, you'll  an extra difficulty: how will the fluid boxes – both on master slides and slides – behave?  In this blog that extra problem is discussed, including tips to avoid problems. Supposed is that you have read the two previous articles – for the basic knowledge. First recommendation ‘NEVER’ use the switch to Destination theme for a Fluid Boxes project when inserting a QSP slide in a custom responsive project.

Master slides – Tips

All responsive QSP projects have a bunch of master slides. Those master slides have fluid boxes setup.  Setup can be totally different from the non-responsive projects with the same name. Look at the 'Wired' projects: lot of master slides in the responsive version, no master slides except the necessary 6 in the non-responsive version. As you may have deducted from my previous posts,  the NAME of the master slide used for an embedded QSP slide is very important. If the same name has been used in the receiving (destination) project, extra care is needed. For your use I have created a table comparing Master slide names used in the 5 available QSPs (at this moment: September 2019).  You can download the pdf (was quite a lot of work to create it, please show respect for the protection built in).

QSP MasterSlides

In the table some cells are identified in a special way:

  • If the same master slide name is used twice in the QSP, both numbers  are in the same cell, red font on  a grey background. This is a very worrying situation, not sure why the developers did use dual names.

  • Some master slide names appear in several QSPs. If they are identical they are bolded and red for the projects where it is the case. Italic names point to master slides similar to others, but with a slightly different name.

I didn’t include the quizzing master slides. They rarely have been edited a lot (except for the Results slide) and follow the rules I explained in this older post ‘Quiz Slides and Fluid Boxes‘. You could extend the table with the master slide names in your project if you try to embed QSP slides in a company project with an existing theme.

Even master slides with same name, can have a totally different Fluid Boxes setup. The Master slide 'Objectives' is present in 3 QSPs. Have a look at the fluid boxes setup for this Master slides in the projects Aspire, League and Wired.

Aspire's master slide, as you can see, has a rather simple Fluid Boxes setup. The slide ‘Course Objectives’ which is based on this master slide didn’t add supplementary fluid boxes.  That is the case for most slides in the QSPs, only using the Fluid Boxes defined on the master slide. The slide provides 4 topics (Objectives) all in one Fluid Box to the left.

In this master slide of the 'League' project, a lot more Fluid Boxes have been defined. In the screenshot the boxes FB_956 and FB_957 have been collapsed. Their setup is similar to the one shown under FB_955. This master slide provides 3 topics, each in its Fluid Box. As with the Aspire project, the Slide ‘Objectives’, based on this master slide, doesn’t have extra Fluid boxes.

The 'Wired' master slide has the most complicated setup. It is impossible to show the full setup for this master slides. The collapsed FB’s at the bottom each have 5 vertical fluid boxes. No extra FB’s wer added n the slide ‘Objective’. Aspire had 4 topcis (in 1 FB), League had 3 in an individual FB, but Wired has 5 topics. .

You can imagine what happens when you switch from source to destination theme for an inserted slide where both themes use a master slide with an identical name. Have a look at the mess in this example. After inserting the described master slide from the Aspire project, I applied the Wired theme to it. Result, without any warning:

Not only are the objectives not getting into the appropriate FB, the green topics text is not in a Fluid box at all. You will have to move them manually into fluid boxes, and probably delete a lot of (empty) fluid boxes. That is cumbersome work, especially since the FBs are defined on the master slide. That means they cannot be deleted on the slide itself..

Conclusion

For responsive project to brand embedded QSP slide, please follow the step-by-step plan to add a fitting Master slide to the project theme, as described in ‘Embed QSP slides‘. Double-check the name of the Master slide, if it is an existent name in your project, first edit that name in the  QSP theme. That way you will avoid a disaster like I showed above with master slides using the same name.

Feel free to use the pdf I provided with an overview of master slide names for the present responsive QSPs. Beware: there may still be typos, please report them.

How to embed QSP-slides (Ready-to-go slides) in your course?

Intro

Recently I posted this article about ‘Destination/Source Theme’  I warned for using the switch button to the Destination theme after insertion of a QSP slide.  Logically you expect now an alternative workflow?  A general scheme for both responsive and non-responsive projects is however not possible. Reason: the present QSPs have a beautiful design but the technical setup is very different, no rules. 

I will try to offer some tips here to make it possible to blend the inserted QSP-slides into your project design which is probably based on a custom theme. Due to the big variation in technical setup, this first post will be limited to:

  • non-responsive projects
  • Quick Start projects which use master slides in a consistent way

The second condition excludes the project Wired which only uses the Blank master slide.

In a future post I will try to offer similar tips for responsive (Fluid Boxes) QSP-projects

Start situation

The workflow with its screenshots is based on insertion of one QSP slide from the project Aspire.  The receiving project is the DemoProject I mentioned in the previous blog post. Both projects have rather different color palettes:

The DemoProject uses three fonts: Termina, Filson Soft and Trebuchet (rarely), whereas the Aspire project only uses Tahoma.

The inserted slide was the Exit slide of the Aspire project was inserted in the DemoProject as you can see in the screenshot. It really needs branding. If you want to follow along, you can add that Exit slide to one of your projects.

Branding workflow step-by-step

Step 1: Master slide

Open the Master slide panel with the inserted Aspire slide ‘Exit Layout’ selected. You will see all the master slides of the Aspire project, but the used master slide is automatically selected. You see that it is labeled ‘Welcome w/o Sub + CONTENT’. Have a close look at that master slide and its components on the Timeline:

You see from bottom to top: an image placeholder,  a Title (shape) placeholder, a caption placeholder and another shape placeholder meant for a shape button.  Sorry, but the styles used in the master slide are mostly overridden styles, and replaced by other styles on the slide itself. Just for your information, don’t bother about it.

Step 2 Copy master slide

You will copy and paste that master slide to the original course theme (DemoProject) using these steps:

  • Use right-click menu (or Edit menu) to copy the selected Aspire master slide described above.
  • Return to the Filmstrip
  • Select any slide from the original project
  • Open the master slide panel again, it will refresh and show the master slides of your project (here the DemoProject).
  • Paste the copied master slide from the Aspire master slide panel.

The result in this case is visible on this part of the master slide panel. The new master slide is still selected, and kept its original name. This was possible because that name didn’t exist in the DemoProject theme (more about importance of master slide names in next blog . If the same name exists in the receiving (Destination) project, you need to rename the master slide before the copy/paste

Of course the object styles are not what you want. In the screenshot above, the Title shape placeholder is selected, and you see that the style was overridden (+ sign). If that had not been the case, the Default Title Smart Shape style of the DemoProject would have been applied automatically. Another example of the lack of rules for the QSPs

Step 3: Replace styles

Still on the master slides, apply styles for the original project DemoProject theme to the objects. In this case:

  • There is  a Default Title Smartshape Style in the DemoProject theme, needed only to use ‘Reset Style’ for the title. Because the style was centered, changed it to left-aligned but the font (Termina) and the color were applied automatically.
    You see a + sign, because after resetting the style I added the alignment change, didn’t create a new style for this alignment change. It will only be used on the inserted slide, all other titles in the original project are centered.
  • Same workflow is used for the caption, since a Default Caption style exists (Filson Pro and light color)
  • For the shape button placeholder, another shape button style was chosen from the DemoProject theme.

Step 4: Apply Master slide

Open the Filmstrip, and select the inserted Aspire slide. In the Properties panel choose the theme DemoProject and the list with master slides will appear. Choose the ‘Welcome w:o sub…..’ master slide and you should get this result:

You see some remaining problems: the placeholder for the shape button was not used in the QSP, probably deleted and replaced by another button. Either you edit that original button or you keep the placeholder button.

The background has of course not changed. You may need a last step:

Step 5: Final touch

Two more tasks need to be done to have a fully branded slide fitting in your project design:

  1. Replace the image. Changing the Hue with the Edit Image features could work in some situations, but not for an image with a blue sky. Of course, editing in Photoshop while masking the sky is possible.

  2. Replace the blueish gradient at the bottom. It is not a gradient created in Captivate but another image. However it could be possible to use Edit Image, and move the Hue slider for this gradient.

Conclusion?

This workflow may seem cumbersome, but it is safe contrary to the switch to Destination theme.  It is only one example slide, of course. Just hoping you would try this out. It may even lead to improving practice for your custom themes.

Warning! Source/Destination Theme switch?

Intro

Since the release of 11.5 I have written a blog post about Theme enhancements , another one with Tips for the Assets panel, and one for the use of QSP projects.  About the Copy/Paste Appearance I have warned that this can be a great feature in some situations (states, temporary testing, use for text styles) but should never replace Object Styles if you are or professional eLearning developer. Why do I mention this post? You’ll find a similar warning in this blog about using the  switch to destination theme, when inserting (QSP) slides from a project whiif that new slide is inserted after a slide with another theme:

In the screepnshot you’ll see the button which appears in the Timeline under the inserted slide. Default setting is to keep the Source Theme which is the theme used in the project from which you inserted the slide (in this case from the QSP ‘Wired’, non-responsive). For consistent projectt design, it is tempting to switch immediately to the Destination theme which is the main theme of your project (provided you had a one-theme project before inserting the slide).  Believe me: do NOT switch without preparation because the result can be disastrous. I have seen this happening with trainees, and in a webinar presented by Adobe.

This post is meant to give you some insight in the reasons for my warning. I may refer to older posts about themes, which is a topic that is not popular probably because the Theme impact on courses is largely underrated. Too often, when asking on social media about the used theme, I get the answer 'I do not use a theme', something which is impossible!

Let us start with a summary of what happens when you click the option ‘Use Destination Theme’.

Result of switching to Destination theme

All components of a theme can be switched without any warning. Here is an overview:

Theme Colors

Each theme has its theme colors palette. Recently I wrote about using Adobe Capture or Adobe Color to start such a palette, which will mostly be based on the stylesheet of the company. In a well-designed project only colors from that palette are used: 10 main colors + 50 tints. When switching a palette, you have no control over the mapping of the colors. For the present situation this means that  color 1 of the source palette will be replaced by color 1 of the destination palette, etc. That can already lead to strange results, because not every palette keeps dark and light colors in specific locations.  Here is an illustration of two totally different palettes. The first is in my test the destination palette, second the source palette of a QSP theme: can you guess  what happens when the colors are switched?

No Usage button is available for colors - too bad.  After the theme switch you’ll have to manually edit if the colors are not appropriate. If it was possible to map colors between the palettes this would be easier: I could tell that the first color of the source theme had to be replaced by the third color of the destination theme, that color 4 was OK to be replaced by color 4 etc. One of my feature requests.

Theme fonts

Situations is similar.. In most cases you will see three fonts in the Theme Properties. Some QSP’s use the same font for all text whatever the style. If your destination theme uses 3 fonts and the inserted QSP slide uses ony one font, all the text styles after switching to destination theme will be replaced by the first font in your original project theme. This image explains what I mean: the source theme in Wired has only Arial as font. When I insert it in my demo theme, which uses three fonts (Trebuchet is the least  used but for some reason appears as font 1), there is no way for Captivate to know to which styles font 2 and 3 need to be applied. Result: all fonts will be Trebuchet. In this case that font was only used in feedback messages, Filson Pro was the main font for all text, Termina for Titles. There is – same as for colors – no way to change the sequence of the fonts. Mapping wouldn’t help here, a Usage button however would be welcome. My demo theme is fully documented, which is not the case for the QSP projects.

Object Styles

Now it is getting tough, because each of the QSP’s has its way of defining styles. Some use default object styles, others don’t use them (do not understand the reason).  Fonts and colors will be replaced as I explained above. But the remaining components of the object styles will only be replaced by the style of the destination theme if  they use the same style name. For the QSP’s that is rarely the case. Typical example is the [Default Title Smartshape Style]. It exists in my test demo theme, it exists in each of the QSP’s but is never used. Result: the existing object styles in the QSP will be added to the styles in the destination theme. If you use a lot of inserted slides, you’ll end up with a very long list of object styles added to the existing styles in the original project theme. Very hard to manage those styles!

Master slides

Similar to the object styles, if a master slide exists with the same name in the destination theme, that master slide will be applied (have seen this happening several times). That can be really catastrophic, especially for responsive projects because the fluid boxes structure of the destination theme will probably be totally different. It is less dramatic for non-responsive projects but could be frustrating as well.

If the master slide has a name which is not available in the destination theme, it will be added to the master slides. Similar to object styles, there are no common design 'laws' for the QSPs.. I can only post some more details for each individual QSP. One example: the responsive ‘Wired’ QSP has a complete set of master slides with fluid boxes, the non-responsive ‘Wired’ doesn’t use any master slide, all slides are based on the blank master slide which is very weird and not at all user friendly.

Skin

Setup of the skin is not affected by destination or source theme. It will be one skin for the project, based on the original theme which you used to start the project. Only theme component you don't have to worry about!

Conclusion

Hope you understand now why I did introduce this post as a warning post.  In most cases I would recommend never to use the opportunity to switch to the destination theme when inserting a slide, unless you know the themes of the source and destination theme in-depth. That is not easy for QSP-slides. I may post more recommendations for a workflow that can avoid most of the problems when trying to embed those slides with respect of your custom styling.

SVGs for color-based quiz

Intro

Being able to use SVG’s, for which you can limit the clickable area to the SVG itself, creates a lot of opportunities. In a recent post I explained how you can use them for a custom Hotspot question. 

This time I played with Flags, in Europe a lot of national flags have a cross embedded. Play with this example file. After the title slide which has some explanation, you have to color 5 knowledge check slides, Have fun. 

Small warning: if you are on a small screen, you may have to insist to color the small parts (especially on the UK slide). The part is really clicked when you have seen it shrink. You can play from this link (scalable HTML) or with the embedded version (fixed size):

Setup

You’ll find details about the setup,with topics:

  • Objects (including timeline)
  • Variables and Events
  • Advanced actions
  • Shared action (has been used 47 times)

Objects – timeline

Have a look at the Timeline of slide 2 which is the first quiz slide (flag 1, Denmark):

From bottom to top you see:

  • SS_Proback1: (smart shape) the white background of the progress bar (bottom left). Since the flags have different amounts of parts, I preferred to have an individual background on each flag slide, whereas
  • SS_Progress: (smart shape) progress bar is timed for the rest of the project. It has a normal state which is invisible (no Alpha nor stroke), and a state for each added green star, totals 18 states but not all states are used on each slide.
  • Gr_Denmark: has all the flag parts, on this slide 5. All parts are SVG’s used as buttons with the default pausing poins at 1.5secs. Each SVG has 3 object states: Normal (with a black pattern), Correct (colored), Wrong (Gray tint). Here is the screenshot with object states for the Cross part of the UK flag:
  • Gr_Colors: group with 5 colors, timed for the rest of the project because same colors are used for all flags. Colors are shape buttons, default pausing point at 1.5s. They have 3 states: Normal, Current and Dimmed. Here a screenshot for the Red smart shape.
  • Country_DK: country name (text)
  • SB_Next: shape button timed for the rest of the project, no pausing point, with 3 InBuilt states (Normal, Rollover, Down)
  • Title

Variables and events

Three user variables are created for the actions:

  • v_color: will store the name of the color chosen from the color shapes; the exact names are needed which are Blue, DarkBlue, Red, White and Yellow.

  • v_counter: will track the number of correct flag parts which have been colored (is equal to the number of stars displayed by the progress bar).

  • v_max: the number of flag parts to be colored. For the first two flag slides this is 5, for the two following slides it is 9 and the last flag slide has 17 parts.

I didn’t provide a replay course button at the end, to limit the number of events and actions. The used events  are:.

  • On Enter slide event for all flag slides. They trigger a similar advanced action, depending on the number of flag parts: 'Enter5' (first two flag slides), 'Enter9' (two following slides) and 'Enter17 'for the UK slide.

  • On Enter slide event for the End slide triggers 'EnterEnd'.

  • Success event for the Color shape buttons trigger a similar advanced action 'Blue_Act', 'DarkBlue_Act', 'Red_Act', 'White_Act' and 'Yellow_Act'.

  • Success event of the SVG’s which are the flag parts (used as buttons), trigger all the same Shared Action 'FlagAct'.
I will explain why I choose for advanced or shared actions for those events.

Actions

Enter5Act/Enter9Act/Enter17Act (advanced actions)

Those very similar actions are triggered On Enter of the flag slides, depending on the number of flag parts. Here is a screenshot of 'Enter9Act':

You see it is mainly a Reset action. Because the color shape buttons are timed for the rest of the project, it is necessary to reset their state to Normal when entering a new slide.  That wouldn’t have been the case if I had repeated the colors on each slide, and left the option ‘Retain state …’ unchecked. However such a setup would have complicated the actions a lot more, than using this advanced action On Enter. The actions for 5 and 17 parts are almost identical, only the value of the variable v_max will change (command marked in red in screenshot). Because of the limited number of actions (3), and the fact that only one command had to be edited,  I prefer duplicate advanced actions over a shared action with multiple parameters.

EnterEnd

This simple action will hide several items which were displayed for the rest of the project and no longer necessary on the Congratulations slide:

Blue_Act, DarkBlue_Act, Red_Act, White_Act, Yellow_Act

These advanced actions are triggered by the success event of the color shape buttons.

The 5 actions are also very similar, here is the screenshot of the Red_Act:

I could have used a shared action, but preferred duplicate advanced actions. Four of the color buttons need their state to be changed to Dimmed, the active clicked button to Current and its color has to be entered as value for v_color.

It is very simple to duplicate the actions for the other colors, and change the first command and switch one dimmed and current state to adapt the action to the new active button.

FlagAct

Shared action triggered by the Success event of the flag parts (SVG used as button). In older versions than 11.5 this setup would not have been possible since many bounding boxes are overlapping. The shared action, which I used 47 times, looks like this:

I indicated the 6 parameters by a color code. Four of them are always the same, but they are compulsory, need to be parameters (Progress bar, Next button, Wrong and Correct states). Only the color and the flag part are important to set up correctly. A good labeling system for the flag parts can help. You may have seen that I took care of labeling in a consistent way.

Conclusion

Hope this example releases your creative ideas for similar use cases, both for adult learners and (of course) kids.  It would be great if you commented about that. Or do you have questions, suggestions?

Fonts in Captivate

Why?

Since the most recent release (11.5) of CP2019 there has been a lot of noise and questions about Fonts in Captivate. You probably heard about the Replace Fonts issues which many users experience (not me, sorry). From those discussions and the multiple times I tried to explain the different fonts possible in Captivate, I concluded to write this short article.  It is not really about the science of font use - Typography - nor about design. Just some down-to-earth explanations, and practical recommendations based on my experiences with clients and their sometimes irrational requests (sorry for that word).

Normal expectation of any designer is that the 'clients' (in this case the learner) will see your course looking totally the same as you see it while developing. Captivate is by default NOT embedding fonts. For that reason you may get in problems, as you'll read here.

Font groups

I don't mean Font Families, but the way fonts are grouped in Captivate.

Have a look at the dropdown list for Character when you are in the edit mode for a text container, caption or shape. You will see that 4 groups are listed up, from top to bottom: 

  1. Theme fonts: new group in version 11.5. If you use only one theme in the project, this group will show the fonts used in that theme, same information as under the Theme Properties. If you have multiple themes in the project, this group will show the fonts for the theme used in the active slide.  You can use this group to switch between the fonts of that particular theme. The active font is highlighted as you can see. Since all fonts of the three other groups can be used in a theme, these fonts do not guarantee that your learners will see them correctly.
  2. Adobe fonts: formerly those fonts were indicated as Typekit fonts. This group may be empty for you, only fonts which you licensed using the CC (Creative Cloud) app, tab Fonts:

    Fonts from this group can be used safely, your learners will see them! When publishing you have to indicate which domains will be added to the license. The number of fonts you can license, and the number of domains, depend on your plan for Adobe Fonts.
  3. Web Safe fonts: a limited group of fonts which are safe to use (my screenshots are on a Windows system):
  4. System fonts: this last group shows all fonts installed on your system. That group will likely include the brand font(s), those who are commonly used for print in your company (or your client's company). Problem with using those fonts is that they will only appear in all circumstances if the learner has the same font installed on her/his system. 

Static vs Dynamic Text

Shapes and captions are labeled 'static' if there is no variable inserted in the text. 

If the project is a non-responsive project, static text containers will be converted to bitmap images. This has positive and negative consequences:

  • Positive is that you can use any font, even a system font without having to embed them. The learner will see an image of the text.
  • Negative: if you publish the project to Scalable HTML output, and the project is upscaled you'll have the usual blurriness which occur for all bitmap images. Moreover if you have a mixture of static and dynamic text containers there will be a visible difference between the two types of containers.

If you have at least one variable (system or user) in a text container it becomes dynamic. This means that the text will not be converted to images but has to be generated on runtime. Typical example is the score slide after a quiz: most system variables on that slide get their value only after the end of the quiz.  What are the pro and contra this time?

  • Positive is that the font will look crisp at all time.
  • Negative: if you use a system font, and that paricular font is not installed on the learner's system, it will be replaced by a generic font (mostly Times New Roman), which looks very unprofessional. 

For responsive, Fluid Boxes project all text will be treated as dynamic text.

Recommendation

Fonts to use

Personally I recommend to avoid System fonts for all courses.  Keep to Adobe fonts or eventually Web safe fonts.

I hear you! How to explain to your manager or client that you cannot use the 'holy' branded fonts in their company style sheet. There may be exceptions, but in most companies those style sheets have been set up for 'printed documents', not for web and certainly not for eLearning. There is a big difference between both: Colors and Fonts are typical examples. This article is not dedicated to colors, but most ignore that CMYK and RGB can be quite different. The Adobe Fonts library has thousands of fonts. It should be possible to find a font which is very close to the 'branded print' font. You can challenge them: show two slides with exactly the same content, but one with their 'brand font' and another with the Adobe font which you found. Will the learners see the difference? 

Blurriness in non-responsive Scalable projects

The ideal solution would be that static text containers were converted to SVG instead of bitmap image, but that is at this moment just daydreaming (have no idea how complicated that is for the Captivate engineers). When I had a stubborn client who couldn't be convinced of using Adobe font, I converted all static text containers to SVG myself. It could still lead to a minor difference between the font look in static and dynamic text, but it was crisp.

A common workaround is to create an empty user variable, which you add at the end of each static text. That will force generation of the text on run time, which means you have to avoid system fonts. With that workaround you'll not see any difference between static and dynamic text.

Another possibility is to develop the project in a very high resolution, so that only downscaling will ever happen. However that has consequences for the file size.






Characters in SVG format?

Intro

The Assets panel is a nifty new feature, and I am confident that its use will be enhanced in the future. You could have read my first comments in this post. You find under Tip 2 a special feature concerning the Characters of the Illustrated category. One of the complaints often heard about downloading characters is that you have to do this one by one, which is taking a lot of time. If you like the Illustrated category, and also have access to Illustrator, you can find a tip which could save you a lot of time. It is no secret that the new features in 11.5 for SVG’s are my favorites, and they’ll play a role here as well. What would you think about characters in SVG-format, which means always crisp, never pixelated? With the possibility to edit the colors within 

Workflow

Step 1: Download Illustrated Work File

Open the Assets Library in Captivate. Go to the Discover tab, and open Characters. Choose Illustrated, and eventually the wanted category and find you favorite character. Look under the (often 25) images for the Illustrated Working File. It is sometimes at the end, sometimes at the start. The sticky characters do not it. Download the file, while choosing the format AI (Adobe Illustrator), not EPS. It will be saved automatically in the Others subfolder under eLearnng Assets.

After the download you’ll be able to open the folder immediately from the popup dialog box. I mentioned already that it is under Others in eLearning Assets (under Public documents\Adobe if you are on Windows).

Step 2 Illustrator – Preparation

Be sure I am not at all an expert in Illustrator, my expertise is more with Photoshop, Captivate, Audition and InDesign.  Three items in the Illustrator environment will be important, try to find them and get acquainted. The active workspace is not  important, I used Essentials:

  1. Selector tool (black arrow) which is the first tool in the vertical Toolbox, indicated by a red circle in the next screenshot. It has also a shortcut key V.
  2. Properties panel: it may be open, just find it or you can open it from the Windows menu. This panel will be used to identify the nature of a selection (step 3).  It is highlighted in light blue in the screenshot. For this particular selection it indicates as ‘Group’. You are familiar with grouping in Captivate and that knowledge will be useful in step 3. IYou can increase its size both horizontally and vertically.

The characters come with 4x6  poses.  Only face changed in the groups of 6: disappointed, speaking, normal and happy.

Step 3: Identify and change status of character

This sound terrifying, but it is not. Problem is that apparently the files for the characters were not created/finished all the same way (different teams). The ideal situation would be that each character instance was one group (of paths). You will have to check if that is the case, and if not, group manually.

Choose the Selector (arrow) and drag a rectangle surrounding (or cutting) the character you want to save.  You’ll see a lot of blue lines (paths) appear in the image. If the Properties panel indicates that this is a group, it is great, done with this step! Here is an example (character Sydney):

For the following example, the selected paths are indicated as "Mixed Objects". You need to group them which is possible with the same shortcut key CTRL-G as in Captivate. Alternative is the command 'Group' from the right-click menu , or from the menu Object. Here is an example of a selection which has to be grouped (character Jessica):

Step 4: Drag objects to Asset Export panel

Drag all the assets you want to export to that panel. Verify that you see the complete character. If by accident, you drag a character which is not grouped, you’ll get all assets separately as asset. That may be interesting for other situations (like the post I created about the Geographical Hotspot question, or a planned scored Color question).

In the panel assets get a generic name Asset1…. but you can double-click that name and edit to a more meaningful name.  See screenshot under Step 5.

Step 5: choose Export fomat(s) 

You can  indicate to which format you want to export, and multiple formats are possible. In the screenshot below you’ll see that not only  SVG, but also PNG’s in 3 different sizes was chosen. The last option indicated an exact height for the PNG. That way you can increase the quality to what you want exactly, since the original image is vector-based. You know the rule in Captivate: best quality for a bitmap image (PNG is bitmap) needs inserting the character in exactly the size you want. It can also be interesting to increase the size if you want to use only part of the character.

Let us compare with the normal download of characters from the Assets panel. You get only two choices , both with a fixed size (high and low).

Available formats are visible in this screenshot. For the characters, which have a transparent background you should not use JPEG because it will replace  the background by a solid color:.Now click the Export button. You will be asked to indicate the location for the images. You can put them in a subfolder of the eLearning assets or anywhere. They will not show up in the Downloads section of the Assets panel.

Conclusion

I like the Illustrator Export Asset panel a lot. Being able to use SVG format has many advantages: always high quality, and  it is so easy to edit colors in Captivate (or by roundtripping with Illustrator). This article is also meant to provide a possible workaround for having all characters available immediately without having to download them one by one. Too bad that you do not get such an overview image for the normal characters, only for the illustrated ones.

A warning: the downloaded Workfile (see step 1) nor the exported assets will appear in the Downloads section of the Assets panel. You could store them in the Others folder under eLearning Assets, but will have to import them manually to the Library of a project to use them. 

Forced view - special use case

Intro

Another blog and example output, due to a question by a user today. 

“I have groups of slides. Each group consists of a handful of slides that has event video on each slide and nothing else. The videos autoplay. The user can enter these groups at any point and must watch each video before being redirected back to a main menu. “

After I had gotten all details, I created this example file. The assets panel in 11.5 was very useful as you can see. Only Chapter 1 has been worked out with 4 slides containing event videos. For Chapter 2 and 3 only one slide is available with a back to menu button. Try it out: you can start with any video, but then the sequence will be linear: 1-2-3-4, 2-3-4-1, 3-4-1-2 and 4-1-2-3 are all possible. You can use the Chapter 1 button on the main menu as many times as you wish. It should be foolproof. However… you have to watch the videos from start till end.

The embedded movie is at a fixed resolution. The project is published as Scalable HTML and you can also play it directly in any resolution from this link.


Setup

Variables

Four Boolean variables were created: v_one, v_two, v_three, v_four. They are meant to track each if a video has been viewed completely. Only when all variables are toggled to 1, will the learner being returned to the main menu slide. The default value is 0 and will be set by a shared action (see later).

Events and actions

Enter event of video slides 1-2-3-4

This event is used to trigger an advanced action which will check the value of the 4 variables. If they have all the value 1, the learner will be navigated back to the menu slide. Have a look at  the Preview of this action:


Exit event of video slides 1-2-3

For the first three video slides this event is used to trigger a simple action, similar to this one for the first slide:

Assign v_one with 1

Only the variable is different for the second and third slide. Since the sequence is linear, after that event the playhead will continue to the next slide. There is no pausing point on the slide, which makes it possible to use this event.

Exit event of video slide 4

The action is now more complicated, because two situations are possible:
  1. All video slides are viewed (learner started with first video)
  2. Not all video slides are viewed (learner did not start with first video)

The first situation means that the learner will be navigated to the main menu slide, the second that he still has to view video 1 and maybe more. This means we need a conditional advanced action. Here is the screenshot:

Since the exit event has also to toggle the variable v_four, I used two decisions. The first one ‘Always’ is toggling that variable. The second decision is the conditional one described above.

Success event of the Video buttons (Chapter 1 slide)

You would expect them to trigger a simple ‘Jump to Slide’ action. However, since the learner will return to the menu slide, and can restart viewing Chapter 1, there is a need to reset the variables. This event was used for that purpose as well. It is a perfect example of an action where a shared action can save a lot of time, because it will have only one parameter: the slide to jump to. All variables, and the literal ‘0’ do not have to be parameters. Here is the screenshot of a filled in action for the first video button:

Since both remaining chapters will have a similar group of video slides, this approach can be used there as well, to reuse the same variables. The advanced actions described before, can be duplicated and edited. The shared action can be used as it is without any change.

Color Management - Intro

Why?

Almost 5 years ago I have published some articles about the Theme Colors. From what I hear on social media, and read in most books and manuals (and in a recent webinar) there is a lot of confusion about this topic. In Captivate 11.5, which has now Quick Start Projects and the possibility for multiple themes (with their palette) in a project, this topic becomes even more important. In personalized training, my trainees will always learn that the creation of a good Theme Colors palette is the first step for a useful  custom theme. No doubt about the relevance of such a theme in a company environment, where you need to apply the style sheet of the company. However even a standalone project benefits largely from a good theme to have consistent design.

Allow me to remember some Captivate history. Before the introduction of themes as base for course design, Captivate had introduced a ‘Swatch Manager’ panel, similar to several other Adobe applications. I still see many users/trainers refer to that Manager instead of the Theme Colors palette. Personally for the past 6 years I showed that manager only to prove it is outdated, not useful in Captivate. Reason was already in the old posts : there is no link whatsoever between the Swatch manager and the Theme Colors. Even after repeated feature requests, this is still the case in version 11.5.

Creation of Color Scheme (5 colors)

To avoid confusion with Theme Colors in Captivate I prefer to use here the word ‘Color Scheme’ for the palette with 5 colors to which I refer in this part.

Classic color schemes consist of  5 colors, when you use one of the two applications provided by Adobe:

  1. Adobe Color,  a cloud-based (free) desktop application. You can open it using the CC app or with this link.  Years ago it had the name  'Adobe Kuler'. It gets regular updates, only recently that was the case. You can find inspiration in this site because lot of schemes are publicly available. Of course it is also possible to create custom schemes, either starting from one or more colors, or from an image. The schemes typically get saved to … one of your CC Libraries. For most Adobe applications that is fine but Captivate sadly has no access (yet?) to those libraries. As a workaround you could use  Captivate Draft (has access). However since the transfer from Draft to Captivate results automatically in a Fluid Boxes project, that workaround is not useful if you need to create non-responsive projects. 

    There are plenty of tutorials around for Adobe Color. Just one example: YouTube tutorial. If you have access to LinkedIn learning, you could also find courses.
    To get the scheme into a normal cptx project, you can save a color scheme as ASE file. For a reason explained later, not the ideal format for Captivate. You can make the color values visible in Color, but I miss a way to export them easily. When you open such a file in Notepad or similar, you could extract the RGB-codes but that is cumbersome. Or you can write them on a piece of paper.Hexadecimal is fine:
    For that  reason I prefer using a mobile app, around since quite a while:

  2. Adobe Capture: available for iPad and for Android (still beta, but functional). I have it installed on my iPad and my Android phone. Short tutorials included.  You have exactly the same functionality as with Adobe Color, but can also directly shoot an image as basis for your scheme. It can also be used to create shapes (SVG’s) and gradients, but I’ll leave that for another blog. Especially with the enhanced use of SVG's in 11.5, an interesting topic.

    The advantage of Capture is that you are not limited to saving the schemes to a Library, or save to ASE-file. You can export the scheme as ‘color values’ and print or send them by mail, or social media. Much more useful for Captivate. That functionality may be hidden somewhere in the desktop application, but so far couldn’t find it. You’ll get a txt file with all details of the colors, which is the ideal form for Captivate. Here a screenshot of such a file:
    Be sure: I will not explain the different ways of defining colors (although I would love to), Captivate accepts only RGB or HEX format. However,  in the Theme Colors palette I suspect that the HSB format is used to create the tints derived from the main colors.

Transfer Color Scheme into Captivate

Do NOT use Swatch Manager

If you have read my old blog post, you will know that it is possible to import an ASE-file in the Swatch Manager. Follow this workflow:

  • Clear all swatches
  • Click Append
  • Point to the ASE file.

In this screenshot you see the result of such a workflow:

You do not need the Swatch manager, your theme will be saved with Theme Colors palette. How can you get the colors in that Theme Colors palette? Only way  is to find the color value of each of these swatches and type them in the Theme Colors editing window. Not so user friendly. This explains my present topic title: NOT to use the Swatch Manager, although I am aware that many trainers and books still mention it. Personally they could take out the Swatch manager, it is a legacy feature.

Use Color Values

Starting from the txt file you got with all the color values, open the Theme Properties panel, and go into Edit mode. To enter a color of the theme, you need 4 steps:

  1. Copy the hexadecimal value for the txt file
  2. Open a color
  3. Go to the Color wheel
  4. Paste the value

Here is a screenshot illustrating the workflow:

It is still a cumbersome workflow,. Sorry, but this is due to the fact that ASE import is impossible in the Theme Colors palettes. 

The palette has now 5 main colors, you can add 5 more. Have a good look at the existing palette: do you have enough light and dark colors to provide contrasts? Often it is a good idea to add neutral colors as black, white grey. It is not really compulsory to have/use 10 colors (+tints). In all cases if you want to switch to another palette you have to be very careful. Here I think about branding the QSP project slides.

Some users/trainers recommend and use the color picker a lot. Not a good idea at all. Check it out: you will not always get the color you want when checking its value in the Color wheel. The Theme color palette is directly available (see screenshot below).

When your Theme colors palette is finished, always colors from that palette, never use the Swatch manager. It is the best guarantee to have consistent color management. Moreover, when using other Adobe applications for asset creation or editing (Photoshop, Illustrator) you can easily transfer the colors, using the ASE file or the color values. Even though you’ll use them in a Swatch panel, because that is the default workflow in that application It should be clear now that for Captivate colors are in the Theme Colors palette, not in the Swatch manager. If you open the color dialog, and the used color of the item is a Theme color, the dialog will open in its first state (highlighted in screenshot) automatically. Forget the Swatch manager (second state), the color wheel (third state) and the color picker (last state).

If you like this introduction, could write more detailed articles. Just let me know what you’d like? 

If you want make me happy, add your voice to my repeated request to make it easier to import a color scheme (from Color or Capture) to create a Theme Colors palette.