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.

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.

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

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

Actions

Enter5Act/Enter9Act/Enter17Act (advanced actions)

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:

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?

Why?

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.

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

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

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

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. 

Intro

“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

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

Exit event of video slide 4

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)

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.

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.

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.

Intro

About 5 years ago I published this blog explaining the workflow for such a question using shape buttons. The embedded example in that blog was of course a SWF output.  With release 11.5 the possibility to use SVG’s as buttons, and to control the clickable area, combined with multistate object made me feel it is time to update this old post.

Why a custom Hotspot Question?

• hotspots have to be rectangular
• partial scoring is impossible

• hotspots with any shape
• partial scoring, which still can be reported to a LMS
• full control

Limitations of custom questions

Example

Please be a bit patient when you see a ‘pink’ feedback (which is the correct style). It may be due to the amount of SVG’s on the slide, but it takes time to hear the audio and see the flag appear and animated.
If the embedded movie is too small for your device, you click this link.

Setup

Look at the screenshot, which shows the Timeline and the Properties, Actions tab for one of the non-correct SVG-buttons  (Luxemburg). In the Style tab, the option ‘Enable Click in Bounding Box’ is disabled to limit the clickable area to the shape of the SVG itself (see recent post). In the screenshot both groups (countries/flags) are expanded. 

For the SVG buttons (countries) Success message is activated and used to display feedback. Those messages have two different styles: grey for the wrong clicks, and pink for the correct ones. After the correct message, an audio clip sounds and the flag of that country will appear at the bottom left. Both for correct and incorrect SVG’s the state will change to the Visited state when clicked: That visited state is grayscale for incorrect clicks. No advanced actions needed so far.

Actions

The on enter event of the question slide triggers the simple action ‘Hide Gr_Flags’

The first three commands are self-explanatory. Why did first apply the effect (line 4) to the group, and wait 0,1 sec before showing the flag? Because that will avoid flickering, a trick I learned from another user many months ago.

Duplicate that action, and edit it for the three other correct SVG’s.

Why did I not use a Shared Action?

If you are a fan, you know that I mostly use Shared actions when possible. This was also the case for this example.Of course, I created first a shared action. But a strange phenomenon appeared: the Effect was not applied for each instance of the shared action, only for the first one. I wanted the whole group to be animated after a correct answer. Yes, I could have ungrouped and changed the action, but then that meant another advanced action On Enter for the slide (where I now hide the group). Moreover I like to have the effect emphasize the whole group instead of one flag.

Still looking out for the reason of this non-consistent behavior. Really this is the first time I encounter a difference between an advanced and shared action behavior. Be sure, will update this post when I have an answer.

§Intro

In previous posts I have talked about the advantages and disadvantages of the 6 button types, and how you can edit the colors of SVG’s, even in states and when they are used as buttons. SVG’s, being vector images are excellent for use in projects to be viewed on multiple devices, whether it is a scalable non-responsive or a responsive project (fluid boxes or breakpoint views).

Unique about SVG’s used as buttons, is the fact that you have control over the clickable area, which is not the case for other  button types. In the example below you’ll see buttons which would have been impossible to realize with any other button type.

Example file

Watch this two-slide project. The Title slide is taken from the QSP ‘Legacy’ (non-responsive), but I have changed fonts (not fan of Arial). The second slide uses an edited master slide from that same QSP. Click the buttons in circular image in any sequence, and you can also reset the slide (used the Scenario 2 technique described in Replay Slide)

Setup Clickable Area

Six Buttons

The 6 buttons in the circular arrangement have overlapping bounding boxes. Have a look at this screenshot:

By unchecking the option ‘Enable Click in Bounding Box’ the clickable area will be limited to the space within the colored shapes, and those do not overlap. 

I kept only the Normal and Visited InBuilt states of the buttons . In the Visited state I added an icon (also SVG) from the Assets panel,  colored in the same color of the button (which was dimmed). That icon also covered up the number, which was part of the button SVG. Here is the Object state panel for button 6:

Reset Button

For this button I used an icon from the Assets panel. and added a text caption close to this button. The bounding box of the SVG is encreased so that the Reset text looks to be inside of the box. In this case The default option under the Style tab ‘Enable Click in Bounding Box’ remained checked. It now looks as if the learner can click both text and icon. I didn't use the padding option, which would make the icon smaller inside the bounding box.

Other Items

The information is stored in a multistate shape, where the Normal state is invisible (Alpha and Stroke set to 0). A two state shape is used for the final image, which is in a custom state of a circular shape. That circular shape also has an invisible Normal state. 

For the multistate objects the option ‘Retain State on Slide Revisit’ remains unchecked. Since the Reset button is re-entering the slide, all multistate objects will automatically revert to their Normal states.

Actions and variables were custom made, I didn’t use any of the click-reveal interactions from the QSP’s. Sorry about that, but I’m so used to create that type of interactivity that it comes almost naturally. One tracking variable for each buttons was needed to have the final image appear after all buttons have been clicked. 

Intro

Captivate ‘s most recent release, 11.5.0.476 added two types to the button treasure chest. You all know that the button is perhaps the most used interactive object. If you are only creating non-responsive projects, you may sometimes replace it by a click box, but that is not a possibility for Fluid Boxes projects.  In this post you’ll find an overview of all button types, with their advantages and disadvantages. It will be a lot of reading, if you want a short overview and check some details later, check this post.

This long article offers more details than the published output in Tips for use QSP

Common features for all button types

• The ability to pause the playhead or not by adding a pausing point, which you can do in the Timing Properties panel. The pausing point will appear with the typical pause symbol on the button timeline. Pausing point will not stop everything (see Pausing Timeline).
• Two events ‘Success’ and ‘Last Attempt’ (this is not available with Infinite attempts) which you can use to trigger any possible action. Success event means clicking the button, Failure means clicking outside of the button.
• Add-on of two extra InBuilt states on top of the Normal state Rollover and Down states. A fourth InBuilt state exists but is not automatically created; Visited. Inbuilt states typically appear in a situation. The form of the button in those states has size and location locked to the Normal state. however you can add more items in each state and define Custom states as well.

The 6 types can be divided in two groups of 3:

1. Old types (which I have known since I started using Captivate).
2. Newer types: one was added with Captivate 6, 11.5 added two more.

Old Button Types 

Those are Text buttons, Transparent buttons and Image buttons. They can be added using the Interactions button, option Button.  You will always get a Text button. If you want a Transparent or an Image button, you have to open the dropdown list under Style Name in the Properties panel. Image button is the second choice, Transparent the third. In this screenshot (same for most included themes) two more styles are visible, both for quiz buttons (which are also transparent buttons).

Common features for older types:

