Intro

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

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. 

Intro

Play first!

Slide setup - preparations

Variables (for game only - more are needed for the start animation)

• v_dice: starts with an empty value, will get a random number between 1 and 6 (using JavaScript, see Playing with Numbers)
• v_counter: starts with a value=0 and will be used in the condition for the While loop to fix the number of repetitions to match the random number in v_dice
• v_stair: is a second counter, that will be used to keep track of the total number of steps done. It is needed to know when top is reached. The staircase has 16 steps. It also starts with a value=0.
• v_null: empty variable (see...) used to reset the v_dice variable after each use of the Play button
• v_roll: starts with a value=0, will track the number of dice rolls needed to complete the steps; that number appears after the top of the stairs is reached. It is a third counter.

For the EnterGame action a 6th variable v_anim is used.

Events and actions

1. Success event of the Play button, it will trigger an advanced action PlayAct
2. Success event of the Click box (Reset) it will trigger the advanced action ResetAct
3. On Enter event of the Game slide, which triggers the animations: EnterGame

ResetAct triggered by Click Box

PlayAct triggered by Play Button

Decision 1 'Random'  (standard action)

Decision 2 'EndCheck' (conditional IF action)

This decision checks if the character has reached the top by comparing the user variable v_stair with the total number of steps (16). Contrary to v_counter, v_stair is only reset to 0 when re-entering the Game slide (using ResetAct).

The Play button is hidden (to avoid disturbing the rest of the sequence) and the static multistate dice.

The original character disappears, is replaced by a group (character + click box + text balloon) with some default effects.

If the condition is not fulfilled (ELSE), which means the top has not yet been reached, the variable v_roll is incremented by 1. 

Decision 3 'ShowNumber' (While loop)

1. The number of steps taken by the image cannot go beyond the random number stored in v_dice (see first decision) and
2. The total number of steps done, stored in v_stair, cannot be greater than 16, number of steps in this staircase.

The commands to be done while that AND combination results in True are:

• Switching the static dice to the next state (see image of the Object states for this static dice above)
• Character gets on the next step (using custom effect StepUp, but that name has been changed by Captivate to the name of the effect it was based on 'RightToLeft'.
• The variable v_counter is incremented, it is this variable which is used in the first condition
• The variable v_stair is incremented; that variable is not reset by clicking on the Play button, is necessary to check if the top is reached (decision 2 'EndCheck').
  

EnterGame triggered by the On Enter event

Here is the Preview, let me know if you need more details

Questions?

Fire away. Creating this game was a lot of fun, 'while' exploring 'while' loops. Let your creative juices surge!

Intro

In my previous blog post about my preferred new features in Captivate 2017 I mentioned that the dialog box for Advanced Actions got a nice new layout. It is like new shoes, sometimes it takes time before they feel as comfortable as those old sneakers :). The focus of this article is on clarifying that new dialog box. Maybe you'll discover some unknown gems here as well? I recommend to download the example published file, or watch it (as SWF output) in that article if you are using a Flash enabled browser on a desktop or laptop. 

Structure - sections

The dialog box still has a fixed size (I wished it could be resized) and in this screenshot I indicate three sections, which I will explain more in detail below:

1. Section 1: with the Global control panel to the right, two dropdown lists and the Action name field. That field has to be filled in for an advanced action, but not when your goal is to create a shared action (see Dare To Share).
   
   
2. Section 2: has the control panel and navigation possibilities for the Decisions. Decision is the name used in the official Help documentation for those parts of the action that have the generic names 'Untitled_1'...(and function as buttons to navigate to a decision). When opening the dialog box a default number of 3 decisions will be present. You'll see in the screenshots that I am used to rename those decisions, certainly for an action with multiple decisions.
   
   
3. Section 3:  shows the type of decision, has the control panel for the Commands or actions. I prefer the word commands to avoid confusion. 

