Tips for 'Fluid' Quiz Slides

Intro

When publishing my first reflections on Fluid Boxes work flow versus Breakpoint View work flow I didn't mention my expectations for a smoother creation of Quiz slides using FB's. In my experience with responsive projects in previous versions, the most frustrating part were those (damned?) quiz slides. You are probably aware of the very strict rules to honor for quiz slides: need to be careful with 'embedded' objects which include functionality that can be broken. Styling quiz/score slides is tough even in normal (blank) projects and turns into a nightmare when having to do it for up to 5 breakpoint views. Every post I published about quizzes gets a lot of visitors. Many questions about quizzes are posted on the forums as well. This explains why I listed Quizzes as second most important stumbling block for Captivate users in this article.

The present post is not (yet) the promised upgraded version of the most popular article I ever wrote about questions, only a summary of tips I discovered while exploring the Fluid Boxes work flow for quiz slides (score slide will be subject of a later post). If you are new to Fluid Boxes, please take some time to read the articles posted by Zeeshan. Up till now, he published 3 but promised more on their way:

Using Fluid Boxes - Knowledge Facts 3

Quizzing Master Slides -Setup Fluid Boxes

All quiz slides, and the score slide, are based on a dedicated Master slide. Master slides have embedded objects (no individual timeline): Title, Question, Answer Area with Answers, buttons, feedback messages, progress indicator to mention some. The functionality of the quiz is embedded in those master slides (two-step Submit process, updating quizzing system variables, tracking attempts on question/quiz level, review and retake on score slide, etc). 

if you choose the Fluid Box work flow for a responsive project in Captivate 2017, the included themes will also have Fluid boxes on the quizzing master slides. There is one exception: the Likert master slide has no Fluid Boxes because Likert questions are not supported for responsive projects. Each theme needs to have at least a main master slide and 6 daughter master slides. Besides the Blank master slide which is essential for Software simulations and PPT-import, the other 5 daughter master slides are all about quizzes: MCQ,T/F,FIB,Sequence; Matching; Hotspot; (Likert = not supported in responsive); Result. 

The Setup for the quizzing master slides is common for all included Themes. I will explain extensively the most used master slide (MCQ, T/F...) and summarize only the differences for the other quizzing master slides. The score slide, which causes a lot of issues at this moment, will be explained in a future blog post, hoping that some of the problems will already have dissipated by a patch?

Setup Fluid Boxes in MCQ,T/F,FIB,Sequence Master slide

This is the most used master slide for sure. You have the Root fluid box (ID/ FB_8) containing 6 child Fluid Boxes. The ID's I mention for the Fluid boxes are from the master slides. Apparently the ID has to be unique as usual. When a quiz slide is created based on a master slide the ID will change: 3 characters will be inserted, referencing to the slide number. Example: FB_MS5_10 is the fluid box for a question based on the MCQ master slide, originally on slide 5. Beware: that ID will not change when you reorder the slides, which can make it quite confusing if you are used to reorder a lot. The Root fluid box (ID/ FB_8) is set up this way.

  • Flow: Vertical (has 6 child fluid boxes)
  • Wrap: Squeeze in a column , which means the child fluid boxes will never be rearranged. the 80% has no consequences, because stretch to fit is activated.
  • Horizontal Alignment: Center with Stretch to fit activated
  • Vertical Alignment: Space around
  • Padding: none, which means the space around has no effect on the child fluid boxes

The 6 child fluid boxes, from top to bottom,have this content and setup:

Title Fluid Box (ID: FB_9)

  • Flow: Horizontal - has mostly only one item, the title shape or caption
  • Wrap: Wrap to Next Row
  • Horizontal Alignment: Space around with 'Stretch to fit' activated
  • Vertical Alignment: Middle Align with 'Stretch to fit' activated
  • Padding: none, which means theoretically the title could touch the left and right side of the fluid box/slide. Personally I avoid that by adding a small horizontal padding (5-10px).

Tip: in theme 'Clear' the title overlaps with a design element. You can change the Vertical alignment to Bottom, and eventually increase the height of this first child fluid box to fix that. Another solution is to turn off that design element by unchecking the option 'Show Main Master Slide Objects.