• Button(s timeline is green.
• They have  a default object style, which you can define in the Object Style Manager. The object style includes the InBuilt states Normal, Rollover and Down (not Visited). Like all object styles they will be included in the (custom) theme. Multiple object styles are possible for each type. To reuse such a button use either the theme, or you can export/import individual styles in a new project.
• Bounding box of the button is the clickable area, whatever the shape of the button (for image buttons).
• They cannot be used on master slides.
• They cannot be timed for the rest of the project.
• They can be used for the embedded buttons on quiz and score slides.
• They cannot be used as extra (custom) button on a quiz or a score slide.
• You cannot use copy/paste appearance, not even between buttons of the same type.
• They will not show up in the Library.

Text Button

This type is always rectangular. Fill nor stroke can be edited. You can only make the button transparent, which results in only the Label showing up (see screenshot with dropdown list for the checkbox ‘Make Transparent’. Look at this screenshot for a possible ‘look’ of the states:

The text on the button needs to be typed under ‘Caption’ in the Properties panel, not in the button itself. The text can be formatted: font, font size, font color and attribute.

Tips for use

Since Captivate 6 I have never used this type anymore. Not being able to use theme colors for its style is a show stopper for me. Using the option ‘Make transparent’ is not very appealing since it still keeps the bounding box as clickable area. Personally I regret that this button type is the default type when using the Button option under Interactions.

Transparent Button

Tips for use

Since quiz and score slides need an old type for the embedded buttons, this one is my preferred type. That is due to its better styling options, which makes it possible to give the transparent button exactly the same look as a shape button (which is still more flexible). You may wonder: why not an Image button? Read below why.

Image button

Before shapes appeared with version 6 I have created a lot of image buttons. You need a graphics application to do so:

• Create three graphics (bitmap), you are free to choose the type. I mostly use PNG (allows alpha channel), but you can use BMP (was the original choice), GIF… Graphics need to be exactly the same size.
• The images need to have the same name, but followed by _up, _over, _down.  You can see a lot of image buttons in the GalleryButtons under the installation folder:
  

  

• Save the buttons in the same folder, doesn’t have to be the Gallery folder.You would need administrator rights to add them in that folder.
• After inserting an image button, use either the dropdown list (for included image buttons) or the Browse icon (for custom image buttons stored elsewhere) and point to one of the graphics. Which one is not important, Captivate will recognize the other graphics and use them for the appropriate state.
  

  

  You see that the name on the button needs to be part of the image which is one of the disadvantages of this type of buttons. You need a lot of duplicates, each with its proper label as you could see in the excerpt from GalleryButtons shown above. You see also that the size of the button is mentioned next to its description, for the included buttons. Since those are bitmap image, it is best to use them at their original size. Increasing the size leads to loss of crispness as is very well visible in the last screenshot.
• Whatever the shape of the image, the clickable area remains the surrounding bounding box.

Tips for use

Since shapes became available, which can be filled with an image (see Turn an image into a button) I never used image buttons. Now, with 11.5 you can use both bitmap images and SVG’s directly as buttons. In my series about Tweaking Quiz slides, I mentioned them as only solution for a Fluid Boxes project to Tweak a Results slide. As you can read in that post, I used it exactly because it was possible to make an image button totally transparent, which is not possible for a Text Button nor a Transparent button because of the label. That is the only exceptional situation where I recommend an Image button?-.µ

None of the previous types are available in the new Assets panel.

Newer Button Types

Common features

• They can be used on master slides. Those will not have an ID, cannot be controlled by actions.
• They can be timed for the rest of the project. That way you create one button with a unique ID which can be controlled (Hide/Show, Enable/Disable)
• They can not be used as embedded buttons on quiz and score slides.
• They can be used as extra (custom) button on a quiz or a score slide.

This list is not as long as for the old trio. To see specific features for each type continue reading.

Shape Button

Such a shape button has some features taken over from the old trio:

• Its timeline is green. A Smart shape has a blue timeline, which turns green when you check the option ‘Use as button’, identifying it as an interactive object.
• Shapes have multiple default object styles, which you can check/define in the Object Style Manager. However you do not see a default style for a Shape button. Since any shape can be used as a button, each of the styles has the  InBuilt states Normal, Rollover and Down (not Visited) included. Similar to all object styles shape (buton) styles will be included in the (custom) theme.
• They will not show up in the Library, are not available in the Assets panel neither.

Shape button has also some similarities to the Transparent button, concerning the style: you can fill a shape with a solid color, a gradient, a texture or an image. You can also indicate color and width of the stroke. But, a shape button can have any shape, transparent buttons are limited to rectangle and rounded rectangle shape. This  is even valid for the states: you can switch to another shape in the InBuilt or custom states. Only rule is that the original bounding box location/size of the Normal state has to be preserved. Look at the Object state panel of (maybe too exaggerated style) of this shape button:

Personally I appreciate also the fact that the label can be typed in the shape, you don’t need to use the Properties panel (Text and Transparent button). I defined an object style for this button. It will include the edited image (Normal and Down state), the gradient and the text style for the Rollover state, and all strokes. Object style will not have the different shapes (Normal state is a freeform shape).

Shape button is the only button type which will allow Copy/Paste appearance as well! Read more in Copy/Paste Appearance.

If you are not yet convinced that this a very flexible type of button, look at the common features for the three buttons in this post.

Here are some minus points:

• If you want the shape to be filled with an image, only bitmap images can be used (as for trnasparent buttons). To have a crisp looking image, create it in exactly the same size as the shape button. More details in ‘Turn an image into a button
• You will find no Shape buttons in the Library,  only images if you used them s fill. I recommend to create a subfolder for images used in shape buttons. The Buttons section in the Assets panel neither has shape buttons.
• Shape buttons automatically shrink when pressed, trying to simulate a a real button.  Some developers do not like that effect (which you’ll also see in the two other button types of this post). Mixed feelings: I don’t care about this feature, but not everyone agrees. It would have been better to leave the choice to the Captivate developer.

Bitmap image as Button

You can swap images in the states, using the button indicated in this screenshot by a red rounded rectangle. In this example I used three different images from the series Brady (Illustrated category). You can add a text container in each state, but it is not really embedded in the image itself, or you can choose an image which has text in the graphics. Here I just used the character images.

You cannot define an object style s.

If you open the Assets panel, you’ll find a group titled ‘Buttons’. All the buttons in this group are of this type. However, the three InBuilt states will show identical images. In a previous article about the Asset panel I offered a tip to make it possible to have different images show up when inserting a button from this panel. That make it a lot easier to reuse buttons from this type: insert them from the Assets panel.

Common features described at the start are valid for this type as well.

Features which are less appealing:

• Contrary to all buttons discussed before, this type keeps the blue timeline of any non-interactive object.
• It is a bitmap image, which means quality loss when rescaling. Rescaling happens for Rescalable HTML output and in responsive projects.
• Shrinking happens for this type as well, may be very visible (with simple buttons like the ones in the Asset panel) or barely visible for a big character button like I showed in the screenshots.

SVG as Button

I have already blogged about this type in the already mentioned blog with Tips for the Assets Panel, but also in “Edit SVG’s“. Up till now it has never been possible to use a SVG in an interactive object like a shape button or a transparent button. For the first time you can use a vector-based image as a button, which is great news for responsive projects and rescalable HTML5 projects. They share the common features with the two other types of this post.

SVG’s also may have a smaller file size than their bitmap counterparts. I have converted some png-files from the Characters, Illustrated category to SVG’s. File size reduced to about 30% of the png filesize.Look

At least as exciting is the fact that the clickable area for a SVG need NOT be the bounding box of the image. Look at the Properties panel:

Watch the option ‘Fit to Bounding Box’, with the associated slider (blue rounded rectangle). In the default situation the slide will be at its maximum (to the right) which means the bounding box is filled with the SVG. I created some padding as you can see, by moving the slider to the left. The green rectangle indicates the option to define the clickable area. Default setting is ‘Enable Click’ which means the legacy situation where the bounding box is clickable everywhere. I unchecked it, and now the clickable area is limited to the SVG space. Expect in the near future to see a use case where this innovative feature will be used.

Similar to Bitmap image as button, no object styles are possible. The used SVG’s will appear in the Project Library. If you used the same SVG for each state its name will appear with a usage of 3 or more (if you have more states). For a more complicated image, I recommend to create the SVG’s separately (I use Illustrator) and import them to the Project Library. In this screenshot you see a Delete button, for which I used one of the provided Icons in the Assets panel, converted it to a button.  But unlike the Bitmap images, there is no way to include a different image for the other InBuilt states.

Negative points:

• Like its twin (Bitmap as button), this type keeps the blue timeline of any non-interactive object. Should have turned green (logged feature request).
• Shrinking happens for this type as well,
• No easy way to reuse a SVG button with all its states.

Conclusion

Here are my personal conclusions:

1. If I need a button which maintains a high quality image on many different screen resolutions use a SVG aton.
2. If reusability of certain buttons is important, and I need to localize them as well, I will use a shape button except…
3. For quiz and score slides as embedded buttons I have no choice but need to use Transparent buttons.
4. I am not tempted by bitmaps as buttons, except for a rare complicated button. Even though it is bit more cumbersome, in all other situations will use a shape button filled with the image.
5. I never use Text buttons.
6. I only use an image button in that Tweak situation described in the first post.

Would love to hear your ideas!

Intro

You may be aware of the fact that it is not possible to delete a score slide, once it has been inserted automatically because you created a quiz. It will become 'hidden'. For normal slides that means it will not be included in the output of the Captivate file. However, you may also know that quiz and score slides are bit 'special', because they have embedded objects (no timeline) and a lot of inbuilt functionality.

You need to be careful with that Hidden score slide, as a user in the forums experienced. Read on, if you want to discover another secret of the Score slide.

Problem and Solution

User didn’t want to show the score slide after a quiz, but created a a slide to jump to in case of Success, and another in case of Failure. Setup of the Quiz Preferences are visible in this screenshot:

The default way of achieving this is to click the Continue button on the score slide. But the user didn’t want to show the score slide. It is not possible to delete the slide but it was hidden. A slide which is hidden normally is not part of the published output. However Quiz and Score slides cannot be considered to be ‘normal’ as you’ll find out. His problem was that, whatever the result, the first of the two custom slides was always shown. Hence his complaint that the actions were not working.  Try it out, use this example published file and you’ll see that you always are navigated to Failure slide, which is the first slide, even if you have a 100% result:

Wrong setup

When I heard that the user didn't use the score slide, guessed the origin of the problem. It is due to the very special ‘status’ of the score slide, even when it is hidden. The Filmstrip of the previous example looks like this:

Correct setup

I moved the score slide in a position before the slides Success and Failure.

Why did this fix the problem? Quiz is considered finished when you reach the score slide, even when it is hidden. Now the quizzing system variables have their final value, including  cpQuizInfoPassFail which is responsible for the choice between Passing Grade and Failing Grade. When the score slide was after the Success/Failure slides Captivate expected more questions to come and didn’t evaluate that variable.

Another way of solving the problem, bit more work, is:

• Keep the score slide visible, but always before the custom Success/Failure slides.
• Use the On Enter event of the score slide to trigger a conditional action, checking the value of cpQuizInfoPassFail, navigate to the Failure slide if its value is 0, to the Success slide if it is 1. No need to set the Quiz Preferences actions in that case. And you automatically skip the score slide, learner will not see it.

Conclusion

Never trust the word 'hidden' if it is a Score slide!

Intro

The most recent version, 11.5.0.476 includes the new Assets Panel which I presented in this post.

You are able to use Quick Start projects, or slides taken from those projects to avoid having to design and to work out interactions for your project from scratch. Those projects/slides are available in a responsive (Fluid Boxes) and non-responsive version. I tested it out for a tutorial which you can watch using this link (it is a responsive fluid boxes project):

Button Types

If this topic, also related with 11.5, seems interesting, I will post a more detailed description in the near future. But today you'll get some tips from what I learned creating this tutorial.

QSP tips

1. Open the project, and delete or hide the slides you don’t want to use in your course.
2. Open a non-responsive or a Fluid boxes project, and insert slides from the Assets panel.

I used the second approach for the tutorial, for a logical reason: I didn’t use even half of the provided slides in the Aspire project. Project has only 17 slides, including a lot of duplicate instances of slides. I used these slides from Aspire:

• Welcome layout
• Timeline Interaction 02
• Main Menu layout 02
• Subtopic Header layout (used 6 instances)
• Tab Interaction 01 (used 3 instances)
• Related Content Interaction (used 3 instances)
• 3 Column layout
• Exit Layout

Tip 1 Duplicate slides

• Insert one instance of the needed slide
• Go into the Filmstrip, slide will be active (surrounded by a blue rectangle)
• Duplicate that slide, either with the right-click menu or with the universal shortcut for duplicate: CTRL-D.
• Move the slide by dragging in the filmstrip to the wanted location.

You can repeat this workflow as many times as needed. Due to Captivate’s smart labeling, the advanced actions will not corrupt in most situations. Why not always? See next tip.

Tip 2: Check Navigation commands

In a slide like the Main Menu Layout, the topic buttons point to another slides in the total project. On insertion of that slide only, without the target slides, all commands will revert to the default navigation command ‘Go to Next Slide’. You have to replace it by ‘Jump to….’ while indicating the correct target slide (in the project the slides of the Subheader Topic layout). This will prove easier if you use the next tip:

Tip 3: Rename slides

Tip 4: Replace image

1. Select the image.
2. Click on its name in the Properties panel
3. Choose another image from the Library dropdown list, or use the Import button to find it on your system.

However, on many slides an image is used as Fill for a Fluid Box. Look at the Subtopic Header slides (there are 6 in the example): having the image as fill allows to add an image on top of the fluid box. Normally you cannot stack two images, this is a useful solution for that limitations.

If you want to replace the fill for a Fluid box, you need to select that fluid box, you cannot just click the image. After selecting the FB you see that the fill is set to Image, click the second Fill button, use the Browse icon to find an image to replace the image. Be careful to check the Position properties if the new image doesn’t have exactly the same size as the original one.

Tip 5 Multistate objects

More questions?

Intro

Themes thumbnails dialog box

In older versions this dialog box had thumbnails of the available themes in the Layouts folder (and you could browse for themes in other locations). The active theme – which always had to be unique – was highlighted with name and resolution visible. The default theme was marked by a check mark.

In 11.5 this dialog box has two parts, separated by a horizontal line. The next screenshot, and indicated explanation  is valid for projects with one theme, not with multiple themes:

The top part shows the active theme, as usual with name and resolution. For a responsive project it is the resolution for the primary view (desktop).

The bottom part shows more available themes, and you can use the Browse hyperlink to search (custom) themes which may be stored on your system. Themes show name and resolution when hovering over the thumbnail. The default theme is still recognizable at its check mark. You see above that I have set the Blank theme as default theme).

To apply another theme to the project, select the new theme from the bottom part (or browse to it) and accept the warning. All slides will be converted to the new theme, which will replace the old theme in the top part. This workflow has not changed, but you’ll see below that this changes for projects with multiple themes.

Totally NEW is the button ‘Theme Properties’, replacing the former ‘Theme Colors’. You’ll read about this new panel in next point.

Themes Properties panel

Clicking the Theme Properties panel, will open this new panel, which shows you (for a one-theme project) the Fonts used in this theme (new) and the Color palette used:

Fonts may not be totally visible the panel cannot be resized (which is the pity). But clicking the Edit button at the bottom will show you all used fonts and colors, ready for editing.

A new functionality, which can save you many working hours: it is now very easy to replace one of the used fonts by another font. I always recommend to avoid using system fonts, use only websafe fonts or Adobe (formerly Typekit) fonts. That way you’ll be sure that all learners will see the font you had in mind, even when using dynamic text (includes variables) or creating a Fluid Boxes project. In older versions, replacing a font was very cumbersome, because you had to screen all object styles in the Object style manager which included characters, and change them one by one ( see Manage the Object Style Manager ). In this editing panel you cannot see however the Usage of the fonts (feature request) but it is already a big enhancement!

As I mentioned in my first review of version 11.5, the colors in the palette have now simple numbered names. The older names (Title, Subtitle, …) were confusing because they were rarely used for those objects. Editing colors in the color palette is the same as in previous versions.

Theme in Slide Properties

Less important for a course with only one theme, but the Slide Properties have an indicator of the used theme for that slide:

Theme fonts in dropdown list PI

When you are in edit mode for text containers (captions or shapes), the dropdown list for fonts will show at the top a group 'Theme fonts', which is new. The following group are the Adobe fonts (formerly Typekit fonts) if you have licensed some. The third group is the usual 'Websafe' group. You should limit font use to those groups, System fonts have to be avoided, especially if you are creating fluid boxes project. If you use system fonts, there is no guarantee that your learners will see that font, that it will be replaced by a generic font like Times New Roman or Tahoma.

 Multi-theme projects

You can insert slides using another theme than the project theme. Once inserted you’ll see in the Filmstrip an icon, showing two options Use destination Theme or
Keep Source Theme (which is the default choice). Beware: this icon only appears when a slide is inserted. When you insert another slide, the icon will disappear, in favor of the last inserted slide.

Look at this screenshot, taken after insertion of a slide with the “Earth” Theme (one of the Quick Start Project themes). You see that the first slide no longer has the icon, it was in the theme ‘Aspire’ has no longer the icon. This project has now 3 used themes: DemoTheme (my custom theme), Aspire and Earth. What is now the destination theme for the last slide? It is not the original project theme, but the theme ‘Aspire’ of the previous slide. I find this bit confusing.

You can use one of these two workflows to change the theme of a slide (where you no longer have the icon to change to the destination theme):

• Select the slide, use the Themes button and click the theme you want as destination theme for the slide. If there is no appropriate master slide, it will be added to the destination theme.
• Select the slide, use the dropdown list in the Properties panel (see screenshot) and choose the destination theme. If there is no appropriate master slide, you will be invited to choose one of the existing master slides.

In the thumbnails under the big button Themes, all the used project themes appear in the top part. The ‘active’ theme shown is the one of the slide selected at that moment. If you select multiples slides, not all using the same theme, it is the theme of the first slide selected who will show its theme as active?

Clicking the Theme Properties panel will bring you to the properties of the active theme. If you want to see the Properties for another theme used in the project, do NOT click that theme in the top part of the thumbnails, because you would change the used theme for the active slide!. You need to leave the thumbnails dialog box, select a slide in the filmstrip with that other theme to make it active in the thumbnails, in order to be able to access its theme properties.

Master slides

In a multi-theme project, the master slide panel will show only the master slides belonging to the theme of the selected slide, not all the master slide used in the project. Just a warning: if you have both the Filmstrip and the Master slide panel open, which is only possible in the Expert UI, not in the default UI, the master slide panel will not refresh automatically if you choose a slide with another theme than the one showing at this moment. You have to leave the master slide panel and come back to force it to refresh.

If you change the theme of an inserted slide to the destination theme, and it uses a master slide which is not available in the destination theme, an extra master slide will be created. It will use the destination theme colors palette and its object styles.

If that happens, you may have to use the button ‘Reset master slide’ to enforce the use of the new object styles. It is not always happening automatically, if an extra master slide was needed.

Object Styles

Theme fonts in PI

Same logic: the dropdown list in the Properties panel, will show the Theme fonts for the theme used by the selected slide.

Skin editor?

When i explored the skin, I found that only one skin exists. In the example I used for the screenshots, the skin designed for the custom theme ‘DemoTheme’ was always applied. Even when I have changed all the slides to another theme, or applied another theme to the whole project (where the message appears that skin is updated). Not sure what is going on, will update this post when I have more information.

I did not check out Recording defaults, last component of any theme.

Intro 

This post is meant as an answer to a thread posted in the eLearning community. "I want to create a menu that slides on and off the screen, like a door that moves to the left and right, when the user clicks a button." I invite you to read the comment by Greg Stager who is posting some links to blogs he wrote where JS is used to create slider solutions. As you know, I often try to use only Captivate features to solve similar use cases instead of JS. This is a new example. You'll find a step-by-step workflow to recreate the example I show. The shape (which I use as 'box') is not having a menu, I invite you to (re-)read my post about Hyperlinks for the creation of a Dropdown menu. They are a great way to avoid creating multiple interactive objects in the 'box'. 

If you don't like creating advanced actions, I have an offer at the end of the post to make your life easier...

Example

Watch this short file, only three slides after the 3 seconds long Title slide. They have two buttons (from the Assets panel in 11.5): a Next button on top, and the Slide toggle button below it. You can use the toggle button as many times as you wish on a slide. To restart, refresh the browser.

Step-by-step workflow

Step 0: Next button on master slide

I used only one master slide in this project, which made it easy to put the Next button on that master slide. I kept the default option 'Pause project until user clicks' (Actions tab). That will result in having each slide paused at its last frame.

Step 1: Sliding assets

Two assets have to be created and put on the first slide where you want to use the sliding box:

Step 2: Custom Out Effect

Create a time-based effect to get the sliding box out of the stage. Do not use an Exit effect, but a simple motion path. I added an AlphaFromTo effect as well (100% to 0%), and reduced the duration of both effects to 1 second. 

Workflow to save this effect as a custom effect is described in detail in this post. Do use that method after you have done step 3:

Step 3: Create Guides

Show the Rulers (View menu) and create two vertical guides, through the start and end point of the motion path. See this screenshot:

They will be needed to create the In Effect, to be exactly the opposite of the Out effect. Now you can save the custom effect, and take it out from the slider box.

If you didn't use a horizontal motion path, you'll need also horizontal guides. If you need more information about using Guides and Rulers, look at 'Guides Rule'.

Step 4: Move slider box in Out position

Use the guide in the scratch area to move the slider box to the correct position. I mostly use shortcut key (SHIFT or CTRL combined with left arrow) to keep that movement horizontal. For a non-horizontal movement, you use vertical and horizontal guide. You'll see a screenshot of the new position in step 5

Step 5: Custom In Effect

Create this effect using the two guides (or four if you needed also horizontal guides). In the screenshot you see this effect, where I combined a motion path effect with an AlphaFromTo effect (0 to 100%). Save the effect, same as for the Out custom effect. 

Step 6: Hide Slider box

Use the On Enter action of the slide to hide the Slider box. 

Pause

Now comes the hard work: you could skip steps 7-9 and scroll immediately to the bottom for an offer. 

Step 7: Variable v_slider

Create a user variable, which I named v_slider. It will be used to track the status of the Slider box: in or out? Similar logic you'll be able to see for all the Toggle buttons in this older post.

Step 8: Advanced Action ResetSlide

Create this advanced action (conditional):

Step 9: Advanced Action ToggleSlider

Create this conditional action. Like with the previous actin, I indicated the 4 parameters if converted to a shared action.

Step 10: Attach the actions to events

The action ResetSlide has to be triggered by the Success event of the Next button, whereas ToggleSlider has to be linked to the Success event of the toggle button.

Offer

You can obtain the described actions as shared actions for free, including a short explanation of how to use them. You could skip steps 7 to 9, but still have to do the other steps.

How? Visit my website (lilybiri.com), fill in the contact form with your request, and a small comment on my blogs or website. You'll get everything by mail. I probably will post more offers in the near future, if you don't want to hear about them, you can indicate that as well (I am European, respect the GDPR).

Intro

At this moment the stored  assets are restricted to those available with Captivate (under Assets tab  or to downloaded assets (under Downloads tab). You cannot add custom assets fto the panel. For those custom assets remember that you can use external libraries.

The center tab – Discover – has two choices,  ‘Templates’ (confusing term, not the cptl template files) with a submenu or ‘Characters’. Both link to the site of the eLearning Brothers. Once downloaded, they will appear in the Downloads tab.

Tip 1: Projects/Slides

1. Non-responsive project (Blank project in Welcome screen)
2. Responsive project with Fluid Boxes (none available for Breakpoints)

If you insert a slide in an existing project created in one of those types, the inserted slide will automatically be of the same type. A master slide may be added, and object styles but I’ll leave more details for another blog post about using QSP's

However, some users asked me "how do you open a full QSP in the wanted type"? There is no choice available after selecting a project.

Workaround which works for me: open first a project in the wanted type, either a blank project or a responsive project. Anyway you need an open project to launch the Assets panel. Selecting a QSP to open as new project, will open it in the same type as the already opened project. You can then delete the first project..

Tip 2: Characters

Screenshot is taken on a Windows system. If you download a extra character from the eLB site, it will be stored under Characters_11_5, not in the Content folder.

It is still not possible to download more than one or all characters from a set at once (please log a feature request). However, if you like the Illustrated category, here is a tip. Characters in that category are based on one drawing file, which you can download as well. You have some choices for the format, I prefer AI (Illustrator). If you are comfortable with that vector image application, you can extract all characters from that file and export them not only as PNG, but also in other formats inclucing SVG (smaller file size and vector based, crisp look whatever the resolution - interesting for responsive projects). Those drawing files are always labeled ‘Name: Illustrated work files’. You can also use that file as reference file. After download it will be stored in the subfolder ‘Others’ under eLearning assets, (not in Content, nor Characters).

Tip 3: Icons

Those icons are stored in a subfolder under the Contents folder in eLearning assets. When screening that folder you'll see that the 'icons' are in JPEG format. However when you insert an icon, the SVG is created in the same folder as the original JPEG image.

Tip 4: Buttons

I am finalizing another blog about the 6 button types available in Captivate 11.5, including advantages and disadvantages of each type. Which type of buttons do you insert from the Assets panel? That was bit of a mystery at first. When you insert a button from this asset category, it is a PNG image (bitmap) with the option ‘Use as button’ checked off. The three InBuilt states (Normal, Rollover, Down) which are normally included in a button object style, are identical. You have of course the possibility to edit the image for the other states once the button is inserted. However I was bit curious when watching the name of the image. Look at this screenshot of a button:

That name ‘Deep-download_up.png’ reminded me of the name convention needed for an (old) image button. For image buttons you need to create three images in the same size, with an identical name followed by _up (for normal state), _over for rollover state and _down  for the down state. Looking in the Buttons folder (under already mentioned Content folder) taught me that all the buttons had a similar name structure ending on _up.  The folder has is similar to the Characters and Icons subfolders: numbers as folder names. Each folder contains only one image file for the ‘up’ state.

Of course you can edit the states in the project, using the Object state panel and copy/paste the button if you need more instances.  But you will not be able to reuse that button with the edited states in a future project.  I tried out a workflow based on my CP-intuition:

• I duplicated the _up file in the Content\Buttons fokler for the button 5751 ‘Bubbly_downloads_up'
• renamed the duplicates to Bubbly_downloads_over and Bubbly_downloads_down,
• edited the duplicates in Photoshop, watch the result in this screenshot:

Success! When inserting the 'Bubbly....' button in a project, it had three InBuilt states. Not only when inserting in the same project, but also in other projects. You cannot have an object style for Images used as buttons, as is possible for shape buttons, text buttons, image buttons and transparent buttons. However this workflow opens an alternative for re-usability  (one domain where Captivate excels over other authoring tools). One drawback: Assets are only edited on the used device, they are not in the cloud.

More about buttons in a future blog as promised.

Intro

Do I use the Format Painter in Word? Sure, when I have to write a quick short document, which I’m sure I will never have to edit later on. Even in that case I mostly use it for paragraph formatting, seldom for text formatting. When creating courses in Word  (which happened if they were mostly text-based switched to Framemaker when I could get a license in college, because it handles graphics and other assets lot better) I would NEVER use the format painter. Even Word has Styles for a professional workflow. Captivate is style-based as well, in the sense of Framemaker and InDesign.  Object styles are part of the theme you are using in a course, and I have published several posts about themes.

In this post I will try to explain which situations are suited for using appearance duplication. It is not possible for all object types, as you will discover, and has a hidden gem which you may not have discovered (yet). Let me know if my guess is wrong.

Objects supporting Copy/Paste Appearance

Static objects

First requirement is that the object type had an object style. This means that images, audio, video, bitmap image as button, SVG used as button do not have the feature. Check the Object Style Manager. That is also the right place to detect the included features in a style. Example:  Transition (Fade in/out with its duration) is part of the object style. When using the Appearance feature it will be transferred as well. The supported objects for appearance pasting are a minority. You cannot use it for Highlight box, zoom object, rollover items although they have an object style. Only text containers:

• Captions: in the themes packaged with the present versions, all used captions are transparent captions. But the older not-transparent captions are still available. They always come with the Callout pointer in several directions, the used pointer will not be transferred. Have a look at the screenshot below. You can transfer the style of the left caption (pastel orange) to the right caption (default style). top left pointer will not be transferred. But color, font, font size and attribute, alignment, margins, leading (space between lines) and transition will be pasted.
  
  
• Shapes: can also be a text container, but that is not compulsory. Fill, Stroke, Transition and Text properties will be transferred. The shape itself is not part of the style and will not be changed.

• 

After using the Copy/paste featuure

Look at the style names. For the shape the style has been taken over on the second shape, which is great!. However the style of the left caption has been applied but shows a + sign to indicate an overridden style.  I have tried this for quite a lot of captions, it seems to be always the case  and that is bad news! When later on you want to change something in the applied style (here MyCaption), that change would not be applied to the right caption shown  in the screenshots. Hence my

Warning

If you use Copy/paste appearance on text captions, and you have decided on the final look you will need to double-check the styles and avoid all overridden styles. If you forget to do so, the slightest edit you’ll have to apply in the future to that style will become a nightmare.

Interactive Objects

The only interactive object to accept Appearance duplication is the Shape button, my favorite Captivate object! Its object style includes the look of the Inbuilt Styles Normal, Rollover and Down (not Visited).  What is the result of a Copy/paste Appearance. Here are two shape buttons, and their Object States panels. The left button has a custom style MyShapeButton, the right button uses the Default Smart Shape Style of this theme:

Both buttons have the 4th InBuilt state - Visited - added. Its default look starts as the Normal state but I edited the style. After copy/paste appearance from the left to the right button, you expect to see this:

The good news is that the second button has now also the style MyShapeButton applied to it, same as for a non-button shape. Have a look at the new Object State panel of the right button:

Hidden Gem

Captivate has no individual Text Styles (no Character styles, no Paragraph styles), they are included in the object styles of the text containers (like shapes and captions, text entry boxes). Up till now I used Copy/Paste appearance to transfer styles between objects from the same type: caption to caption, shape to shape, shape button to shape button. However it is possible to copy/paste the text style between objects who are not the same type. That may not  seem unexpected between shape and shape button, but it IS ALSO possible between Caption and Shape or Shape button!

Workflow:

• Go into Edit mode for the Caption, and select all the text if you want also to transfer the leading (F2, CTRL A)
• Right-click, Copy Appearance
• Go into Edit mode for the Shape, select all text (see above)
• Right-click, Paste Appearance

If the shape is a shape button, the text style will appear in all the InBuilt states.

Of course the name of the styles will not be transferred, since a text style has non name. The style will show a +, which means it is overridden. If you decide to keep the text change in the shape, please create a new style.

Using Appearance Duplication

This new feature can be useful, but should never replace Object styles.  I would use it when being in “Draft” mode at the start of a project, when  discussing with the client about style choices. Certainly the easy way to transfer text styles is appealing to me, if followed by creation of an object style. But due to the fact that you can never be sure object styles will not be overridden (as is the case for captions) there is no way to create the custom theme before double-checking all styles. I start each project with a custom theme, because it can save so many hours of work in the future. The changes for themes in this new update are also very welcome, but that will be in another article.

Copy/paste appearance can be very useful when creating multistate objects to transfer the style of the normal state to other states. Think about a shape button, where the font style of the label is not always transferred to the other InBuilt states. 

Intro

Although I have already posted about one Submit button for multiple TEB’s, recently users tried to apply that blog to non-validated TEB’s, which was not the goal of that original post. Moreover giving another attempt to a TEB where the Submit has been done has become less easy with HTML5 output. SWF output had so many advantages (rewinding the playhead a couple of frames was simple), but that is the past.

This example was created with version 11.5.0.476, the most recent version of Captivate. I uses some image and button assets from the new Assets panel. However, nothing has changed for interactions in this major update to version 11. I am confident that the solution will work for every version since 8, meant for HTML output.

Example

The first slide has three fields to fill.  If any field remains empty, a textual warning will appear and you can retry. The Continue button appears when all fields have an entry. Project has no poster image, just the default play button. It is not rescalable. Here is the link

Setup

Variables

• v_one, v_two and v_three will be used witl be associated with the Interactions
• v_null is needed for the advanced conditional action to test if the field is blank; more info in ‘Where is Null’‘

Scrolling Text Interactions

You see in the dialog box that I edited the font (used an Adobe font), the font size and attribute.  Just a reminder: it is not sufficient to type in a variable name to define it, you need to define it in the Variables dialog box. 

Although I resized the interactions to the same height as the Text containers with the questions, the height is decreased in the output file. Be careful with copy/paste to duplicate an interaction, prefer the Duplicate functionality within Captivate (CTRL-D).

Advanced Action

This action is triggered by the Submit button. I used the On Enter event of the slide to hide the warning that will pop up if at least one field is empty. This is the Preview dialog box. The operator 'is equal to' is replaced by the JS equivalent needed '=='. The logical operator OR is replaced also by its JS equivalent |  As you perhaps know, an advanced action will be converted to JavaScript on Runtime.

The replacement of the grayscale image by the color image, disappearing items on the slide: all is achieved using  the timeline. For those interested, here is a screenshot of that timeline, I didn't group any items, but their label clearly shows what they are.

Conclusion

As usual I appreciate any comment, whether to add an alternative or to ask questions. You are welcome on my website as well.

Intro

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

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

Step 2: Edit mode

Step 3: Select a ‘path’

Step 4: change color

SVG button states

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?

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.

Intro

If you are a fan of my blog, you know that usually I will not talk about a new release on the day it is released (although I have explored it in a beta test group). This time however I am so excited about this intermediate release. It has 'Voor elk wat wils' (interesting features for each developer whatever her/his level) to use a Flemish proverb. Do not expect a full review here, want to talk only about some of my preferred features which do appeal to my level of expertise. My apologies if you don't like that 'egocentric' approach. Be sure I will write more in the future, need some time to explore in-depth. As in the past, I may overlook some little gems which I couldn't dig out yet, will continue the search. You'll find three small gems at the end.

SVG as Button

It has been possible to fill a shape with an image since version 6. Converting the shape to a button was a much easier way to create nice buttons than the older workflow with Image buttons where you needed a graphics application (and had to create several images) Shape buttons also can have custom states besides the InBuilt states which they share with the old button types (Normal, Rolllover, Down, Visitedà. I never use those legacy types anymore, except for Quiz/Score slides where they cannot be used as embedded buttons.

However, those shape buttons have two lmitations:

• You can only fill with Bitmap images, the much sleeker vector images like SVG were not possible.
• The clickable area of the shape button is the bounding box, not the image itself.

WIth 11.5 it is possible to use SVG's directly as buttons without the need for a shape. And you can limit the clickable area to the image itself! This is a big step forward. File size of SVG's tends to be small compared with bitmap images, and moreover they are excellent for responsive project due to its vector nature.  The SVG has all the features of a shape button: can be used on master slides, can be timed for the rest of the project (not in Fluid Boxes), can be added to quiz and score slides as extra button. A setup with 3 buttons like this screenshot was not possible in previous versions, because the bounding boxes are overlapping: The screenshot may look blurry (has been converted to bitmap here) but the original SVG's in Captivate are really crisp. Size of the SVG: about 75Kb.

In the default setup, the clickable area is still the bounding box, you have to uncheck that option:

Bitmap images as Buttons

Similar to SVG's, they can now directly be used as button, no need to fill a shape button. Same for the clickable area: can be limited to the image. Depending on the type of images this extends the functionality which I explained in the first point. I dream of custom hotspot questions with partial scoring as described in this older post. Watch out for use cases in future blog posts. Not only are you now rid of the cumbersome workflow which I described here, but if you use a bitmap format which supports transparency (GIF, PNG24) you can uncheck the same feature to reduce the clickable area as for SVG'S.

Themes 

Interactive video

One of the new features in the first release of CP2019 which I really like a lot. Not so much changes after this patch. It is interesting that you now are not only limited to videos on your system or from YouTube, but that you can also use Vimeo videos.

Another improvement is the possibility to insert a sequence of overlay slides (content or KC slides) on a frame of the video. 

VR project/360 slides

Several enhancements:

• To the actions which can be triggered by hotspots the much asked for 'Play Video' was added.
• The hotspots are now very customisable, black and white (minstrels?) are over and out: edit the colors as much as you want.
  Double click on the hotspot when inserted, select one of the paths and choose a color.
  

  

• If you trigger Text, you will like the new formatting possibilities. Just a pity that Typekit fonts cannot be used....
  

  

• No need to guess a duration for the popups anymore. Default setting is now a close button in the top right corner as you can see in the previous screenshot.

Small gems

Theme colors: in the screenshot of the new Themes panel inserted earlier, you see that the main theme colors are now named 'Color1.... Color10. This fits better the use of the colors, because in previous versions there was a Title color, which was not always used for titles, a Subtitle colors which was rarely used for subtitles etc...

Drag&Drop:  when selecting Infinite attempts in the Actions tab, the 'Failure action' will disappear, very logical since it will never happen in that situation. Regret however that the wording 'Failure' is still not replace by 'Last Attempt'. The action doesn't occur On Failure, but only at the last attempt, same as for quiz slides.

Preview menu: for non-responsive projects, the option 'Preview HTML5 in Browser (F11)' is now the first option which is great! The death of Flash player for all browsers will soon be a fact, every developer has to switch to HTML5 output. The other Preview methods are all still based on a temporary SWF output (except Play Slide, which is NOT a preview method). To check the future output only the mentioned Preview HTML5 in Browser should be used.

...sure will find more of those.

More...

This was not a complete overview at all. As I explained, need more time for features like the new Assets panel, use of Quick Start Projects, Branching setup, multiple themes, copy/paste appearance etc... 

Intro

Developer time can be very different from the real time spent by the user viewing slides in that project.  You’ll see in this refurbished article how to show both times, developer and real ones. It is a nice use case for System variables.  BTW, if you didn’t get my free table with System variables, maybe it is the right moment .

Contrary to the old post, which was meant for SWF output, I used JS this time instead of advanced actions with the Expression command.  Reason is that for SWF output the formatting of the variable values could be controlled by the number of characters to display when inserting the variable in a text container. That is not working for HTML5 output. Formatting of numbers is a typical use case (like random data) where I tend to use JavaScript.

Example output

Real time workflow

Developer's time workflow

As I announced at the start, for several reasons I preferred to use JS instead of Expressions in an Advanced action as was the case for the older blog post. I propose two scripts. The first one is close to the older blog post, because I use the same system variables, and two methods of the JS interface for Captivate. Details can be found in this document.

In the second script I skipped using the known system variables, replaced them by some more methods of the same document.

Script 1

Variables

The system variables used in the first script are:

• cpInfoFrameCount: its value is the total number of frames in the Project Info panel (see first screenshot in this article)
• cpInfoFPS: each movie is played at a certaing speed, which defines its qualtiy. It is indicated as Frames per Second. The higher that rate, the higher the quality
• cpInfoCurrentFrame: indicates the present frame number. Frames are numbered, starting with 0, not per slide but for the whole project. More details can be found in this blog post about Micro-navigation

In Captivate I created these user variables to display the results in the project:

• v_total: total duration of the project in seconds
• v_done: sum of the duration of the previous slides in seconds
  
• v_perc: percentage of duration viewed, in %
  

To avoid confusion, variables in JavaScript used these names:

• frames: will start with the value of cpInfoFrameCount and end after calculation return the total project duration (secs) 
• start: will start with a frame number (frist frame of the present slide) and after calculation return the alreadu viewed duration (secs)
  
• speed: will store the value of cpInfoFPS
  
• percent: will return the percentage viewed after calculation
  

Javascript

I am using two methods from the Common JS Interface:

• getVariableValue to store the values of Captivate's system variables in the JS variables frames, speed, start. (lines 1-3)
• setVariableValue to return the results to the Captivate variables v_total, v_done and v_perc (lines 6-7,9)

The calculations in lines 4-5 and 8 are straightforward. To control the formatting of the numbers I used the method 'Number.toFixed(x)'. I didn't want to display two decimals for a simple reason: the first frame will be detected on each slide, and that would have led to a duration of 0,03 seconds on the first slide (30 seconds in a frame). It would be possible to split up the results in minutes and seconds as well. I wanted this example to be a simple introduction to JS newbies. I planned to use the formatting in a third article about numbers. The first two were 'Playing with numbers - part 1' and 'Playng with numbers - part 2'. Both were meant as simple intro to JS for newbies. However, since they didn't get a lot of viewers, I gave up spending more time on it.

Script 2

No system variables here, the user variables and variables in JS are the same as in the first script: v_total, v_done, v_perc, frames, speed, start, percent.. Have a look at the script:

I didn't need the method getVariableValue in this case but used three more methods on top of setVariableValue to return the results to Captivate:

• getPlaySpeed: returns the same value as the system variable cpInfoFPS (line 1)
• getCurrentFrame: returns the same value as the system variable cpInfoCurrentFrame (line 2)
  
• getDurationInSeconds: spares me one calculation, this value doesn't exist as system variable. This time I don't have to divide the total number of frames (exists as getDurationInFrames) by the FPS value. (line 3)
  

The other lines in the script are similar to those explained in the first script.

Why?

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:

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

Intro

Validated or Not

Text Entry Boxes are Interactive Objects. It may be a bit confusing since CP8 (change of UI) that you have to find them under the Text Button, not on the Interactions button. There are a couple of ways to recognize interactive objets:

• Their timeline (shen not selected) is green
• In the Properties panel you have a tab Actions, allowing to trigger one or two actions
• You can turn on Reporting in the Actions tab. A score attached to the objet (default = 1pt) can be added to the total quiz score.

Text Entry Boxes allow to let the learner enter text, which will be stored in an associated variable. This means that it the value can be used later on. It is one of the two interactive objects that will be automatically inserted when creating a software simultaion in Training or Assessment mode (the other object is the click box), whenever the learner is required to fill in a field. In Captivate tthe only other ways to allow learners to put in text is by using the Notes or the Scrolling Text Interactions.

Text Entry Boxes can be used in two ways:. 

Not Validated

This is the default setup, learner can enter whatever he wants,  any entry is considered to be correct. 

However you can restrain the characters that may be used by clicking the More Options button, and you can set the required number of characters as well. If you activate the option 'Auto Submit' it will be submitted when the lenght of the entry has been reached. You don't need the Submit button in that case, can drag it out to the scratch area. If you don't activate anything in More Options, all characters (numeric as well) will be accepted but that option will (strangely) not be checked.

Let us look at the Actions tab. As with quiz and Knowledge check slides, you have a Success action and - in case of limited attempts - a Last Attempt action. That is a bit confusing, because any answer is considered to be correct for a non-validated Text Entry Box.  and the cause for a question that pops up sometimes in the forums. There is only a Success event, which means the Success action will be done all the time. Look at an example from a recent question:

"I offer 3 attempts to fill in a TEB, but it is only possible to enter once, the playhead moves on after the first submission'. 

Default Success action is set to Continue for a TEB.  This action will be executed after the first attempt, playhead moves on indeed. To avoid that, you could change the Success action to 'No action'. Result: user will have to fill in the field three times, after the third submission the Last Attempt action will be done. Maybe not what you want?  An easy solution is to add a custom button 'Next' to move to the next slide for users who do not want to fill in the field 3 times.

Validated

A Text Entry Box is validated when you check that option.  WIth the selected TEB a HUD will appear to enter the possible correct answers using the + button.  It is recommended to put the By default the option 'Case sensitive' is not checked, but I did so in this screenshot:

Because you have defined correct answers, the TEB has now two events: the Success event, and the Failure event if you have a limited number of attempts. Success action is only happening if a correct answer is given, the Last Attempt action after the last attempt if that was still a failure. Be sure to turn on the Success and Failure captions. There is no Retry message as you can have for quiz slides, nor multiple Failure messages. I have a workaround for that, but that is outside of the scope of this basic post.

A validated TEB can be scored, the score can be added to the Quiz total (will appear in the Advanced Interaction panel) and be reported. As I mentioned before, when creating a Software Simulation in Training or Assessment mode, you will see that reporting is turned on automatically.

Typical use case for validated TEB's: use multiple TEB's to create a custom Fill-in-the-Blank question, if you want to have each blank field to be scored individually. That is not possible with the default FIB quiz slide.

Associated Variable

A Text Entry Box needs a, associated variable to be functional. That is the reason why a generic variable is created automatically. It has the same name as the Text Entry Box, which is a bit confusing because the general 'law' in Captivate is never to reuse a name for a second item. However there is a very easy workflow to create and associate immediately a user variable with a more significant name. No need at all to open the Variables dialog box and create that user variable (as you can see in other tutorials). Follow these steps, after having inserted the Text Entry Box (validated or not):

1. Click the X button next to the Variable field which currently contains the generic variable (in the screenshot it is "Text_Entry_Box_3"
2. Type a name for the user variable. It will be created and associated with the TEB. In the screenshot: "v_name"

Displaying Variable

This is not specific for a TEB variable, but for all variables. More details in this post.

Do not type in the variable in a text container with the surrounding $$ but use the X button in the Properties panel (consistent, also X button). Not only do you avoid typos that way (variables are case sensitive) but you can check the number of characters that will be displayed. Default length is 50, but that may be too low, in which case you have to edit this length.

Text wrapping

Often overlooked by developers: it is possible to have text wrapping in a TEB. You just have to activate the option 'Show Scrollbar' which is disabled by default:

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

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

• 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:

Advanced Action ArrowAct

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

In a previous article I described the workflow to edit a Character (from Media) with Photoshop, without damaging the original image. In this interactive video you’ll see the workflow: an inserted character from the Illustrated category will change colors and be flipped. This very simple workflow is suited only for regions with solid colors. The next interactive video will show the workflow to change a color in a photographic image.

Watch this video:

Why?

In the past I have posted several articles about audio. Some tweaks can be found in this one which I created with CP2017. Tips here were not yet published. 

Merging of Audio clips (slide audio)

For HMTL5 output audio (and video) has to be generated when entering a slide with audio. For long clips (to be avoided, better split up on more slides) that can take a while and could even lead to synchronizing problems. 

In the past (SWF output) I sometimes used Project audio, which was distributed over all the slides, using the Audtion roundtripping. This workflow should be avoided now, because that would mean that the full project audio has to be loaded on the first slide, which will lead to considerably long waiting time.

When inserting slide audio, the slide timeline duration  will be extended to the length of the audio timeline, when the audio duration is longer than the original slide duration. It will start on the first frame of the slide, and end on the last frame. As I read in forum questions like this it happens that the total number of audio clips seems to decrease. Reason is that Captivate ‘thinks’ that audio has been distributed over some slides, and merges those audio clips to one audio clip. This leads to a similar situation as with project audio: it takes a while before that longer clip is loaded and often synchronizing with appearance of slide items is screwed up. 

Here is a simple trick to avoid that merging: increase the slide duration a little bit, move the audio timeline on each slide, to have  small gap before and after the audio. Merging will no longer occur.

Copy/Paste Segment 

In this question user wanted to move a segment from one audio clip on a slide to another clip. Both were also slide audio, this trick will not work with other types of audio.

Opening an audio clip in the Editor, shows that you can select a segment, cut or copy it, then move the playhead and paste that segment in another location. However that is not possible between different audio clips.

My trick: choose Audio, Edit, Project instead of Slide. Even if you have gaps as recommended in the first tip, the whole project audio will open in the editor. You see the slide markers, can use now Copy or Cut for a selected segment, move to another slide and paste the segment there. Watch this short video:

Drawback: as you’ll have seen in the video, Closed Captioning will be turned off and you’ll have to edit them to cope with changes in audio clips.

Library and Audio

• If you import audio, you choose best for the uncompressed WAV-format over MP3.  Only wav files can be edited. If you want to edit an imported MP3-file, Captivate has to expand that file to create a WAV file. You will see 2 files with different format in the LibraryAudio folder in that case. Do not worry about size of the WAV files, when published all WAV files will be compressed by Captivate to MP3, and you can set up the compression parameters.

• When you edit an audio clip, the original clip will not disappear but a new clip will be generated. You can always get back to the original clip in the Library if something went wrong.

• Want to use TTS to create audio clips to be used as object audio or with the Play Audio command? When generating the audio clip from slide notes or sentences in the TTS dialog box, it will be automatically inserted as slide audio and the slide duration will be increased to match the clip. Since the audio clip will also be in the Library, find it using the right-click menu and eventually rename the clip to make it recognizable. You can safely delete the slide audio, reset the slide duration to its original length. Drag the audio clip from the Library to an object for Object Audio. Use it with the Play Audio command, which presents you with a list of Library clips. 

• As explained in this blog all assets in any project library can be used as external library in other projects. This is also the case for audio files of course.

Why?

Yesterday a question appeared on the forums: ‘How to save in the Library the edits to Characters’. In this use case it was meant to save the flipped version of the Character. In the Library the original version will always be kept. Result: when you drag another instance of the character on a slide, it will not be flipped. Edits to the character, made with the Edit image functionalities will never be saved to the original image in the Library.

Characters folder

As you probably know, the downloaded characters are stored (for Windows) in Public Documents, under AdobeeLearning Assets. If you have multiple versions of Captivate, you’ll find a subfolder ‘Characters xx’ for each of the versions. Because of that location you are able to edit the characters even without Administrator rights. 

For each character in the folder you’ll have a Thumbnails and an Images subfolder. The Thumbnails show all what is available for that character, the Images only the downloaded image, both in a High and a Low version.  Although you can always choose for 3 ways of inserting a character: Full, Half and CloseUp, there is only one image in Low and High version, real images for those who were downloaded, placeholders for the others. 

When you insert a character in a Captivate project, it will appear on the stage and in the Library. The file showing up in the Library can be one of the 6 possible versions: High/Low in CloseUp, Half or Full version. 

Editing Characters

On the stage

You can edit the Character  on the stage with the set of editing possibilities provided by Captivate:

• Resizing, flipping, rotating using the Options tab in the Properties panel (inspector). 
• Using the Edit Image button in the Properties.  It is a limited set of editing functionality but could be sufficient in some circumstances. In this image you’ll see some edited instances of the same character.

This workflow will not change the original image in the Library. However if you need to use the same edited image multiple times, you’ll have to use the copy/paste workflow. The editing is not saved in the Library.

In the Library

Do NOT Rename

If you save it that way that particular instance of the image will be changed also for future project. Bit confusing, but the other 5 instances remain untouched. In this example I edited the Low, Half version of Sarah01 (Illustrated category). As you can see in this screenshot, the other instances keep their original look, although you’ll find only one image for Low on your system.

Do Duplicate

What is the correct way to preserve the original image? You have to duplicate the image in the Library and edit the duplicate. You can see the result on this screenshot for the Sticky Woman, low resolution, Half instance:

Multiple edited characters

If I need multiple edited characters in a course, to be reused over and over again I would prefer to create a layered Photoshop file and use the Import functionality. You did see that I created an extra folder for Characters under the Images folder in the Library in the last screenshot. With an Imported PS file that would be unnecessary.  Do not forget that it is always possible to use edited characters in the Library in any other project, by using the External Library workflow.

How?

Intro

The second post explored in depth the Object Style Manager, for creation and management of Object Styles.

In this last article the focus is on Responsive projects: tips and tricks to keep in mind for Object Styles in a responsive theme. Since CP2017 Captivate offers two workflows for responsive projects: first is using Fluid Boxes, second older using Breakpoint Views. Tips will be specific for each of those workflows. If you want to re-read the advantages/limitations of both workflows, may I recommend reading this post. I also mention the workflow of  Rescalable HTML project as alternative for responsive projects.

Fluid Boxes project

Objects not allowed in normal Fluid Boxes

What are the limitations of real fluid boxes? Many objects cannot be used. For the Object styles, that means you don’t have to bother about styling those objects. They all are in the category of the Standard objects:

• Rollovers are not possible in any fluid box (not even in a static fluid box): Rollover Area, Rollover Slidelet, Slidelet.
  
  
• Zoom object cannot be used for the same stacking rule: Zoom Source and Zoom Destination

Font size in Fluid Boxes

No need to bother about the other browser resolutions. After publishing fonts will decrease in size smoothly until the minimum font size is reached. At that moment the famous ‘icon’ will appear to indicating text doesn’t fit in the available text container (shape or caption). Just one tip: set the minimum font size to 10p if you expect to have learners on small browser resolutions.

Breakpoints

Objects not allowed in Breakpoints

Font size in Breakpoints

It is no secret that the Adobe team is promoting the Fluid Boxes workflow over the Breakpoints (which mean more work but offer more control to the developer). For that reason, there are no real Breakpoint views themes packaged with Captivate 11 (CP2019) anymore. A responsive project will always start with a Fluid Boxes, where you can use a packaged or custom theme. When switching to Breakpoints that theme loses all fluid boxes, but the object styles for fonts are not changed: all breakpoint views keep the same font size which is the maximum font size set up for Desktop (or higher Custom size) in the Fluid Boxes.

This is a situation where I use the Object Style Manager to start with the tedious work, eventually to be edited later on while designing the master slides. The OSM will now have a dropdown list for the activated Breakpoints, whenever font size is needed. That is the case for the Captions and Shapes under Standard Objects and for most of the Quizzing Objects. Of course, you don’t have to bother about Captions if you only use shapes and vice versa. Look at this screenshot, for the Title shape, common style in most themes:

When you check the font size for the 4 Breakpoints below the Desktop, you’ll see that the size is fixed. You need to decrease the size gradually. Minimum font size is 10pt. It is a bit guessing at the start to find a good distribution between the maximum and that minimum font size (which is for Mobile Portrait). My workflow:

• I look for the smallest used font size on Desktop, that will have to be 10pt for the Mobile Portrait.
  
  
• Once you have chosen Mobile Portrait in the dropdown list, that resolution will remain for the other styles until you change again. Edit all mobile font sizes at once, related to that smallest size.
  
  
• Landscape Tablet doesn’t have to be much smaller than Desktop, unless you use a really big resolution for the desktop breakpoint. So I’ll set up all the font sizes for that breakpoint.
  
  
• etc.

Here is a check list of the objects I usually edit. Know that I never use captions, only shapes as text containers. As for the buttons, only shapes and transparent buttons (compulsory for quiz slides) are used.  They appear in the same sequence as in the OSM.

• Buttons: I edit the style(s) for the Transparent button and for the Quiz button here (both will also appear for Buttons in the Quizzing category)
• Text Entry Box: edit only one style which I set as default style.
• Text Entry Box button:  switch to Transparent button whose default style has already been edited
• Smart Shape: for use as text container.
• Title: often start with 16p for the lowest breakpoint
• Subtitle: often start with 14p for the lowest breakpoint
• Success/Failure/Hint Shape: all need same font sizes. Beware some included themes use same style (Success), you’ll want different styles but with same font size in breakpoints.
• Quizzing Partial Correct Shape: all other shapes use a default style which has been edited under the Standard objects.
• Quizzing Progress indicator
• Quizzing Review Area: is only used on the score slide to store the text about passing/failing
• Short Answer

IMPORTANT:  Do not forget to save the theme when you have finished. Indicate clearly that it is a Breakpoint Views theme. That way you will be able to apply the theme when you have converted another project to a Breakpoint views workflow. If you change the design a lot throughout , it may be worthwhile to create a Blank project with edited font sizes for Breakpoint Views projects.

If you do use Breakpoint views because you have learners using a lot of devices and want to have a simple look for the smallest screens instead of having the same layout fluidized, please log feature requests. It should be possible to choose which workflow to prefer when creating a responsive project: Breakpoints or Fluid Boxes. Fluid Boxes should not be imposed by default  as is the case at this moment in CP2019.

Copy/Paste Appearance, new feature in version 11.5: how does it fit with Object styles? Have a look at this post:

Copy/Paste Appearance

Intro

In a first introductory post I explained the importance of Object Styles in any Theme, the terminology and how you can create a custom style based from example object (created on a normal slide). In that article I already posted some screenshots taken from the Object Style manager, but didn’t really provide an in-depth explanation of that window.  Do you need to use it? Read this blog if you want to know the answer to that question.

Object Style Manager

You can open the OSM directly from the Welcome screen, without opening any project. The option is available under the Edit menu, or by using the shortcut key SHIFT-F7. Similar to Preferences, which can also be opened from that location (SHIFT-F8) any changes made that way to object styles are global changes, which means they will be applied to all future projects. If you open the OSM within a project, the changes will be applied only to that project. Of course, since Object Styles are part of a theme, if you save the customized theme you can applied it later to any other project as well.

There are some alternatives to open the OSM:

• In Preferences, Defaults you can set up some General items like slide duration, color of guides … but also the default duration of a bunch of object types. You’ll get a hyperlink to the object style which is the Default style, which will open the OSM. In this screenshot you see this for the Highlight box; where the default style is the Blue Highlight box.:
  

  

• Under Preferences, Recording you can set up the styles used during the creation of software simulations. You also find a button ‘Create new Style’ which will open the OSM.
  

  

1. Objects: I have selected the Quiz button ‘Submit’ in the screenshot. 
   
   
2. Styles: a button has 4 InBuilt states, but only 3 are included in the style (Visited is missing). I selected the Normal state for the button. This is the default style, but you are free to choose one of the other styles in the list, and you could set it to be the default as well.  You can add a custom style (Clone button is highlighted in yellow) by duplicating an existing style and reformatting it. However it is not possible to have a shape button for this quiz button, because there is no original shape button style available in the style list. 
   
   
3. Components: shows all the components of the style. In this case that is the Button type (here Transparent button, you can change to Text button or Image button), the formatting of the text (font, font size, attribute, faux attribute, color) and Fill/stroke settings for this button. If you switch to a Text or Image button, that will be a lot more limited.  The label on the button is not part of the style, you can only change it after insertion on the slide in the Properties panel.
   
   
4. Under the Objects window you see a Preview. To be able to see it, the default Label ‘Submit’ is used here.
   
   
5. At the bottom you find two buttons Import which allows to import styles that have been exported. The Export button has options which I expanded. The resulting file will have the extension cps.

Workflows

Creating a Custom Object Style

• In the creation of a theme you  use only colors from the Theme Colors palette (step 1 for a custom theme). It is not possible to change the default theme, nor the color palette from the welcome screen (for global changes). That choice is missing in the Preferences. For that reason, you need to have the proper theme set as default theme, have the correct Theme Colors palette applied to it. For the example workflow here I set Windswept (packaged with CP2019) as default theme, and kept the custom Color palette linked with that theme. That color palette looks like  in this screenshot (only the main colors):
  

  

  The bright red (color 6) would be excellent as stroke color for the custom Highlight Box.
  
  
• In the Object Style Manager, I find the object ‘Highlight Box’ in the category Standard Objects.  This object has 6 default styles. The first labeled ‘…Blue’ is set as default style, but nothing is blue :).  In some other themes this highlight box has a light blue stroke. That is not the case in the Windswept theme, because backgrounds are mostly blue: stroke is white; fill is also white but with opacity = 20%. There is no transition. 
  

  

  I expanded the style (with the triangle) and it shows two states: Normal and Rollover. For highlight boxes however the Rollover state is not functional (yet). Same styles can be used for Rollover area (and Zoom area), where a defined Rollover state will be visible. For the Highlight box we focus on the Normal state only.
  
  
• Although I could edit this default style, I prefer to create a style with a more meaningful name. Use the Clone button to create a new style, and rename it to RedHighlight. In the screenshot see the changes. The color dialog box will always show the Theme Colors panel (highlighted first button) since we start from an existing Theme:
  

  

  Stroke width is increased to 3px, the option 'Fill Outer Area' is checked and set (visible in the Preview) to a 20% dark gray from the tints in the Theme Colors palette.
  
  
• If you want this custom style to be used whenever a highlight box is inserted, check the option ‘Set as Default’. The Style will get marked in bold (Style box). You still have the previous 5 styles available to be used manually.

Tip: Same styles are also available for Zoom area and for Rollover Area, as well as  the new custom style, which will however not be the default style for those objects. 

Promoting style to Default style

In the screenshot Default styles are indicated by the Bold attribute. You can change that default style using the checkbox ‘Set as Default’ which was my action for the new custom style. Be sure to put the style you suppose  to use most as Default style. I often see themes where a lot of new custom styles are created, either on the stage from example, or by cloning an existing style, but the original styles are left as default styles. Themes are meant to save time, not to increase the amount of work by having to change the styles for individual objects. 

No panic needed when you forgot to save the theme under a custom name, but have edited a default packaged theme. You can always re-install the original themes from the original Gallery/Layouts folder to the duplicate folder in Public documents (Windows).

Promotion to default style can be done globally (as above) or project-based within an open project.

Cleaning up Styles

No one likes cleaning up! Sometimes the Styles list can become very long, and there is no way to rearrange its sequence (to have the most used styles on top). 

When a style is selected in the Style box, the Delete button will become active(look at the last screenshot where the RedHighlight is selected as style). Don’t hesitate to delete what you’ll never use. That may be default styles from the original theme as well (you did see how to restore the theme above).  

It is not possible to delete states (as for the Highlight box, where the Rollover state is unused), nor objects. You always have to keep at least one style for each object, and that will be the default style. If you try to delete a custom default style, you will be asked which style you’ll prefer to use as default style before the style is deleted.

When do I use OSM?

To check style components

Set a global object style

Change Font for all styles

If the company has a style sheet,it will often include one or more specific fonts. There is no quick way to replace the used font in the theme (often Trebuchet in CP2019's packaged themes) by a company font. In that case I use the OSM and browse through all objects using text. Captions and Shapes do need the change, but if you only use Shapes as text containers, you can of course skip the Captions.  Some other objects use text as well: buttons, TEB’s, and quite a lot of Quizzing objects. Some styles with text will appear both under Standard Objects and Quizzing objects. 

Beware: if you use Learning Interactions, do not forget that they do not ‘obey’ to the OSM! You will have to change the fonts there as well. Some interactions offer the possibility to switch to the Theme Colors, but that is not available for other components of styles.

What is different for Responsive projects?

In a last post I will specify what is different in Responsive projects, both for object styles and the Object Style manager. Both workflows: Fluid Boxes and Breakpoint Views will be treated in that third article.

Why?

This short blog is meant for newbies,  and is (again) due to what I hear/read on the forums, during (intermediate) training and consultancy job. Recently I tried to answer users in two threads concerning themes:

Change color in theme

Main Master Slide

The last one reports a serious bug in the Help documentation, the first one is more a lack in that documentation. It is a pity that the Help is not something you can cout on, a problem which is not new at all.  I started blogging about 10 years ago because of lacks and bugs in the Help.  An “amazing application which is Adobe Captivate” (a quote of a fellow ACP who is not present in this portal) deserves better!

I’ll try to answer those two questions here, and offer extra tips for Themes..

1. Theme Colors

Editing or developing a theme start with the colors which will be used consistently in that theme.  Each theme  packaged with Captivate  has a Theme Colors palette which is labeled with the same name as the theme.  As described in an old post, that palette has 10 colors + 5 extra tints for each color. It is always available in the Color Dialog box as first button, A well designed theme will use only those colors: backgrounds, fill and stroke colors, font color etc. Most Learning interactions have a button to apply the Theme Colors as well.

If you want to change one color in the palette, as asked in the mentioned forum thread:

• Rename te original theme (see screenshot: orignal was WindSwept, I renamed to MyWind) in the box with the Palette
• Click the Customize button: the 10 colors will appear in a dialog box.
• Click the color you want to change, you can use the Swatches palette, or the Color Wheel (where you can type in the hexadecimal code of the color or the RGB numbers).
• When finished, confirm using the Save button

Warning!

I already mentioned that the theme has to be well designed, only theme colors should have been used (is not always the case). Moreover no object style can be overridden (+ sign in the Style field) because for those the style will not change.

Another problem are the backgrounds. In the screenshot you see one of Captivate’s default themes, using several bluish colors (first three in the palette).  Those colors appear also in the backgrounds of several master slides: Title slide, Blank slide, etc You’ll find those backgrounds in the Library as…. images! That means they will not change automatically when ou change one of those bluish colors. That will only happen for the colors when they are used in object styles: fill of a shape, stroke of a shape etc….

As I wrote already multiple times: do not rely on names of the colors, they nave no meaning. In the theme mentioned above, the first color (Title) is never used for any title.

2. Main and other Master Slides

User did read this in the Help documentation, quote

“The main master slide is the first slide in the Master Slide panel. The name of this slide is the same as the name of the theme. Objects and background color of this master slide appear on all other master slides. Each theme has one main master slide.”

This is indeed not fully correct, text obviously was never upgraded since version….6. First, second and last sentences are OK, but not the one with the bold text.

2.1 Color Main Master Slide

Have a look at this screenshot, where I show the Master Slide panel in front of the Main Master slide:

The name of the main master slide is indeed the name of the Theme (it is a custom theme based on WindSwept). The main master slide has a solid white color as background. There is NO global project background, the used background is ‘Custom’, and that means that you can have a solid color, a gradient, or a custom image/texture. Those are the same options as for a shape fill.

You will see that the label is not appearing in the Properties panel. You can add a label but it will be added to the original name (MyWindSwept), not replace it.

None of the daughter master slides has the white color as background. It may not be very clear, but Content02, Conter07, Conclusion and the Quizzing Master slides also have a solid color background, however it is light grey, not white. All master slides in this theme  use a  ‘Custom’ Background. Look at the Properties of the MyContent master slide

You see that the Background is Custom, which means that the color of the Main Master slide is not inherited. In this case the background is fille with an image from the Library.

To inherit the color of the Main Master slide background, the Background has to be set to ‘Master Slide Background’. Here is a screenshot of the Pearl theme (default theme if you didn’t change it), which has originally a gray scale Color palette. I changed the background of the Master Slide (which is also set to Custom) to a Solid color, light green. You see here the Properties panel of the Title master slide, which inherited that color. It could also have been a gradient or even an image/texture, would have been inherited as well for master slides set to ‘Master Slide Background’.

Conclusion

Summarizing about background color main master slide::

1. Project Background is always an image which can be imported from the Library or from another location.
   
   
2. Master Slide: where it will inherit the background of the Main Master slide. That can be the Project Background or a Custom Background (solid color, gradient, image/texture). It if is the Project Background, the result of ‘Master Slide’ and ‘Project Background’ is the same for a daughter master slide.
   
   
3. Custom: which can be a solid color, a gradient or an image/texture.

It is clear that this sentence in the  Help text ‘background color of this main master slide appear on all other master slides’   is iwrong.

Warning: identical to the one under Theme Colors. If you use images as background, you’ll have to edit them separately when changing the Theme Colors palette, their colors will not change automatically.

2.2 Objects on Main Master slide

In the first screenshot you see two system variables on the main master slide: at bottom left the name of the author, bottom right the slide number. Those objects are not part of the background, since they have to be generated on runtime.  You could also have shape button (like a Next button) on the main master slide.

They will be inherited on master slides, which have the option ‘Show Main Master Slide Objects’ checked off. In the screenshot of the master slide ‘MyContent’ you see those objects appearing, and the option (highlighted) is checked. On the contrary, the Title master slide for that same theme is not showing those objects:

Usually in the packaged Captivate themes both Title master slide and Blank master slide will not show the Main Master slide objects. Quizzing master slides can show them, but in many instances it would be better to turn them off. Be careful with the Blank master slide: it is meant to be used for PPT import, and for Software simulations.  It is not recommended to have extra main master slides on them.  In the WindSwept theme the Blank master slide has an custom image background, which is very strange, not at all the case in most themes.

Conclusion: 

About the objects on the main master slide, the Help text “Objects …. of this master slide appear on all other master slides” is wrong.

Themes and project types

Be careful when editing/creating themes because you have 3 different types of projects and you need a theme of that type:

• A non-responsive theme cannot be used for responsive projects with Fluid Boxes, nor for responsive projects with Breakpoint Views.
  
  
• A responsive theme with fluid boxes (as are most included themes in Captivate, can be used for a non-responsive project, the fluid boxes will be ignored. However be careful: if you edit that theme and save it, you’ll not be able to use it for a responsive project anymore.
  
  
• A responsive theme with Breakpoint views is not included with Captivate. You need to check  at least the object styles where text is used, because they need a font size for each breakpoint. You can use it for a non-responsive project, with the same restriction as above when saving the theme.

Some more links for Themes:

Themes and Templates

Fluid-boxes and master slides

Fluid Quiz Slides

Editing/Repairing Themes

Object Styles in Themes

Intro

A while ago I posted a blog comparing the use of a Theme for consistent design of a project, with the older Template workflow (which is buggy in the recent versions):

What's in a Theme/Template?

I always start any project by the  creation of  a custom theme, starting mostly from the Blank theme (has the minimum amount of master slides needed for a theme). More recently I offered some tips in Themes Q&A

Due to my past as civil engineer, I see a theme as the structure of a building :

1. Theme colors palette (see Theme Colors) is the foundation. Palette is independent on type of theme: whether iit is non-responsive, responsive with fluid boxes or with breakpoint views.
2. Object styles, the topic of this blog are the pillars (vertical structural elements). For Breakpoint views you need slightly different styles for objects containing text.
3. Master slides are the beams (horizontal structural elements). As in a building there is a lot of interaction between beams and pillars, together they are the structure You will often going back and forth with object styles while creating the master slides. Master slides depend on type of theme.
4. Can be considered as optional: Recording defaults and Skin, depending on the project if you need them

Now you are ready to complete the building by filling in the walls, floors…. In Captivate we call them slides.and objects.

Captivate’s Object Styles

Contrary to a word processor, Captivate has no Text styles as you know from MS Word:   a bunch of paragraph styles (includes leading, space before and after paragraph, indents, bullets….) and word/character styles. I will post a future blog about the Object Style Manager where you’ll find all object styles used in Captivate’s themes. This blog will show some screenshots taken from the OSM, because you can see what is included in each style:

• Caption style: includes indeed the font, font size, eventually attributes (bold, italic, light), font color and leading, alignment but also the type of caption, margins within the caption, and the transition type. In the themes packaged with Captivate the caption type is mostly set to transparent, but that was not always the case in older versions and doesn’t need to be always transparent. It comes closes to what you know as text styles, but still... transition is unknown in MS Word..
  

  

• Text Entry Box style: has the formatting of the text but also the Fill (color and transparency) and Transition setting. You cannot edit the stroke, not included.
  

  

• Button style: is more complicated, includes formatting of 3 Inbuilt states (Visited, 4th state is not included).  In the screenshot, which shows a so-called 'Default style' (see later)  you see that when you insert a button (Interactions, Button) in these settings a Transparent button will be inserted. For each state  the text formatting of the label is defined (in case of a Text or a Transparent, button. That setting will not appear for an Image button which cannot have a label. For the transparent button , style includes also the fill (here a gradient, with full opacity), stroke (color, width and style) and the corner radius. Formatting for the two other types is much more limited.
  

  

• Smart Shape style: the most versatile object in Captivate can be a text container, hence the text formatting similar to captions. SInce it can also be used as a button, you can define the formatting of  the same InBuilt states as for the Transparent button. The corner radius is missing  You can choose a rounded rectangle as start for a shape button, and it has a yellow handle to edit the corner radius.
  

  

Terminology

It seems useful to list up some important terms concerning Captivate's Object Styles:

Default Style: Previous screenshots showed styles set as ‘Default style’. The checkbox to mark a style as default,  is automatically dimmed in that case.  When you insert an object of that type, it will automatically be inserted with that default style. The other styles, not marked as default style, can be used but you’ll have to change them manually after inserting the object. Here is an OSM  screenshot showing the presence of 3 possible TEB styles. In a previous screenshot I had the Yellow Fill set as default style, this is one of the other styles that can be used:

Overridden Style: If you edit some formatting after inserting an object with its default or manually changed style on the stage, a + sign will precede the style name as you can see in this screenshot (I changed the transparency of the fill and the font size). This is labeled as an ‘overridden style’.

Using overridden styles is considered bad practice in any style-based application. Why? It means that if you have to make changes later on, this object will not be touched anymore. Maybe your client/boss wants to have another font for the TEB? If this is the only TEB in the course, you can find it and edit this TEB in place, thus creating an overridden style. When dealing with more TEB’s it is much easier to edit the object style itself (see later). The edited style will be applied automatically to all TEB’s in the course, exception are those with an overridden style.

Style menu in Properties panel : many sections in the Properties panel have a so-called ‘hamburger’ (or hotdog) menu button. The Styles part has such a mneu button. In this screenshot you see the style menu expanded for theTEB with the overridden style (previous screenshot). You  can choose to create a New style (if I want to keep the default style for later to be inserted TEB’s) or Save the changes to the existing style if you want all the TEB’s in this project to have this edited style. There is also a Reset Style to revert to the original style in this menu.

The option Apply this style to…. is a bit confusing for this situation. Suppose you have another TEB using the Default TEB Blue Fill Style you can use ‘Apply this Style to all objects with Style Default TEB Blue Fill, but it will be the original Yellow style that will be applied, not the overridden style. I would prefer to save first the edited Yellow style.

Creation of a Custom Style

You can create a style in the Object Style Manager, as I will explain in a later blog,  but it is easier to use the ‘from example’ workflow. Step-by-step:

1. Have a quick look at the Object Style Manager to see what is included in the style for your object type. I showed several screenshots above. It is not always clear from the Properties panel which features are included in the style. Example: Transition is included in some styles, not visible in the Properties panel but in the Timing Properties panel.
   
   
2. Insert an object of that type on the stage. It will be inserted with the style set as Default style.
   
   
3. Edit the features which you detected under 1. until you have the wanted look. That is easier to verify on the stage than with the tiny Preview window in the OSM..  Do not forget the states (Normal, Rollover, Down) for interactive objects. The style field (Properties) will show the +sign to indicate the overridden default style.
   
   
4. Open the Style menu (hamburger) and choose the option ‘Create New Style’
   
   
5. Give the style a significant name and confirm with OK
   

   

The style will appear in the Object Style Manager. But you don’t have to use the OSM for these actions

• Set the style as Default style: is possible from the same Style Menu. Beware: for the example of the shape button, I would not set this as the default style because all shapes would take on that style. Really hope that we can have a default shape button style which is different from the default smart shape style in a future release.
  
  
• Apply this style for all objects with a specific style. This is a workaround I sometimes use: for shape buttons I don’t use the default smart shape style, but one of the other styles (like a hint shape style if I don’t use it in the project) as long as I am not sure about the wanted button style. When I decide to create the definite style for all shape buttons, I can use the Apply this style to replace all those ‘hint’ shape styles by the new shape button style.

This problem only exists for shape buttons. Most other object types are not used for two different goals.

If you want to include features which are not part of the style in a quick way, use the duplicate functionality (CTRL-D). It will keep not only the same style in the copy, but all features, including eventually attached advanced actions.

Third element of your theme (structure) will be the master slides. Advantage of defining object styles before the master slides is that the inserted objects on the master slides will have the new default styles. That can save time.  Just one example: if you use shape buttons on master slides, you will not be able to use 'from example' workflow to create a style for those shape buttons. Reason: the State view cannot be opened when on a master slide, and you need to set up the states. For object styles with a Transition feature, you'll not be able to define them on the master slides neither, because you miss the Timing Properties panel for them.