Nothing has changed at the bottom of the dialog box, with the buttons Usage (for the active Advanced action; for Shared actions you'll find the Usage button in the Library), Variables (which allows you to open the Variables dialog box if you want to create more user variables or check the available variables, you cannot delete variables when entering the dialog box from this button), Save as Shared Action... (will open the Shared Actions dialog box), Save or Update Action and the Close button.

Section 1: Global

On the first row you'll have:

• Create from: followed by a dropdown list. I call this the actions template list. It will have the default template 'Blank' on top, but also the name of all shared actions in the project. One of the possibilities of shared actions is to use them as a template for a normal advanced action. The list is not alphabetically ordered. You can type the first character to navigate to a template starting with that character.
  

  
• Control panel with 6 buttons
  

  
• Preview button: this button is still unknown by many users, and has become even more useful than before. In previous versions you could only see a conditional action in this Preview, but since the former standard actions are now embedded in the same interface, you can also preview standard actions. Here is a screenshot of such a simple standard action. Watch the indicator 'Execute Actions' which means that this is a standard action. 
  

  
  
  The biggest advantage of the Preview window is for advanced actions with a lot of decisions, because you'll get an overview of all decisions. However: the operators for conditions (like 'is equal to ') are translated in the JS and AS equivalents (== means 'equal to', && means 'AND"). Parts of the decisions are collapsed in this example (triangle buttons):
  

  
• Create New Action is the + button. It is no longer necessary to choose first of all the type of action, which was the case in previous versions.
  
  
• Import Shared Action: works only for shared actions (doesn't appear in the tooltip). That same button is to be found in the Library. Personally I always prefer to import (and export) shared actions from the Library.
  
  
• Export Shared Action: works only for shared actions (doesn't appear in the tooltip), same button as in the Library. 
  
  
• Delete Action will delete the active action
  
  
• Duplicate action: can be very useful. In some instances duplicate advanced actions are to be preferred to shared actions (maybe a future blog post).
  
  

On the second row in section 1 you see;

• Action name: compulsory for advanced actions. Be careful with names (sorry for the repetition), do not use names that are used for other items.
  
  
• Existing Actions: has a dropdown list, ordered alphabetically. You can type the first character to navigate to an action starting with that character.
  

  

Section 2: Decisions

This section has these items, starting at the top left:

• Control panel with 3 buttons (which now are not as tiny as they used to be in former versions):
  

  
• Add decision (+ button): the decision will be added after the active decision (its name is bold and blue, non-active decisions have their name in regular black font).
  
  
• Delete decision: active decision will be deleted
  
  
• Duplicate decision: very useful. Look above at the second Preview example where decisions 4 and 5 are very similar to decision 3 and have been created with this button.
  
  
• Previous/Next buttons: will navigate and make that previous or next decision active. These button have also 'grown up' :)
  

  
  
  
• The last group at the right is also a navigation panel, but will mostly be dimmed, unless you have more decisions that can fit in the fixed width of the dialog box as you can see in this global screenshot:
  

  
  
  Those buttons allow to navigate, but will not select the decision you are navigating to, the present decision will remain active. First button scrolls to the first decision, second/third to the previous/next decision without making them active, last button scrolls to the last decision. Personally I suspect that I will not use those buttons often because you have another way:
  
  
• Dropdown list with names of all the decisions is to be found under the triangle button at the end of the line with the decision buttons (which you can of course also use to navigate to a button). Of course, I am a labeling freak as you can see in the screenshot. When you select a decision from this list you'll navigate to that decision and it becomes active. Beware: the width of the dropdown list is limited, use short names or at least have significant characters at the beginning of the name. The list is ordered in the sequence of the decisions, you can use a first character to switch to a decision name starting with that character. More reason to label: if you leave all names at Untitled, you'll not get any help from 'U

Section 3: Commands

Select a decision by clicking on its button (Untitled_x as generic name or with a custom name). It is possible for each decision to choose its type: Standard, Conditional IF, Conditional While (loop). Look below for the differences. In this section you'll see several instances of the same control panel with a sequence of 8 buttons, some having a shortcut key (I use a Win system):

1. Add (CTRL-N) will add an extra line after the last line of that part
2. Remove (Delete): deletes the selected line(s)
3. Copy (CTRL-C) will copy the selected line(s).
4. Cut (CTRL-X) the selected line(s)
5. Paste (CTRL-V) copied or cut lines: will work in between actions as well, as long as it is in the same part (depends on the type of decision)
6. Insert (CTRL-I) will insert an extra line before the selected line
7. Move Up: the selected line(s), can be useful because of the importance of sequence of commands.
8. Move Down: the selected line(s), can be useful because of the importance of sequence of commands.

Type 1: Standard 

If you leave the check box before 'Conditional action' unchecked, you are ready to create a sequence of commands, formerly named a 'standard advanced action'. This screenshot shows such an action and before (under Control panel of the Global section 1 I showed a Preview of such an action):

This type has only one control panel, since there is only one part in this type: the list of commands that have to be done in the chosen sequence. As told before, you can select a number of commands and paste them to the clipboard. They can be used within the same advanced action, in other decisions of any type, but only in the so-called 'Actions' part. However you can paste the copied lines also to another advanced action, with the same restriction.

Type 2: Conditional IF

To create a decision of this type, you have to check the check box  before 'Conditional action', and choose the option 'IF' in the dropdown list as is visible on this screenshot:

This screenshot shows two parts of the complete decision, to see the last part 'ELSE' you have to click on the ELSE button at the bottom of the Actions part in the first screenshot:

The three parts of this action: Condition, THEN (is not mentioned like that, second part under the Condition, ELSE have a control panel as described before. You can always copy/paste between the Actions part (THEN and ELSE), but the Condition part is 'standalone'.

The first screenshot also shows the dropdown list, because you can define different conditions with AND (all conditions have to be fulfilled), OR or a combination of both (be careful with the last option).

Type 3: Conditional While (loop)

To create a decision of this type, you have to check the check box  before 'Conditional action', and choose the option 'While' in the dropdown list as is visible on this screenshot:

For the Conditions the situation is identical to Type 3 (AND, OR, Custom). This type has only two parts however: the Condition and the list of commands that have to be repeated as long as the condition part results in True. Two parts means two control panels, not interchangeable. But you can copy/paste from another decision or action, as long as you remain in the same part (condition or Actions). 

Conclusion

I hope this bit boring overview was useful for you. Promised: next blog posts will be practical, still busy with examples concerning Pausing the Timeline (focus on audio). Explanation of usage of the new While loop, with some examples is on the way as well.  Not to forget: the very useful integration of Go to Next/Previous State in advanced actions: you'll get a tutorial for a user controlled or non-controlled presentation as well.

TIP: for complicated actions with many decisions of all types, I add an extra character to the name: '..._S' for a standard decision, '...._C' for a conditional IF decision, and '...._W' for a conditional while loop. Easier to identify.

If you have questions, issues with the Advanced actions of any kind, please fire away!

Intro

About two weeks ago Captivate 10, now labeled Captivate 2017 was released. If you did visit my blog in the past, you know that I prefer to wait a while before posting my first impressions. My focus is also more on the non-hype features added in this release, I call them the 'hidden' gems. Some are mentioned in the documentation, some not.

Retina screen - software recordings

Captivate 9 was the first release which could be used on retina screens. However to record a Video Demo or a Software simulation you did have to edit the AdobeCaptivate.ini file. It was a solution, but bit cumbersome. After the capture process you had to edit that same file again to be able to use Captivate on that screen.

Tip: when using Windows 10 as OS, be sure to check the Display setting before recording a Video or a Software simulation. Bu default it will be set to a number higher than 100%. To record you have to reset it to 100%.

In Captivate 2017 this is no longer necessary, thanks to the Adobe team!

Advanced Actions enhancements

The Advanced Actions dialog box has been refurbished, and many will have emphasized that it is now easier to combine standard with conditional actions. Personally I don't find that so important because the condition 'IF 1 is equal to 1' worked as well, but much more has changed. I will post an article later explaining the changes in the dialog box more in depth. 

Enhancements Decisions

The existing functionality for multiple decisions in former versions has been preserved: adding decisions, moving decisions, duplicating decisions. The buttons got another look as you can see on this screenhot. There has been added two extra time savers,  if you have a lot of decisions in one advanced action:

• A dropdown list showing all decisions, and allowing you to navigate and select  a decision (Section 3, to the right)
• A control panel to scroll to the next, previous decision, and to the Last and First decision (Section 2, to the right).

Added commands

While loop

It has taken a 'while' but finally we have a looping possibility in Advanced actions, no longer needed to switch immediately to JavaScript. In combination with the command 'Delay Next Actions.... ' a lot is now easier in advanced or shared actions. Just one pretty easy example: create a countdown animation by combining a counter variable, a while loop, an effect and that Delay command. While loops can be combined with standard and conditional decisions as well.

Example movie

This short example has two slides:

• First slide shows a countdown animation and a progress bar. That slide is using the new While loop. Use the Start button to see the animation. When the animation is finished you'll get a Reset button. Here is a screenshot of the used action (Preview). .
  

  
• The second slide is using the "Go to Next State" command both for the text items and the images with the sticky character. Use the Continue button to go to the next state. When all states have appeared, you'll get a Reset button.
  

  

Test this movie out, if Flash player is enabled in your browser:

Typekit integration

Finally we have access to the Typekit Library (I'm used to it using CC applications)! In the example movie I used two fonts which I already acquired with a CC subscription (Fira Sans and Rosario), but Typekit also has a free license. You have to check it out, time to get away from those limited set of websafe fonts. When publishing with Typekit fonts, you'll need to add a domain name. For testing purposes you can choose for 'Local host'. If you are collaborating on a project, you'll have to be sure that the collaborators have a Typekit license as well. In that case when opening a Captivate project, Tk fonts will be synchronized on their system.

Responsive projects

A lot of articles and tutorials have been published already to acclaim the use of Fluid boxes in responsive projects. However I am also happy that the 'old' way with Breakpoint views is still available as well. If you upgrade a responsive project from a previous version (8 or 9), it will automatically show in the Breakpoint view mode, since the development has happened in that mode. After two weeks with Fluid Boxes in CP2017 I don't have enough experience yet to judge their full power. My first impression is that the kind of project will indicate (dictate?)  the choice of the development work flow:

• Fluid Boxes mode development will be a big timesaver for text-heavy projects. No need to check all text container styles for font sizes in all breakpoint views, no need to adapt the margins, leading to have text fitting in a text container on any mobile device.
  The continuous slider to see the changes for all possible browser resolutions is great!
  The design of a responsive theme with fluid boxes needs a different set of mind: how to set up the grid with Fluid boxes in content master slides. 
  The minus point of working with Fluid boxes is that you lose some control. My teacher's experiences learned me that you cannot use the same layout on a smartphone as you use for a laptop or even a tablet screen. That will make using Fluid boxes not appropriate for all courses. If you are a die hard designer, maybe you will not like the way that objects will be handled when the browser resolution changes? 
  Objects in a Fluid box are essentially in a 2D space: you cannot have overlapping objects. That is the reason why the Help explains that Zoom objects, Highlight Boxes and Click boxes are not allowed in a FB. The line object and mouse objects are excluded as well. However you can use them in a static Fluid box.
  
  
• Breakpoint mode development is a lot more work, but gives you more control for layout differences between devices and for design. You can have overlapping objects, and with the exception of the Rollovers almost anything can be used.

Tip: to switch to Breakpoint view development use this option in the Project menu:

The possibility to change a normal (blank) project to a responsive project is a much asked for, very useful addition. The reverse is not yet possible, responsive to non-responsive.

After some more experience with using Fluid Boxes, my opinion could change of course. Anyway I am persuaded already that the customisation of the theme is more important than ever. If you wonder why, maybe have a look at this article: 'What is in a Theme/Template?'

Update August

This week I discovered an undocumented enhancement thanks to a user on the forum: 

https://forums.adobe.com/message/5077114#5077114

When using the Submit All feature for a quiz, up till now it was not possible to localize this popup dialog box (style can be changed using the Object Style Manager):

Intro

Use Case - description

Scenario 1 

Standard Advanced Action ShowContent

Standard Advanced Action CloseContent

Scenario 2 

In this scenario aToggle button is used both for opening and closing the popup.

• You need an extra custom state for the popup button which indicates that it changes to a close button after having opened a popup:
  

  
• You'll need a variable to track the status: I will use v_visib, a Boolean, with value = 0 when the popup is not visible,
  and value = 1 when the popup is visible; since I used a shared action from an external library, that variable is created automatically.
  
  
• You'll need a conditional advanced action to be triggered by the Success action of the button:, this is the advanced action version created based on the shared action:
  

  
  
  

More Possibilities

An interactive video will often be spread over multiple slides, to offer navigation buttons to different parts of the video. It is not a problem to have the scenarios available on all slides: time both the button and the popup groups for the rest of the project, always on top.

I mentioned the possibility to group a close button with text, but groups with more objects are possible as well: image, shape, animations. Group all together, hide the group On Enter for the slide, and you only have to replace the single object in the scenarios above by the group. 

Turn the actions into shared actions, and keep them in a separate project. You can open the Library of that project as an external Library in future projects. Especially the toggle action, it will save time because you don't have to create the user variable.

Future use case, example of Pausing the timeline, will be about audio. It is more complicated because there are several ways to use audio in Captivate, perhaps I will need more than one post.

Intro

The origin of this article is (again) due to a forum question: "I want to rotate a triangle around a certain point" using the Rotation effect. It is time to explain the importance of the reference or registration point for objects in Captivate. In other Adobe applications like Illustrator, InDesign, Animate you have lot of control over that point. Look at this small screenshot: it shows that reference point in two different locations. Sorry for the low resolution, it is very small in Illustrator: left image shows the reference point in the left center, the right image at the bottom right. It was that last point that was wanted by the OP in the forum, but ... Captivate doesn't allow changing the reference point.

Reference points Captivate

The Reference/registration point in Captivate is used in different situations. In some situations it is located at the top left corner of the bounding box, in other situations in the center of the bounding box. The 'bounding box' is the rectangle surrounding the object or the object group. You'll see it during editing, when selecting an object or a group.  The visual presentation of that box on the stage is not looking always exact, it can look larger than it really is. The correct size (px) of that box can only be seen in the Options tab of the Properties panel. 

Location, resizing, rotating

The X and Y value in the Options tab are the coordinates of one of the registration points: the top left corner of the bounding box, as you can see in this screenshot:

The red lines in this screenshot are guides. The dotted square is the bounding box. The blue circle indicates the first reference point, which is top left and has its coordinates in X and Y in the Options tab. If you uncheck the 'Constrain Proportions' option, and increase the Width (W) or the Height (H) you'll see that the reference point will not move, increasing width will move the right border of the bounding box, increasing height will move the bottom border.

However, if you use the Rotation button on the stage, or the Rotation option in the Options tab, the used reference point is no longer the one indicated by the blue circle, but the center of the bounding box, which is indicated with a white circle in the screenshot. Same point is used for Flipping and 90° rotation buttons in the Options tab. The reference point will (weirdly) not change in the X, Y coordinates when you rotate an object as is visible in the next screenshot: you see that the X/Y still references to the blue circle center, which is no longer part of the bounding box of the shape:

Aligning

If you align two or more objects (use the Align Toolbar which you can open by Window menu) the result can be surprising. Have a look at this first screenshot: I kept the rotated arrow, added a rectangle with exactly the same width (300px), and having the reference point at the same X value. That means that the center point of both shapes has the same X value as well, centering the shape will not move them.  In a first test, I selected the arrow first for alignment (see right image in screenshot). 

The result for left align is to be seen in the left image: the most left point of the bounding box of the arrow has been used as reference. When the bounding box is turned off, there seems to be no 'alignment' between the shapes. The second image looks better.

Same alignment rules when you use grouped objects instead of single objects. The bounding box of the group is what matters.

Effects

For all effects the center point of the bounding box (white circle in the very first screenshot) is the absolute reference point. It is the case for all categories of Effects. Especially for motion effects, the new Guides are very handy to locate the start, end and intermediate points of the motion path as I showed in this post: Guides Rule!.

That was the original question which I mentioned in the introduction: how can you rotate an object, not around its center but around another point.  Since version 9 it is possible to apply an effect to a group. You cannot have individual effects for objects that are grouped (which is a pity). But in this case effect on a group provided a workaround for this particular question: 

• Add an object that is 'invisible' to the end user, like a shape with a Fill Alpha = 0 and a stroke = 0.
• Group that object with the object to be rotated, in such a way that the center of the group bounding box coincides with the rotation point you want to use.

This sounds more complicated than it is really. Have a look at this visual presentation: the wanted rotation point was the right bottom point of the triangle. Duplication of the triangle with rotation provided me with that 'dummy' object which I made invisible to the user (here I added a light grey border to make it visible):

The red lines are guides which will not be visible on publishing. You see in this screenshot that the bounding box looks bigger than it really is, because its exact size is indicated by the red guides.

Intro

In my last post I mentioned that, based on the visits to my blog posts, Quizzes in Captivate seem to be one of the stumbling blocks for newbies. Most of the quizzing blog posts with focus on default quiz slides are already pretty old. More recently I have been talking about new features like Branch aware and Knowledge Check Slides. The most visited post will be updated to accommodate the changes in a near future. This article will offer you some ideas about using the specific quizzing category of system variables. If you ever downloaded the full list of system variables, you will have seen that these variables are read-only, at least if you are not a JS expert. As a bonus, you'll find a downloadable list with Quizzing System variables which include my personal comments and links to blog posts where I have used those variables.

This article is an introduction to the use of variables, the use cases are not complicated at all.

Using read-only Variables

Quizzing System variables are read only, but you can use them in two ways, which I will illustrate by a couple of use cases later on:

1. To show information to the learner, by inserting them in a text container, which can be a shape or a text caption.
   All variables are case sensitive, for that reason I recommend strongly only to insert variables using the X button in the Character part of the Properties panel for the text container. In the dialog box you choose System variables (default is User variables), eventually the category (Quizzing) and pick the correct variable from the dropdown list. It is also possible to limit the number of characters (set to 5 in this screenshot):
   

   
   
   Since text containers including variables have to be generated on runtime, contrary to the static text containers, it is wise to use only websafe fonts which was not the case in the screenshot above.
   
   
2. To use them in an advanced or shared action for multiple goals, like changing navigation, calculation, skipping slides etc.

You will see some use cases for both situations in this article.

Use case 1: add information on question slides

This use case has been explained in an older article (Buttons on question/score slide), but here you'll see a refurbished version using new features which have appeared since that old version: hyperlink, multistate object, shared action, toggle command.

The idea is to insert system variables in a text container that appears on the first question slide, is timed for the rest of the project, always on top. Since all embedded quiz objects have priority in the stacking order (z-order, order of the layers in the timeline), you have to make sure that the custom text container is not covered up by embedded objects. For that reason I edited the size of feedback messages on the quizzing master slide, to make room for the (green) text container:

This text container can remain permanently on the question slides, always available, or you can use a shape button to trigger its appearance. That button is visible in the screenshot as a green button with the label 'i'. It is also inserted on the first question slide, timed for the rest of the project. This shape button has an extra custom state 'Close', visible on the next screenshot, to turn it into a real toggle button. The action used for this shape button is the shared action described in '1 action = 5 toggle buttons', and a user variable v_visib is used in that action.

You see the inserted system variables cpQuizInfoPointsscored, cpQuizInfoPointsPerQuestionSlide and cpQuizInfoNegativePointsOnCurrentQuestionSlide. The result on runtime, when the toggle button has opened the info text can be seen in this screenshot:

To be sure that the information is closed by default On Enter for each question slide, I used an On Enter action for each question slide, which will be shown in use cas 3

Use case 2: Custom Score slide

You can turn on/off fields in the default Score slide, but you can also replace the inserted fields by your text and system/user variables. Look at this example in editing mode:

You see again a lot of embedded system quizzing variables: cpQuizInfoPointsscored, cpInfoPercentage, cpQuizInfoTotalQuizPoints,  cpQuizInfoTotalCorrectAnswers  and cpQuizInfoTotalQuestionsPerProject. Moreover there is one added user variable v_penalty, which I'll explain in use case 3.

On runtime it will look like this screenshot:

This score slide is taken from the same example file. Since both the text information container and its toggle button were timed for the rest of the project, you have to take care of hiding both On Enter for this score slide. I used this standard advanced action:

Use case 3: Calculation total Penalty

Although there is a system variable (with a very long name) cpQuizInfoNegativePointsOnCurrentQuestionSlide, no exposed system variable is available containing the total penalty of the quiz, which is the opposite of the maximum number of points , cpQuizInfoTotalQuizPoints. If the user misses all answers, he'll get a negative score equal to that total penalty. Since it is not available as an exposed quizzing variable, I will have to calculate it.

For that purpose I created a user variable v_penalty with a start value of 0. The On Enter event of each question slides was used to trigger this standard advanced action (shared action had no sense because same action is valid for each question slide):

The first 3 commands take care of resetting the toggle button (SB_Info with the variable v_visib) and hiding the text information container (Tx_Info).

The Expression command is using cpQuizInfoNegativePointsOnCurrentQuestionSlide to calculate the present amount of v_penalty. It may seem confusing that I'm using '+' as mathematical operator: reason is that the system variable always shows a negative number. You don't have to believe me: have a look at the second screenshot in use case 1. 

More use cases - download

I wanted to keep it simple in the described use cases, introduction to the use of variables. Download the pdf with description of all quizzing system variables from this link. 

The table has 6 columns:

• Variable name
• Variable type: a variable can be empty, a Boolean (only values are 0/1 or T/F), a number, text or undefined.
• Explanation which is sometimes bit different from the explanation found in the Variables dialog box
• Default value
• Comments: my personal comments
• Blog posts: here you'll find quite a lot more use cases, I mention the blog posts where the referenced variable has been used

In this screenshot you see part of the first page:

Conclusion

I'm waiting for your comments. Do you see ways of using those system variables in your projects? Do you have questions, use cases that you cannot figure out if they are possible? Fire away.

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?

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.

Intro

This last article about the Timeline is sort of a bonus for those who want to know 'everything' about the timeline panel. The color codes can be a quick visual help to recognize object timelines, and I personally use the shortcut keys quite a lot to avoid the many mouse movements to the different tabs in the Properties panel. 

If you have problems with the used terminology, maybe you missed some information from this articles, already published:

Captivate's Timelines demystified - Intro

Video Timeline demystified (cpvc)

Captivate's Timelines cptx-project

Pausing Captivate's Timeline (cptx)

Color coding

The color coding is the same for master slide timelines and slide timelines.  The hexadecimal code is just an indication because a lot of the timelines have a gradient fill..

• Audio timeline: dark grey (about #4E5156)
  
• (Master) slide timeline: beige (about #DBD7CE)
• Placeholder objects: orange (about #DCC399) with some exceptions (Content/Rollover Caption/Rollover Image)
• Content Placeholder: light blue (about #AFD7FF)
• Placeholders for Rollover Caption/Image: green (about #BFDD8B)
• Static objects: light blue (about #BEE8FB). Static objects are Text Captions, Text Animations, Shapes (not used as button), Highlight Boxes, Web objects, SVG's, Images, Videos, Animations, Characters, HTML animation. There are some exceptions
• Rollover Caption/Image have the green color like for the placeholder (about #BFDD8B)
• Rollover Slidelet is sort of a hybrid, between static and interactive: is also green (about #BFDD8B)
• Zoom object: also green (about #BFDD8B)
• Static widget/interaction: also green (about #BFDD8B)
• Mouse object: beige like the slide timeline (about #DBD7CE)
• Interactive objects: green (about #BFDD8B). Those include the buttons, click boxes, Text Entry Boxes, Shapes used as buttons, Learning interactions (static and interactive)
• Effect timelines: light red (#FBDAE1), turning to darker saturated red (#F584A7) when selected
  
  
• A selected timeline, with the exception of the slide audio  at the bottom, and effect timelines will always be blue (about #99BCBF)

Shortcut keys

I love shortcut keys, once published my favorites for moving/resizing objects (which are still functional). The timeline panel has also several shortcut keys, which can save time because you don't have to switch to the Properties panel all the time. Some of the shortcut keys also work for Effect timelines, but not all.
 

This shortcut key is not valid for individual Effect timelines

This shortcut key is not valid for individual Effect timelines but they'll move automatically with the object timeline   

Conclusion

Intro

This is the fourth post in a sequence of 5. The first post introduced features of all timelines, the second is focused on the specific aspects of the Video Demo Timeline, the third on the aspects of the normal/responsive projects (cptx) both for master slides and normal slides. To understand this article - perhaps the most important - I recommend to  read at least the first and the third article as a preparation. 

This topic is more suited for a live event: a real or a virtual training session. I expect a lot of questions, and those are easier to answer in a live event. I have presented several webinars for Adobe in the past (most about advanced and shared actions), but that practice seems to be discontinued since a while. If you want to participate in a meeting (Connect room), I'm prepared to organize it. Send me a note: either by mail (info@lilybiri.com), in the comments on this post, or use Twitter (my handle is @Lilybiri). In case of sufficient requests, I'll propose a date/hour (probably am PT, for users in USA) and will need an e-mail address for the invitations. As a bonus, will offer you some files.

Pause and Pausing points

Pausing the timeline means stopping the Playhead. However that can be done in in two ways, and they do not affect the items in the same way. Let me first explain what I mean by 'Pause' as opposed to 'Pausing Point'. You'll see that I compare them with two traffic signs: Pause with the red light, Pausing point with the Stop sign. But also in traffic, some 'items' do not respect those signs, legally or illegally. 

Pause 

This strict way of pausing can be achieved by one of these methods:

1. With the pause button on one of the default playbars.
   
   
2. By choosing the command 'Pause' to be triggered On Enter for a slide (doing it On Exit is not a good idea, because it will happen after the last frame, see previous post about events).  It can also be a (last) command in an advanced/shared action.
   
   
3. By using the Success event an interactive object (like a shape button) with the command 'Pause' either as a simple command or within an advanced/shared actions. Usually it will be the last command. 
   
   
4.  Alternative for 'Pause' command is to assign 1 to the system variable cpCmndPause (its default value is 0). This system variable controls the pause.

If you use a playbar, you'll see that the progress bar is stuck when Pause is encountered. To understand even better, I recommend to insert the system variable cpInfoCurrentFrame in a text container, displayed for the whole project (on top). 

UnPause?

You can use the Play button on the playbar, or need the command Continue, which is available as simple action and in the dropdown list in advanced actions.

Pausing point

1. Quiz or question slides: the pausing point is visible on the slide timeline, but not in the Timing Properties panel. Only way to move is by dragging. Default timing is at 1,5secs, and pause cannot be unchecked. Pausing point is linked with the two-step process triggered by the Submit button. However when selecting the Submit button, you'll not see the pause in the Timing Properties panel (as is the case for the D&D Submit button). Waiting is here for the user to click the Submit button, then to press Y or click on the slide
   

   
2. Score slide: same situation as for the quiz slides: visible in the slide timeline, not in the Timing Properties. Default timing is at 1,5secs. Pausing point is linked with the Continue button, but will not show in the Timing Properties panel of that button. Waiting here is for the user to click the Continue button.
   
   
3. Drag&Drop slide: is pausing at 1,5secs but the point is not visible on the timeline. You will not see it in the Timing Properties for the slide, but in the Actions tab of the D&D panel. It is linked with the Submit button, when selecting that button the Timing properties panel will show the timing of the pausing point. Waiting for the user to click the Submit button, or in case of Auto Submit waiting for a correct answer.
   

   
   
   
4. Interactive objects (click box, button, shape button, Text Entry Box) can have a pausing point, to be defined in the Timing Properties panel. That pausing point will be visible in the Timeline, and the part before the point is indicated as 'Active', part after the pausing point as 'Inactive'. Since a click box is invisible to the user, it has not inactive part, its pausing point will always be at the end of its timeline. Waiting is for the user to click either on or outside of the interactive object (click box, shape or normal button) or to confirm the Entry in a TEB. You can edit the pausing point by dragging in the Timeline or in a precise way by editing the Timing Properties panel. It is also possible to uncheck the Pause (see screenshot 3 in the Gallery).
   

   
   
   
5. Shape button on a master slide can have a pausing point. Since objects on a master slide have no duration, no Timing Properties panel, you have to indicate that you want it to pause, in the Actions tab of the Properties panel (see screenshot 4 in the Gallery). You can uncheck the pause there as well. The pausing point will be at the end of each slide, based on that master slide. It will not be visible in the timeline
   

   
6. Interactive widgets or learning interactions have a pausing point at 1 sec. It will not show up in the Timeline, you can find it in the Timing Properties.  Pause can be unchecked, but you'll not want to do that for this type of interactions.That is the place to edit or uncheck the Pause (see screenshot 5 in the Gallery). Static widgets/interactions do not have a pausing point. More info about difference  between interactive and static in: Widgets and Interactions
   

   

Bonus: You can download a (watermarked) pdf with this overview from PausingPoints.

UnPause?

It depends on the kind of pausing point:

1. For Question slides: the playhead is released after the second step of the Submit process and the actions defined in Question properties will be done.
   
   
2. For Score slide: similar, but after clicking the Continue button.
   
   
3. For Drag&Drop: exactly the same as for the Question slides, after clicking the Submit button.
   
   
4. For interactive objects on master or normal slides: if an advanced action is executed (Success/failure) the playhead is not released automatically. If you want this to happen you have to include a Continue or a navigation command like Jump to as last command in the action. If you use a simple action, the playhead will be released by default, but in CP9 it is possible to uncheck that default setting 'Continue playing the Project' (not done in this screenshot).
    

What is Paused?

Not everything is paused by the absolute Pause command, nor the Pausing points. Watch the interactive movie to understand better. Some items are never paused, some are paused by both Pausing points and the Pause command, some are only paused by the Pause command, not by the pausing points although there may be a workaround. 

The position of the playhead when pausing is important: objects for which the object timeline starts later than the pause will not appear until the playhead is released.

Same is the case for Effects which have a duration, a timeline: if the pause occurs while the effect is not finished, it will stall in the last position and continue only when the playhead is released.

Animations however are never paused, not even when you use the Pause command triggered by the On Enter event of a slide. They will always play.

Video clips inserted as Event video are totally independent: if they are playing when pausing, they'll continue to play. If a pause is occurring and the video is not yet started, the user will be able to use the Play button of the video control panel to watch the video. The only alternative way to pause event video is by using JavaScript (see Working with event videos). Video clips inserted as Multisynchronized video however will be paused by the Pause command and by a pausing point.

The situation is a lot more complicated for audio:

• Background audio is totally insensitive to Pauses or Pausing points: it will continue to play.
  
  
• Slide Audio: will automatically be paused by the Pause command, but not by a pausing point. It is possible to pause slide audio at a pausing point, to resume when the playhead is released if you check 'Stop Slide Audio' on the Options tab in the Properties panel of the interactive object.
  

  
• For the default pausing points on quiz slides, score slide, D&D slides you cannot pause the slide audio however. This seems confusing, and can lead to a problem. Slide audio clips automatically will increase the duration of the slide. You learned that the default pausing point of this type of slides is always set to 1,5seconds. If the playhead is released with the command 'Continue', it will have to visit all the remaining frames on the slide, those frames in the 'big' inactive part of the slide. To avoid that, I recommend that you change the default pausing time and make it just a little bit smaller than the slide duration. This is not necessary if the actions when releasing the playhead from its pausing point are a navigation to another slide, because the inactive part of the slide will just be skipped.
  
  
• Object audio: will be paused by the strict command Pause, but not by a pausing point! There is no workaround for this behavior for a Pausing point.
  
  
• Audio started with 'Play Audio' cannot be stopped not by Pause nor by a pausing point, the only way to stop it is by launching the command 'Stop Triggered Audio'. 

Why pausing?

This blog post has become very long, for which I apologize. For that reason I will write out some use cases, to illustrate the just described theory in later posts. You're welcome to post some ideas as well. Here are some appetizers:

• Instead of creating very long slides to fit the narrations, use the Play Audio command and have a pausing point on the slide. That can be a Next button, which offers total control to the user.
  
  
• Question slides with narration as slide audio: you need to move the pausing point.
  
  
• Create custom navigation: use shape buttons on the main master slide, only one of them needs a pausing point to give each user all the time needed to watch the slides.
  
  
• Create a slide with light boxes.
  
  
• Have multiple TEB's on one slide with a unique Submit button.
  
  
• Create a dashboard with buttons to display multiple vodcasts, images, podcasts.