Later on you'll see that the Advanced answers feedback messages will cover up this FB. Be careful when resizing and moving those messages. You could mess up the arrangement of this Title fluid box. Best way is to unlink those messages from the FB before touching them.

Question Fluid Box (ID: FB_10)

  • Flow: Horizontal (but has mostly only one item, the question shape or caption); text in that container is vertically aligned to top, to allow wrapping of longer text questins
  • Wrap: Wrap to Next Row
  • Horizontal Alignment: Space around with 'Stretch to fit' activated
  • Vertical Alignment: Middle Align with 'Stretch to fit' activated; for the inserted text placeholder text is aligned at the top; you could eventually change that to middle as well if you don't have long questions.
  • Padding:  50px horizontal (text placeholder is indented from left and right side of the slide/fluid box). If the focus is on smartphones, this padding could be too big (lot of smartphones have only a width of 320px).

Answers Fluid Box (ID: FB11)

  • Flow: Horizontal 
  • Wrap: Wrap to Next Row
  • Horizontal Alignment: Space around with 'Stretch to fit' activated
  • Vertical Alignment: Middle Align with 'Stretch to fit' activated; 
  • Padding:  50px horizontal (placeholder is indented from left and right side of the slide/fluid box); 20px vertical, the inserted answer area doesn't touch the top and bottom of the Fluid box. Comment about this being maybe too much for small screens is valid here as well.

Tips: the individual answer placeholders cannot be resized in the master slide (as is the case since CP6). They are designed to have only one line (contrary to the question placeholder which has space for multiple lines). If you have answers that are pretty long, font size will be decreased to squeeze the answer in the available space. If answers have different lengths, this could result in  different font size for the answers which is certainly not wanted (see image below). Here are two workarounds:

  1. If you don't mind the font size to be decrease but want the same font size for all the answers on a slide, check the option 'Enable Uniform Text Scaling' in the Properties panel for the slide. Eventually you can decrease the mininum font size which is set pretty high in 2017 (14p, minimum was 10p in previous versions).

  2. If you don't want to have the font decreased, but prefer text wrapping, you have to resize the individual answer containers on the side (not possible on the master slide). Start by increasing the container height for the longest answer, use the Align menu ro resize all to the same height, move them as far away from each other and Distribute vertically. Eventually you can decrease the vertical padding to have more space, and/or make this Fluid Box higher, which will decrease the height of the other boxes. This work flow is certainly necessary if you allow shuffling of the answers. Whenever the answer cannot fit in the container anymore the usual icon 'read more' will appear. 

In this image you'll see the result: Default setup on top, in the middle the result when 'Enable Uniform Text Scaling' is activated and at the bottom the same answers after manually resizing, moving and distributing vertically.

If your goal is a good experience on smartphones, I would recommend to reduce the padding in this Fluid box: 2x50px horizontally is a lot if the browser has only 320px in the width. 

Messages (ID: FB_15)

Since the Feedback messages are all in the same location, this had to be a Fluid Box of the Static type to allow overlapping objects. 

Issues: The usual problem for editing those messages remains: to edit a message you have to get all other messages out of the way, since they are embedded (they don't have a separate timeline). which means you cannot hide them on the stage  If the messages are the same on all quiz slides, you can edit them - before inserting quiz slides - in Preferences, Quiz, Default Labels (same for the button labels).
However if you want individual messages on the quiz slides themselves, I used to move each message to be able to edit the one below. Problem is that they will be moved over another Fluid box, and that means you cannot select them anymore.  I thought to use the Arrange menu but.... it is not available on quiz slides, only on the quizzing master slides! Not available in the right-click menu, dimmed in the Align toolbar. I tried to move the message in the scratch area (horizontally) for editing, but with the focus loss when zooming in, this is a real pain. Best way I detected (time consuming) is:

  • Edit the top most message in place (mostly Correct); since most of the messages are in a (semi) transparent shape/caption, increase the Alpha to cover up the other messages for editing.
  • Move the top message out of the way (I use shortcut keys like Shift-Up)
  • Edit the next message (same for Alpha as for the first one)
  • Move it also out of the way
  • Do not forget the Retry message if you have multiple attempts
  • When finished, use 'Reset Master Slide' to move all the messages back in their Fluid Box (FB_12). Since the object styles will be reset as well, the Alpha of the shapes/captions will be reset to the initial value. Beware: be careful not to override object styles in this case (indicated by + sign next to style name).

Here is some good news: if you choose multiple Failure messages (up to 3 still) because you have multiple attempts, those extra Failure messages (#2 and #3) will appear over the Answer FB. Contrary to messages moved over that box, these can be selected and edited easily. When previewing/publishing the slides all Failure messages will appear in the same location although being in different locations on the stage.

When using Advanced Answer options for MCQ, one correct answer, to show feedback messages for each answer, another problem appears.The text captions for the feedback are very small, and in the top right corner (over the Title Fluid Box), slightly off stage. Depending on the number of answers, some will appear lower, over the Answer Fluid Box.

Buttons Fluid Box (ID: FB_16)

  • Flow: Horizontal 
  • Wrap: Symmetrical, which is almost the same as One Row. Only when the number of buttons is even, will you have a rearrangement in two rows.
  • Horizontal Alignment: Space around with "Stretch to fit" not activated
  • Vertical Alignment: Middle Align with Stretch to fit not activated
  • Padding: 0px horizontal and 2px vertical

The maximum amount of buttons is 6: two Review navigation buttons, Clear, Back, Skip and Submit. If you are used never to insert Back and Skip buttons (which is my normal setup) you can better increase the font size (now 20px) to 28px or even 30px. If the option 'Enable Uniform Text Scaling' enabled, the label will rescale nicely and especially the small symbols << and << on the Review navigation buttons will be readable even on small screens. The buttons don't have the option 'Maintain aspect ratio' enabled, which means that the width only will be resized.

Progress indicator Fluid Box (ID: FB_17)

  • Flow: Horizontal 
  • Wrap: Wrap to next row.
  • Horizontal Alignment: Center Align "Stretch to fit" not activated
  • Vertical Alignment: Middle Align with Stretch to fit not activated
  • Padding: none

This fluid box has only one text caption with the progress indicator, in font size 12p which is smaller than the minimum font size. The text will never rescale even if 'Enable Uniform Text Scaling' is activated.

Setup Fluid Boxes in Matching Master slide

This master slide has one extra child Fluid box for the Column Titles. The Answer Fluid box is bit different. The ID's of the fluid boxes on this master slides are:

Root Fluid Box FB_18

Title Fluid Box FB_19

Question Fluid Box FB_20

Column Title Fluid Box FB_21

  • Flow: Horizontal, has two text placeholders for the column titles
  • Wrap: Squeeze in a row.
  • Horizontal Alignment: Center Align "Stretch to fit" not activated
  • Vertical Alignment: Middle Align with "Stretch to fit" not activated
  • Padding: none
  • Answer Fluid Box FB_22: this Fluid box has now two answer areas, linked by the line indicators
    Messages Fluid Box FB_23
    Button Fluid Box FB_24
    Progress Indicator Fluid Box FB_25

    Setup Fluid Boxes in Hotspot Master slide

    This master slide has only 5 child Fluid boxes, because Question and Answer are now in one box. Moreover it is a Static box, which means overlapping objects are possible. These are the ID's of the boxes:

    Root Fluid Box FB_26

    Title Fluid Box FB_27

    Question Fluid Box FB_28: static fluid box, will contain the image with the hotspots

    Messages Fluid Box FB_29
    Button Fluid Box FB_30
    Progress Indicator Fluid Box FB_31

    General tips

    I would recommend to activate the option 'Enable Uniform Text Scaling' for question slides in most circumstances. Since this option is at slide level, it will be valid for all Fluid boxes on the slide. 

    Avoid to override object styles, that is a general rule but even more necessary for quiz slides. It will happen that you want to reset the Master slide and in that case all styles will be reset to the Default style. If you want to change a style, do not hesitate to save the edits to those default styles. 

    Preview is never WYSIWYG certainly not when you are using the slider during preview to see the changes for other screen resolutions. Example: it often happens during Preview that the text in long answers (even when manually resized and redistributed) seem to be cut off for small screens; when published all looks mostly a lot better. 





    Challenges for Starters

    Intro

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

    Challenge 1: Timeline

    Why?

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

    Resources

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

    Pausing the Timeline, why and how?

    Captivate Timeline(s) in cptx-file demystified

    Introduction

    Color codes and shortcut keys

    Captivate Timeline in cpvc (Video Demo)


    Challenge 2: Quiz

    Why?

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

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

    Resources

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

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

    Question Question Slides - part 2

    Knowledge Check Slides

    Drag&Drop tips

    Drag&Drop Captivate 9 - InBuilt states


    Challenge 3: Theme

    Why?

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

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

    Resources

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

    What's in a Theme/Template?

    Theme Colors


    Conclusion

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








    What's in a Theme - a Template?

    Intro

    When trying to help Captivate users, I often bump onto confusion between themes and templates. Same confusion can be found in many training schedules and books. There has been a lot of evolution in Captivate since versions, slowly but steadily. Those are not the big hype features that were emphasized everywhere. You know that I often appreciate more the hidden gems, which help any developer to save time and frustration. This article will explain how I am creating custom Themes, and also why I am using Templates a lot less than in earlier versions of Captivate (before version 6). 

    Theme versus Template

    The goal of a Captivate theme is to keep a consistent design throughout your project. It can be 'applied' to any project, even after creation. Although most themes will be created for a certain resolution, when designed carefully it is not necessary to apply it only to projects with the same resolution. When you apply a well designed theme to a project, the 'look' will change immediately and you'll not have to edit the design a lot afterwards. A theme is saved in a file with extension cptm. You can have themes for a normal (blank)  or for a responsive theme. Captivate 8 and 9 both have several themes in the box, most of them being responsive themes. They show up as thumbnails when you click on the Big Button 'Themes'. Those Captivate themes are stored in the Public Documents, under the subfolder 'Layouts' of the 'eLearning Assets', at the same level as the Theme Colors palettes.

    You can store your custom themes in this folder or wherever you want. The Thumbnails view (under Themes button) has a Browse button which allows you to navigate to any folder. I will mostly save a custom theme in the project folder when working for a client. But you see in the screenshot that I have a custom theme (CP8Theme) in the default folder. That folder is a copy of the original Layouts folder in the Gallery under the Captivate installation folder. If you ever have messed up one of the themes in the Public documents, you can restore it from that original folder. If you delete the whole Layouts folder in the Public documents, while Captivate is closed, on restarting the application a new copy of the original folder will be installed in the Public documents (see also my article: Keep your Customisation).

    To save a theme you need to use the Themes menu, not the big button 'Themes'. Use the option 'Save Theme as' if you started from an existing Captivate theme.

    template in Captivate has to be chosen before you create a project. You have to use the option File, New Project, Project from Template. This means that a template needs to have exact the same resolution as you want for your project. As for a theme, there is a difference between a template for a responsive, and one for a normal (blank) project. A template file has the extension cptl. When you create a project from a template, it will get the normal extension cptx. You can edit a template, and that will the only reason why you would save it again as a cptl. It is also possible to create a template from a normal cptx-file with the option 'File, Save As'. There is no 'reserved' folder for templates, Captivate has no included 'templates'. The term is often wrongly used: most Captivate 'templates' that you can find on the web, are just cptx-projects, not templates in the Captivate language. 

    When a template is saved, the used theme, preferences etc are saved with the template. However you can always apply another theme later on. 

    Components of a Theme

    It is rather important to know what exactly will be saved in a custom theme. . Remember: if you ever want to use that theme in a responsive project, be sure to create the theme in such a project. I will list up the components in the logical sequence to be followed when editing or creating a custom theme :

    1. Theme colors palette

    The start point for design consistency in a project is guaranteed by the consequent use of a Theme, which starts with the creation of a palette with 10 colors that will be used for object styles, master slides, skin, and within learning interactions. I have written some articles about the creation of a Theme colors palette:  Colorful 2015  and   Theme Colors. Beware: it is no longer possible to save an ASE file with Adobe Color (as described in the first article): that means that the Swatch Manager is not very useful anymore. My recommendation is to ignore the Swatch Manager and focus on the Theme Colors Palette, which is available in any Color Dialog box.
    When saving a theme (using the Themes menu), the used theme colors palette will be saved with the same name. In the mentioned articles you'll find a way to save a theme colors palette independently from a theme as well.

    2. Object Styles - Object Style Manager

    Most design-oriented applications have a work flow for creation and use of styles (Word, InDesign, Framemaker). All experts and good trainers will tell you to use styles, and to avoid overridden styles. Captivate is no exception in that world: it has a great Object Style Manager to be found under the Edit menu (or by using the the shortcut key SHIFT-F7). Object styles can be saved individually, have the extension cps, only useful in case you want to export/import such an individual style. In most use cases you'll save all the object styles necessary for a project in a custom theme, no need to export/import styles anymore as was the case before themes appeared in Captivate.

    If you are working on a responsive theme: first define the breakpoint views you want in the theme, before launching the Object Style Manager. In the styles you will be able to define the look for the breakpoints that are available in the project.
    Make some decisions about which objects you'll be using in the theme as well. Just an example: if you prefer using shapes instead of captions for feedback messages, capture messages etc you do not need to change all the caption styles. A similar situation exists for normal buttons vs shape buttons. 

    Some tips:

    • Use only colors from the palette defined in Step 1.
    • Do not hesitate to change one of the (grayed out) styles between brackets [Default...]. You can overwrite those styles, since you are working on a custom theme. Those are the styles that will be applied immediately when you insert an object. Another approach is to clone a style and set it as Default style. The problem is that you'll end up with tons of custom styles, which makes selecting the proper style in dropdown lists not easier. That is why I always change existing default styles. 
    • For buttons: the InBuilt states Rollover and Down are available together with Normal  for change in the OSM, do not forget to check/edit those states. This is valid for Text Buttons, Image Buttons and Transparent buttons.
    • For shapes: you cannot define a default style for text and another default style for buttons (too bad), but any shape style that you define should include InBuilt states (Normal, Rollover, Down) because any shape can be converted to a button.
    • Quizzing objects are in a separate category. Quiz buttons cannot be replaced by shape buttons (yet), but you can define an individual object style for each quiz button. Feedback captions can be replaced by shapes.
      Feedback captions and shapes not always use theme colors in the default Themes included with Captivate. Be careful: if you want to have consistent colors in your project, you'll need to check those styles.
    • It is not possible to define real Effects in an Object style. Only the 'old' Transitions can be defined.

    3. Master slides

    The Object styles defined in step 2 - at least the default styles - will immediately be applied to the objects on the Master slides.  If it doesn't look well, you can edit the object style and redefine it, while working on the objects in the Master slides (It can be done with the Properties panel). Be sure to make all added objects responsive (check all the breakpoint views) on the master slides. 
    Each theme needs at least 6 master slides (Blank Master slide, 4 Quiz master slides and a Score master slides), besides the main master slide, but you can create as many master slides as you want. You can add different type of placeholders on master slides, but be careful with the 5 master slides for Quiz: the embedded objects (without individual timeline) have a lot of functionality built in!

    Some tips

    • Use the new Rulers to assist you for designing master slides: Guides Rule!
    • If you ever will use the theme for software simulations: keep a real Blank master slide, because it is used both for software simulations and for PPT import. You don't want those slides covered up with other stuff.
    • Remember that shape buttons can be used on master slides, they can have actions. This can be a big time saver for custom buttons like the ones from these posts: Toggle buttons   and Replay slide button
    • Do not forget to label the master slides

    4. Skin

    Use the theme colors palette to customize the skin: playbar, borders and Table of Contents. You can even insert a logo on the TOC and eventually custom expand/collapse icons.

    5. Recording defaults

    This is only necessary for themes (also) to be used for software simulations. Although you have set up Default object styles in step 2, you still have to indicate which styles have to be used when capturing simulations. Just one example:
    • Create a default style for the highlight box in step 2: with a big bright red stroke and outer fill. Set it to display as default highlight box style.
    • Open Preferences, Recording, Defaults and check the default Highlight box style: it will still be set at the original default style in the original theme. Bit annoying, but it also allows you to save two different sets of object styles within a theme: one for normal slides, and one for software capture slides.

    Do not forget to save the theme (using the Themes menu)!


    Do you need a Template?

    I ask this question often everywhere: with all the design power and flexibility of a custom theme, why would you still need a template? Before themes existed, I used templates to be able to reuse variables and advanced actions (see: Template for reusing script). With the present version of Captivate, we have shared actions which I store in a separate project to be used as external library in any project. Variables, used in those shared actions, get copied automatically when the shared action is dragged into the Library of the new project.  When you copy an object, that triggers an advanced action, the action will be copied along when pasted into another project. 

    I used templates to have footnotes on each slide, pointing to the name of the project, showing the slide number and the total amont of slides. But now you can put them on master slides, using system variables or user variables that can be populated later on. 

    When would I use a template in Captivate 9? For courses that have several modules, where you want to have some slides in common, maybe have custom navigation/control buttons that cannot be put on the master slide, but need to be timed for the rest of the project. I would rarely use it to have placeholder slides, unless some team members need to have that assistance. Lot of placeholders have fixed object size, which can just be annoying. If you do have a lot of advanced actions (maybe variables), that cannot be replaced by shared actions, identical entries in Project Info, variables not included in shared actions: those would be situations where I would think about creating a template.


    Conclusion

    I hope this post did clarify the difference between a theme and a template. If you ever see somewhere my question 'Do you need a template', this will no longer be a mystery, right? 





    Colorful 2015 with Adobe Captivate

    Intro

    Color management in Adobe Captivate is improving slowly but steadily. Too bad: the Help documentation is not offering much explanation about color workflows at all. Have a look at what is explained about enhancements in Captivate 8.0.0 and 8.0.1 and tell me if this is sufficient? It is not for me, and I have a 25 years history as a Photoshop trainer. Do you know about the relationship between the Swatches panel, the Color schemes that appear in a lot of dialog boxes (not only for Fill/Stroke, but also in learning interactions), the Theme colors and the colors applied by default in the Object Style Manager, Master slides and Skin? Since many months I'm trying to figure out a good practice using the enhancements in Captivate 8. In previous versions I created color swatches in the scratch area (outside of the stage) to use with the color picker in order to achieve a consistent color use. That is at the least cumbersome compared with color management in applications like Photoshop and Illustrator.  Since October 2014 for those CC applications I'm able to create and use my Adobe Color palettes (ase), stored in the cloud, on any device and system. Adobe Color is installed on my tablets and smartphone, allowing to create color themes at any moment, often from a shapshot. That new sharing feature (Libraries) is not available (yet?) for Adobe Captivate. 

    In this first article I will try to find a way in the jungle of Captivate's color terminology and explain my present work flow to manage colors in a project by creating a custom theme color palette, starting with an 'ase' file created in Adobe Color. Let me know if you find this useful, please? In a second article focus will be on the use of Theme colors:  in object styles, master slides, skins and how to use them in (some) learning interactions (new in Captivate 8).

    Swatch Manager

    In the help you'll find a lot of screenshots where it is labeled 'Swatches'. But in CP8 title was changed to 'Swatch Manager'. I'm working in Expert UI, and have that panel always available in the right docking station, and make it floating when necessary. If you prefer the default newbie UI, there is a video in the Help that explains how you can open this panel: http://helpx.adobe.com/captivate/using/whats-new.html

    You'll see a pretty big color palette in the manager: 8 rows with 15 color/tints, starting with 12 gray tints. When you hover over a color you'll see its Hexadecimal code, top left. To see RGB or HSB codes of the existing colors is a lot more complicated. When a color is selected and you click on the color wheel on top, it is not the selected color that shows up (as I expected) but always the gray color #404040. There is no direct way to see other color codes of the swatches (like HSB, RGB), contrary to the Color Dialog box, that will show you the hexadecimal code and RGB (not HSB) when selecting a color and clicking on the Color Wheel.

    If an object is selected on the stage, you can use this Swatch Manager to apply one of the swatches as Fill or as Stroke color. For a text container (shape or caption),  in text editing mode, you can use it to apply a swatch as Text or Highlight (background color behind text) color. That is the goal of the radio buttons in the third row. Honestly, I never use that work flow, if you accidentally choose the wrong radio button, you'll change the Fill instead of the Stroke color. 

    The color picker and the color wheel (that will show HSB, RGB and hexadecimal code) on top (first row) are meant to add individual swatches. You will be asked to give a name to a new swatch, the default swatches have no names.

    TIP  

    When you customize the palette in the Swatch Manager, it becomes available for all open projects, it is not project specific. BUT!!! A big problem is that you cannot save the swatches with a project at all. Whenever you reopen the project, the default swatches palette will appear. Even when you put a PC in Sleep mode, after wake up the custom swatches palette has disappeared and you have to load it again. This is the main reason why I never use the Swatches Manager to edit colors in a project as I mentioned before, but use it only to define a Theme Colors palette. 

    The buttons in the second row are the most interesting!


    Captivate and Adobe Color

    I am using the Swatch manager to create a custom color palette, starting with an Adobe Color scheme. The buttons at the second row, from right to left, are:

    • Clear: this will delete all color swatches in the panel - not really necessary if you use Load

    • Reset: will revert to the original 8x15 palette, any added individual swatch, or loaded custom palette will be cleared

    • Save: the present palette will be saved in the Adobe Color format, extension 'ase' (Adobe Swatch Exchange). The default name will be the project name (you can change the name of course); this can be useful if you created a custom color palette in Captivate, for import into another Adobe applications like Photoshop.

    • Load: allows you to load an 'ase' file created in another Adobe application like Adobe Color. Captivate also accepts 'aco' (Adobe Color, have more information like Pantone color) files but I seldom use that palette format. You get a warning that the existing palette will be replaced by the new, but can still revert to the last option:

    • Append: will add color palette described by an ase or aco file to the existing colors.
    An Adobe Color ase file will typically have only 5 colors. There are a lot of tutorials around about using Adobe Color (formerly Kuler) and you can install it for free on any device or use it right from the web site. Just an example: you can create a color scheme from a logo in a quick way. The color scheme imported here into the Swatch Manager is based on my company's logo.
    Adobe Color is part of the Creative Cloud,with a CC subscription you'll have access to your personal color themes in the cloud from a lot of Adobe applications without having to save/load it using the ase file. Crossing my fingers that in the future this will also be possible for Captivate.

    In most cases, 5 colors will not be sufficient for Captivate to have a complete color scheme. The reason is that Theme color palettes in Captivate have 10 colors (see later). 

    Add swatches

    Second step in my work flow is to extend the palette to more colors (not necessary 10), that match the existing scheme. This can be done, swatch by swatch,  with the color picker or with the color wheel. Very often I will add white or a very light tint of one of the existing colors (using HSB), and a very dark one or black (if it is not yet present). A similar approach is used by the Tints in Theme colors (see later). Depending on the style chosen for the Adobe Color Theme, maybe you'll need a very contrasting color as well.
    In this screenshot you'll see how I used the green color to create a very bright one by keeping the Hue (H in HSB) but increasing the Brightness (B) to 100%. I added 3 swatches in total to have a palette with 8 colors.

    Color dialog box

    The color dialog box has 3 different looks, depending on the buttons on the top. The active look can be detected because that button will have a very thin black line surrounding it (maybe you'll have to get closer to the screen to see it). Those looks are, from left to right:

    • "Theme Colors": this look will appear by default if the selected object's Fill (or Stroke) has a default Object style using a Theme color, or if its color has been applied from the Theme Color palette.
      The top row shows the Theme colors (see later), under them you'll find 5 extra tints for each theme color. I regret that it is not possible to see the color code of any of the colors directly, it would be great if they showed up on hovering over a color (as hexadecimal code) or even better if you could have full info in the color wheel when clicking on a color. That is not the case (yet?). When exploring, I found that all tints have the same hue (in HSB), different Saturation and Brightness.
      At the bottom you'll find the colors as they were last used, last used color is the first in that sequence. Not that useful (my personal opinion). That row is dynamic, changes whenever you use another color.


    • "Swatches": this look will will appear by default if the selected object's Fill (or Stroke) color has been applied using the Swatches Manager.

      You will see the swatches in the upper section, and the 'last colors' palette at the bottom

    • "Color Wheel" will never show up by default. It allows you to choose a different color, either by picking it (click first on the right vertical bar to choose a hue, then you can change saturation and brightness in the big rectangle) or by entering a Hexadecimal or RGB code. Contrary to the dialog box for adding a swatch,  HSB is not available here. It also shows the last used colors.

    • "Color Picker" is the last button, no look on itself. It allows to pick a color somewhere outside of the dialog box. While moving the picker you'll see the Color Wheel showing up in the dialog box.

    A similar Color dialog box shows also up for the gradient stops when editing a Fill gradient, when customizing colors in the Theme Color palette, and in a reduced edition when customizing colors for Learning Interactions.

    Theme Colors 

    This new feature in Captivate 8 allows to change quickly the look of an existing theme (object styles, master slides, skin). Next week I will talk more extensively about those changes, because not every style will be edited automatically when applying a new palette of theme colors. My work flow, after having imported and extended a color scheme in the Swatch Manager, is to create a custom Theme color palette based on those colors. With that work flow, the color dialog box will always appear in its first look and provide besides the original Theme Colors a set of 5 extra tints for each theme color. Although there are by default 10 colors in such a palette, you can assign the same color more than once. More details about the use of the 10 colors will be provided in the next blog post.

    Contrary to the color schemes created with Adobe Color - ase file format - the Theme Colors are saved as XML files. You can find them in the Layouts Folder (under eLearning Assets in a public folder). The XML file is pointing to the RGB codes as you can see here:

    You could create a custom theme colors palette by creating new XML files, but you'll need a more exact number for RGB in that case then the one provided in Captivate. An alternative is this work flow:
    • Open the Themes list with the big button on the top bar

    • Click on the Theme Colors button, bottom right

    • Theme Colors dialog box, in its Basic view only gives you the dropdown list with color palettes


    • Click the Customize button (bottom right) to open a hidden part of the Theme Colors dialog box (with Basic button you can hide that part again)


    • You'll see the 10 colors, and clicking on a color will open the Color dialog box in its "Swatches" look. You can now customize that color. The names of the colors are not really relevant. Some colors are not really used in most themes but that is another story, which you'll discover in a later blog post.

    • When you are ready, first change the name of the theme: blue text 'White' can be edited; there is no Save as (at least I couldn't find it).

    • Click the Save button: custom Theme Colors palette is created and immediately applied to the present project. You'll find its definition in a XML file with the same name in the public folder I showed before.
    From now on you can use these theme colors for all editing. In the next blog post I'll explore how those colors are used in the current themes in Captivate, and how you can apply them to learning interactions. That post has now been published.

    Summary

    If you made it up till this paragraph, maybe you'll be confused by the Captivate Color Jungle?  Here is a short summary of the described work flow, to create Theme Colors from a custom Adobe Color scheme:
    1. Import the 'ase' file in the Swatch Manager, using the Load button

    2. Add more swatches to the default 5 colors of the scheme, using Color Wheel or Color picker in the Swatch Manager

    3. Save that extended scheme as an 'ase' file (because custom color schemes in Swatch Manager cannot be saved); that way you can reload it if necessary

    4. Open the Theme Colors dialog in its extended version, customize the 10 colors.

    5. Change the name of the default theme

    6. Save the custom Theme Colors palette

    Thanks for your patience, please leave your comments! May a lot of your wishes be fulfilled in 2015. I have some for Captivate as well :)