Intro

If you do follow me since a while, you are aware of the fact that I am a big fan of the Rulers and Guides which appeared with version 9.0.1. They have a lot in common with the same feature in other Adobe applications (Illustrator, Photoshop to mention two). Shortly after the release I wrote an article about possible use cases in normal (blank projects): Guides Rule!

Using Fluid Boxes as alternative for Breakpoint views is an added feature with CP2017, about which you'll find a lot of articles, webinars and videos.  I am always stumped because none of them ever shows the use of Rulers nor Guides. This article will try to convince you that Guides are even more important for Fluid Boxes design than for normal projects.

Fluid Boxes and Themes

There are some limitations when using Fluid Boxes. Some objects cannot be used: zoom object, highlight box, click box (if placed over another object), line shape and some possibilities for multistates. You cannot use groups neither. Most of those limitations are linked with the 2-dimensionality of Fluid Boxes. Static Fluid boxes are a workaround, but you'll lose a lot of 'fluiditiy4. I will talk about my personal workarounds for those limitations in a later post.

Less known are the limitations for Themes. I start every project, even a small one, by customizing an existing theme or creating a theme (based on the Blank theme). Such a custom theme will save a lot of time later on, if small design changes have to be done. THe components of a Theme are described in more details here.

Object Styles

Fluid Boxes workflow will save you time when setting up object styles for Text containers: captions and shapes. You don't need to set up the font size for different screen resolutions, as is necessary for Breakpoint views. Text will rescale automatically when the screen resolution changes. Maybe you'll have to decrease the minimum font size which is set to 14p (for Breakpoint Views it used to be 10p, still readable on smartphones). 

Master Slides

All the included themes in Captivate have Fluid Boxes on the master slides (the 'virgin' Blank theme has them only on the quiz/score masters) . Two exceptions: you  will not find Fluid Boxes on the main master slide, nor on the Blank master slide. You'll see a lot of informational stuff where every presenter starts always with a slide based on the Blank master slide because it is also 'virgin'. Be careful when editing the Blank master slide, because it is needed for PPT-import and software simulation slides, edit only a duplicate).

I found it clarifying to explore the Fluid Boxes on the master slides of the included themes. Result of that exploration were two blog posts :

• Fluid Quiz Slides: describes the setup of Fluid Boxes for the Quiz slides; interesting is the use of the static Fluid Box for feedback messages. The Blank theme has the same setup as the other themes.
• Fluid Boxes and Master Slides: explores the content master slides in the themes, and how to use them. 

During the research for this post I discovered that it is not possible to insert Fluid Boxes on the Main Master Slide. I am used to have some information on that Main Master slide, which I want to show on all slides. Here is an example of the bottom part of the Main Master slide:

That is not possible within a Fluid Box. I tried to set up the Position Properties (which are available) but often weird positioning showed up when published. It is not possible to have different font sizes: either you let everything rescale proportionally and get very small text on phones, or you have to keep the size in px which will maintain the objects and font size fixed. Not really a workable solution.

Alternative for objects which you want on all slides, is to put them on the first slide and time for the Rest of the Project. However you cannot time objects for the rest of the project when using Fluid Boxes, not a workaround in this case.

My solution: insert the objects on each master slide you'll need in the project in Fluid Boxes. That is where Guides are indispensable to me.

Fluid Boxes and Guides

Turn on the Rulers under the View menu and you'll see that they are in percentage, not in pixels as for normal projects? 

For all to be used master slides, I want a setup, with a Fluid Box at the bottom to accomodate the text and button(s) as shown above. That FB should have a height of 10%. That FB will be divided in two: 70% width to the left (text), 30% to the right (buttons). To achieve that, create two Guides

1. Horizontal Guide at 10% from the bottom by double-clicking on the 90% mark of the vertical ruler
2. Vertical Guide at 70% by double-clicking on the 70% mark of the horizotal ruler
3. Lock the Guides (View, Lock Guides)
4. Turn on "Snap to Guide" in View menu

The guides will be visible as well in Master Slide as in Filmstrip view. You can change guide color in the Preferences, Be sure to change the Guide% color.

Switch to the Master slide panel. You'll get the step-by-step work flow to add a 10% Fluid Box at the bottom of two master slides (Title and Custom master slide), and have two child fluid boxes in that first FB.

Edit Title Master Slide

All included themes (also the OldPaper theme I use in this example) have one Fluid Box on the Title master slide, filled with one Title Placeholder. It is not possible to add a Fluid Box, the button Fluid Box on the Big Button Bar is dimmed. To solve this and be able to recover the placeholder:

1. select the placeholder
2. check the option 'Unlock from Fluid Box' on its Properties panel
3. drag the placeholder off the stage in the scratch area
4. uncheck the option 'Unlock from Fluid Box', later on we'll drag it back on the master slide

Select the parent fluid box (drag a rectangle half off the stage). You can now insert two vertical Fluid boxes. You will have to change the setup of the Parent Fluid box. The wrap option 'Squeeze in a column' is fine as are the alignments, but in order to use all available space you need to activate the options Stretch to fit, both Horizontally and Vertically.

Use the horizontal guide to change the height of the bottom Fluid box. This Fluid box needs these settings:

• Flow: Horizontal
• Wrap: Squeeze in a Row (to have text and buttons alwas next to each other), 
• Horizontal: Space Around (eventually define some padding) and Stretch to fit
• Vertical: Middle Align and Stretch to fit

The top fluid box: I choose vertical Flow, kept all the other default settings.

You can now insert two horizontal Fluid Boxes and change their width using the vertical guide, Flow horizontal for both.

The left Fluid box needs to have Left Align horizontally and the right one Right Align. I choose a horizontal padding for both and a vertical for the right Fluid Box. You can now insert the text (doesn't have to maintain the aspect ratio) and the Next Shape button.

I dragged the Title Placeholder back on the slide and created this Title slide from the edite Title slide:

Custom Master Slide

If none of the content master slides fits your purpose, you can start from a duplicate of the Blank Master slide. Insert two vertical Fluid Boxes. Although that master slide doesn't have a starting Parent Fluid box, it will be automatically created when you insert fluid boxes. The work flow to set up the bottom fluid boxes is pretty much the same as for the main master slide. You can now add a Back button as well. If you want more fluid boxes, go ahead. Here is a example of a custom master slide, which you could try to reproduce: And get a (Belgian) beer after success.

Conclusion

Now it should be clear why I love the Rulers and Guides for designing any project, but especially when using Fluid Boxes workflow. The Guides which you set up are saved with the project, you can hide them from the View menu and they'll always be ready to help you out when necessary :)

Intro

Main master slide, Blank and Title master slides

Main Master slide

Blank Master slide 

Title Master slide

That master slide has one Fluid box (parent fluid box) but no child fluid boxes. It is set up as 'Squeeze in a Column', and vertically and horizontally centered. Because the title placeholder is inserted directly in that parent fluid box, you are not able to insert child fluid boxes.  Because each new project, using the default theme White will start automatically with a Title slide, this has caused already many frustrations when starting with the use of Fluid boxes. If you want to use fluid boxes on the first slide, you have to change the master slide from Title to Blank (exception Blank theme which starts with a Blank slide).

TIP: if you want to add objects on the Title master slide, first take out the Title Placeholder, to be able to insert child fluid boxes. Then put back the Title Placeholder in one of the child fluid boxes.

Content master slides

Look at the setup of the Fluid boxes on the master slide: the parent fluid box (FB_15) has two vertcial child FB's (FB_16 and FB_17). The top one is meant for the Title placeholder: 

The bottom Fluid Box has 4 child FB's, (FB_19,FB_20, FB_21, FB_22), which are set up to wrap Symmetrically (when width is too small, two FB's will move to the next row), and have a padding both vertically and horizontally to have some spacing between the FB's. Each of them has a placeholder for an image.

Example movie

Play with this responsive movie (will open in a new window) which has only 3 slides: Title slide (with inserted Next button, and taking over my name from the main master slide), a slide based on Content04 master slide, with a lot of tweaking, and an End slide. The Next button on the second slide will only appear when you have clicked all available shape buttons and seen all the content. 

Refining slide based on Content master slide

• I deleted the image placeholders
  

  

  
  
  
• I decreased the height of the top fluid box (FB_MS2_16) to 10%, originally it was 15% (edited font style as well)
  
  
• I added a third vertical child FB under the parent FB_MS2_15, it is labeled FB_9
  TIP: this will not affect the master slide, if you use Reset Master Slide button in the Properties panel of the slide, you'll get the original layout
  

  

  
  
  
• That last FB_9 got two horizontal FB's, FB_37 (70% of the width) and FB_38 (30% of the width); the last one will be used for the navigation buttons (Back/Next)
  
  
• The setup for FB_38 is visible in this screenshot
  

  

• Each of the four FB's in the center (FB_19,FB_20, FB_21, FB_22) has no longer any object (see 1) and can be divided in two new vertical child FB's
  

  

  
  
  
• As you can see on the screenshot, the top FB will have the button and explanation text (originally hidden, but cannot be grouped in FB's), the bottom one has an example of the style (also initially hidden).
  
  
• Setup for the top FB's here is visible in this screenshot; for the Shape button ('Normal') the option Maintain Aspect Ratio is kept, but not for the Text container, so that it can change for smaller screen sizes (especially in portrait mode).
  

  

More questions?

Sure, I have several advanced actions in that movie, but that was not the goal of this post. No explanations here about those actions.

Why this short post?

1. Hint shape is using the Success Shape Style, should use the existing Hint Shape Style
   
   
2. Failure shape is using the Success Shape style, should use the existing Failure Shape Style

Where are default Themes stored?

•  you cannot mess up the original themes
•  the Public folder is accessible for developers which do not have administration rights. 

If a theme seems corrupted or is too messed up, you can always restore it by copy/paste from the Gallery (need for administration rights). If you have both CP9 and CP2017 installed, you'll see both Layouts in the copied folder. But the layouts folder for CP2017 has a subfolder 'bpthemes' containing all the CP9 themes on my system (not sure if that is the case when you only have a CP2017 install).

TIP: don't put custom themes in the sames folder as the default themes (Public). If you have to restore all themes by deleting the Layouts folder you will not lose the custom themes. I store them mostly with the project(s) they are used for.

Editing Default Themes 

I suspect you will want to keep the correct object styles for the feedback messages for future projects as well. Use the menu Themes, option Save Theme.  The result will be that the theme is edited in the copied folder, in the Public documents To change the original theme in the Gallery, you'll need to do it outside of Captivate, using Explorer and needing administration rights. However a user yesterday reported that the option 'Save Theme' was dimmed(?).  Reason was that he was working in a blank, normal project. All default themes in CP2017 are responsive. To protect the responsiveness, you have to edit the theme from within a responsive project. The option 'Save theme' will be available in that case. You can always use a responsive theme in a normal project.

Intro

The Help documentation is very concise about Library: https://helpx.adobe.com/captivate/using/captivate-library.html It has a description of the columns in the Library panel, which I will not repeat in this post.

Internal Library

• Audio: will have all audio clips, whether imported or recorded in Captivate; whenever you edit an existing clip, the original and edit clip will be in this folder. If you import a (compressed)mp3 file it will automatically be converted to a 'raw' wav-file which will also be in this folder. It is recommended whenever possible to import a wav file, when published it will be compressed to mp3 by Captivate.
• Backgrounds: backgrounds used in project, master slides or created when recording a software simulation.
• Equations: only for the versions that have MathMagic included (if you see it still in CP2017, which has no longer MathMagic, this is a bug). That folder will store the images created with MathMagic.
• Images: has all used bitmap images of any format; exception are the images created from layers in an imported Photoshop file. When importing such a file an individual folder will be created (under the root, not under Images), with the same name as the PS-file, and having all the layers converted to PNG images. If you insert Characters (Media button) they will appear in this folder as well. Later on in this article you'll find a screenshot with an imported Photoshop file.
• Media: will store video, animations...
• Shared Actions: contrary to advanced actions, shared actions are in their dedicated folder in the Library, and they have all the possibilities offered to all assets.
• SVG: stores all SVG (Scalable Vector Graphic) images
• Web: for web objects

1. Open Library: is an alternative for File, Import, External Library (see sbelow)
2. Import: you cannot import folders, but you can select multiple assets to import in one action. They will be placed in the folder for their type. You cannot import layers from a Photoshop file with this button, you need to use the menu File, Import, Photoshop File.
3. Export: it is possible to export a number of assets to one location. Each will get its appropriate extension. If you never used shared actions, know that the extension 'cpaa' will be added for them. 
4. Edit (CTRL-U): If you have associated an application for the asset, using this button will open the asset in the associated application. Examples in my situation: audio clip will open in Auditon,  SVG' in Illustrator, bitmap images in Photoshop. Alternative is using the right-click menu (but you'll have to use two clicks in that case), Edit with....If you have the asset Properties window open, you'll find an Edit button as well (see screenshot below)
5. Properties: will open a window with asset properties; I almost never use that button but will double-click on the name of the asset (see Properties in the screenshot below). 
6. Usage (CTRL-ALT-U): there is a column 'Use Count' as well, but this button opens immediately a list with all the locations where the asset is used. Alternative is option Usage in the right-click menu on the asset, or the Usage button in the Properties window (see screenshot below). In the screenshot you see that Usage counts also images used in object states.
7. Update: if source files have been changed externally, you can update the assets in Captivate with this button. Need for updating is visible in the column 'Status' (red bullet)
8. Select Unused Items: contrary to what some people 'believe' deleting unused items will only decrease the file size of the raw cptx file, not the file size of the published file. I prefer not deleting unused items until the project is finished.
9. Delete

TIPS

• Captivate users tend to insert assets one by one on slides using the Media Button. An alternative way is to import first (all) assets to the Library. From the Library you can drag them to the stage (or to an object). For audio clips, when dragging to the stage you'll have it inserted as slide audio, dragging to an object will create object audio. Same is valid for shared actions: dragging a shared action to the slide will create an On Enter action for the slide, dragging a shared action to an interactive object will create a Success action for that object.

• You are not limited to the default folders described above. It is perfectly possible to create folders under the root and to create subfolders under existing folders. For complicated projects with lots of assets, I sometimes set up folders for each slide or slide group. Another approach if you take advantage of the great roundtripping possibility with Photoshop is to keep image assets for a slide or slide group in one Photoshop file. In that case I'm only talking about the bitmap images of course. For large, complicated projects both work flows will help to manage assets when the clients is asking for (last minute) changes. In the screenshot above Tips, you see an imported Photoshop file (Libraries_Small.psd), where I indicated 4 layers which have been converted to PNG-images

• Even if you don't use custom folders/subfolders think about labeling assets that got generic names. A relevant example are audio clips generated by TTS. 

External Library

1. Use the first button in the Control panel of the Library panel (see above) and browse to the project (cptx)where the Library you want to use is stored.
2. Use the menu File, Import, External Library and point to the project (cptx).

In the screenshot below you see such a floating External Library to the left of the docked Internal Library. If you are using the Newbie UI you'll not be able to dock that External Library in any docking station (always recommend to switch to Expert UI). Its layout is totally similar to the Internal Library. The only way to recognize it as external, is the name of the Captivate file from which it was opened, and the presence of that same name in the dropdown list under Open Library button.

If you are not used to floating panels because you are in the Newbie UI, here are some warnings. 

• Do not reset the Classic workspace while an external library is opened, or you'll lose it.
• External libraries do not appear in the Window menu where you find most of the default panels. Only the internal Library (CTRL-ALT-L) can be switched on/off using that Window menu. 
• The only way to close an external Library is with the Close button. That button is in the top right corner of the panel and pretty tiny, moreover the colors are grey on black which is not a very good combination for tired eyes:

You can use an external library (or multiple external libraries) exactly in the same way a the internal library: drag an asset to a slide, or to an object (for audio clips). However I will offer one recommendation for Shared actions (see more details in this blog post): I prefer to drag those actions first to the Internal Library, instead of attaching them directly to a slide (On Enter) or an interactive object (Success event). As you probably know, if a shared action is using a variable, this variable will automatically be created when using that action in a new project. To avoid problems with duplicate variables follow the recommendation of that mentioned article.

For all the copy/paste lovers: believe me, using assets from an external library is a much safer work flow than copy/paste objects between projects (one of the causes of corruption). 

Using external libraries can save time and help to achieve design consistency. For much used shared actions (like the toggle action described in this post) I have a dedicated project ready which I open as External Library in any new project. Images and SVG's, which I use all the time, are stored in another Libarry. I have an external library with sound clips that are useful. If you are a developer in a company, you see the advantage of using external libraries for sure!

(CC Libraries) 

This last part is 'wishful thinking': if you are a CC user like me, it would be a relief if we got access in Captivate to the CC Libraries. It would make the transfer of assets created with Adobe Color, Photoshop, Audition, Illustrator, Animate, Adobe mobile apps.. so much easier. Same is valid for managing Adobe stock assets, which can be inserted in CP. 

Captivate Draft has access to the CC Libraries, and could be used as an intermediate player: use it to retrieve custom color palettes, image and other assets. Once the Draft project is exported to Captivate, you'll have them in the Internal Library. But if you don't have an iPad, this work flow is impossible. Same when you don't use Draft for storyboarding but another application.

Please, log a feature request to support (one of) my Captivate dream(s)! 

There is one exception: you can also click the radio button left of the slide timeline. In that case the slide will be hidden (with all its content) and it will not appear when previewing/publishing. It is an alternative work flow for using the right click menu on slide(s) in the Filmstrip, option 'Hide Slide'. With both work flows you'll see a dimmed slide in the Filmstrip and an eye icon (not a button) as indicator.

Eye button in the Properties panel: Visibility in Output  

If you want an object to be initially invisible in the published course, you need to click this button in the Properties panel (inspector) of that object, top left. It is almost the opposite button of the first because the object will not disappear on the stage at all. Why would you hide an object in a published course? Maybe because you'll want to make it visible later on.  Example: you want to allow navigation to the Next slide only after certain actions have been performed by the learner (like clicking hotspots, or entering text in fields). Showing an object will be done with the command 'Show'. Making an object invisible by using this second Eye button can also be done on runtime by the action 'Hide' and that is often a better approach.  Since you can show a hidden object, it means that the object is included in the published version which is not the case with a hidden slide. A hidden slide is not included in the published course.

Eye button in the Drag&Drop panel

When this button is set to 'active', and you did set up the Drag&Drop interactivity by defining the drag sources, the drop targets and the links for correct answers those three components are made visible: green rectangles for the drag sources, blue rectangles for the drop targets and blue arrows for the links. When you deactivate this eye icon, those indicators will disappear. Since it happens that Captivate deactivates that button without your consent, it is good to know how to make those indicators visible: click on the barred eye icon: 

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:

You can download the published HTML5 version from this link.  You'll have to unzip the folder, and launch the index.html file.

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.

Intro

This article is written as an answer to a question on the forums: Drag&Drop with Advanced Action

For quiz slides you have the option to show more than one Failure message, linked to the attempts. That functionality is not available for Drag&Drop slides. As you can read in the thread, another user posted a solution using the Object actions which are executed after each drag action.  The solution I describe here is more similar to what happens on other quiz slides: the messages will appear after clicking the Submit button. This work flow is only valid for Knowledge Check slides, which was the goal of the user on the forum. As you can read in one of my former blog posts, a D&D slide which is not scored, is reset automatically when leaving the slide. This functionality is used here. You'll also see that I used the InBuilt states for the drop target, which i described in this post.

Example 

Watch this interactive movie to see the result. It is Flash-based, do not watch from a mobile device, please.

Setup D&D Slide

The Drag&Drop slide's Timeline looks like this screenshot:

From Bottom to Top you find these object timelines:

• DragOne, DragTwo and DragThree which are the 3 Drag sources. Those objects have only one extra InBuilt state: the transparent DragOver State. D&D is set up so that the drag sources disappear behind the drop target.
  
  
• DropContainer which is the unique Drop Target. It has 3 states as you see in this State panel
  

  

• Text Tx_Question which has the Question
  
  
•  Gr_Feedback with several objects; the whole group is hidden in Output
• I_Fail and I_Success are the two sticky images
• Shape button SB_Continue with a pausing point at 2 secs, which is later than the (default) pause of the D&D (1,5secs)
• FB_One, FB_Two and FB_Three are the failure feedback messages for the 3 possible failures. The first two have an inserted variable v_attempt.

You don't see a Success feedback on the timeline, because I kept the default Success message for the D&D slide (unchecked the Failure message)? That Success message has just be edited (freeform shape).

The D&D panel, tab Actions has been set up as visible in this screenshot. Although the user provides 3 attempts, you see that I set the attempts to 1 in this panel:

Variable, Events and Actions

I used only one variable: v_attempt, with a starting value of 3. If you want to have more attempts than 3, just change that starting value. You can see its value in the example movie, center of the bottom bar. That variable is also inserted in the first two Failure messages.

SubmitAct, triggered by the Failure event of the D&D (see panel above)

This conditional action has 4 decisions, can easily be edited to have more than 3 attempts

1. Decision 'Always' is a mimicked standard action, decrements the value of v_attempt by 1
2. Decision 'First' checks if v_attempt is equal to 2, which means the first attempt (because the original value has been decremented in the first decision). If that is the case 3 objects out of the feedback group are shown: the first feedback message (FB_One), the image I_Fail and the continue button SB_Continue
3. Decision 'Second' checks if v_attempt is equal to 1, which means the second attempt. The actions are identical to 'First', with the exception of the feedback message (now FB_Two)
   
4. Decision 'Third' checks if v_attempt is equal to 0, which means the third and last attempt. It has similar actions to the previous two decisions. 
   

Here is a screenshot of the complete action:

SuccessAct, triggered by the Success event of the D&D (see panel above)

ContAct, triggered by the Success event of the Continue button

Here is the 'trick'! After each attempt I want the D&D slide to reset automatically. This is only possible when you leave and re-enter the slide. To achieve this, I used a similar (but easier) approach as explained in the blog post ReplaySlide. I inserted a dummy slide before the D&D slide, with a very short duration (0,1secs). Have a look at the script triggered by the Continue button, which is a one-decision conditional action:

When there are attempts left (v_attempt > 0), these commands are executed:

• Expression cpCmndGotoSlide = cpInfoCurrentSlide - 2
  The first system variable cpCmndGotoSlide has an index starting with 0, whereas cpInfoCurrentSlide starts with 1. That is the reason why 2 is subtracted. In human language this command means Go to Previous Slide.You can replace it by 'Go to Previous slide' as well, but I like to repeat explanations like this. Sorry!
  Alternative: Go to Previous Slide
  

  

  
  
• Continue: is necessary so that the playhead is released. It will quickly speed over that dummy slide (0,1 sec) and you'll see the D&D slide almost immediately, freshly reset because it was re-entered and not scored.
  

When no attempts are left the user is navigated to the last 'End' slide.

Tips

If you want to allow the same scenario for this slide, when the user revisits the slide, you have to reset the variable v_attempt to its original value, which can be done with the ELSE part of the action ContAct. It will have 2 commands in that scenario:

• Assign v_attempt with 3
• Go to Next Slide

To change the number of attempts, for example from 3 to 4:

• Change the default value of v_attempt to the new literal
• Create an extra Feedback message FB_Four and include it in Gr_Feedback (select both new message and group, followed by CTRL-G)
• in SubmitAct
  
• Duplicate the last decision 'Three', and label it 'Four'
• Edit 'Four', replace 'FB_Three' by 'FB_Four'
• Edit 'Three': replace the literal '0' in the condition by '1'
• Edit 'Two': replace the literal '1' in the condition by '2'
• Edit 'One': replace the literal '2' in the condition by '3'

No other changes are necessary.

Intro

After this introductory post, and the post about the typical Video Demo timeline this article will explain the specific features of the timelines in a cptx project: both for master slides and normal slides. The common features for cpvc- and cptx projects were explained in the introduction, if you missed it please take a look at that blog post.

Timelines CPTX project

Timeline panel in a cptx project is shared by Master slides and Normal slides (Filmstrip), depending on which panel is active at that moment. There are differences in look and features between Master slide timelines and Slide timelines. 

Contrary to the Timeline in a cpvc project, each  'track' in a cptx project can have only one item:the (master) slide has its timeline, audio has a separate timeline stacked under the slide timeline, each object, whether static of interactive has its own timeline. Result is that the Eye/Lock buttons will affect only one object, that each track can have the name of the object on that track.

The vertical arrangement of the timelines, also called the 'stacking order', is important when you have overlapping objects. Be careful with covering interactive objects by static objects: depending on the output, the interactive objects will remain active even though they are not visible. 

Master slide Timeline 

The timing of a master slide has no real meaning, master slides nor objects on master slides have any timing. The Timing Properties panel is not available neither. The timeline will show the default duration (normally 3 secs), which is necessary to show and edit the stacking order (vertical positioning of the object timelines). Here is a screenshot of the timeline of a Master slide:

Objects on master slides never have an ID, which explains why you seen only icons in the first column to identify the object  type. That type is also visible inside the object timeline itself. The icons for Placeholders usually are included in square brackets [], to differentiate them from normal objects (no brackets). There are some exceptions (look at the Rollover Caption/Image in the screenshot).

The only interactive object allowed on master slides,  is a shape button (shape used as button). If Pause Project  is checked in the Actions tab, the pause will be visible at the end of the timeline. This is the case for the uppermost object in the screenshot: look at the Pause symbol, the pause itself is at the location of the end of that timeline. This shape button is an object, the shape two tracks below is a placeholder (brackets). 

The tiny icons between the control panel (with play button etc) and the zoom slider do not have any value because Time has no meaning for a master slide.

Slide Timeline

If you create a slide, based on a master slide, not all objects inserted on the master slide will be visible in the Timeline; have a look at this screenshot:

• Placeholder objects (beige timeline) will appear in the timeline panel (I renamed them); if you don't use them (example: you don't add text, content, image), they will not appear in output. The icons are in square brackets.
• Content placeholder (blue timeline) acts the same way.
• Rollover caption/image (green) if inserted as Placeholders, will appear but they'll move to the bottom of the stack as you can see on the screenshot which shows a slide based on the Master slide shown above.
• Static objects on the master slide, will be visible on the stage, but not in the timeline. They will be visible in output, with their formatting on the master slide (there is no such object in this case)
• Shape buttons on the master slide will be visible on the stage, but not in the timeline. They will be visible and keep their interactivity in output. In the screenshot you see that the topmost object, the shape button on the master slide, is missing in the Slide timeline.

The stacking order of the objects on the timeline can be changed by dragging the timeline or by using the Arrange option under the Right-click menu. Objects can be staggered on the timeline to appear at in sequence or overlapping partially. Contrary to the typical video timeline for a CPVC-project, all objects will be visible on the stage, independent of the time they'll appear. For people used to avideo work flow this can seem confusing, but it is very helpful for arranging objects on the stage. You can always check the sequence of appearance by Playing the slide (which is not a Preview). You'll see the playhead moving, and can stop it with the space bar or the Pause button to edit/synchronize (see also Shortcut keys later on).

The specific indicators that can appear in the timelines for a cptx project on normal slides are:

• Audio icon : if you attach audio to an object, a similar audio icon as you had for video clips with audio in a cpvc-track,  will appear in the timeline
  
  
• Pause indicator: consists of two parts, the pause symbol (double vertical lines) and the exact location of the pause (thin vertical line) to the right of the symbol. You'll see this indicator in
• Question slide timeline: mostly at 1.5secs for a default slide duration of 3 secs - pause is linked to the Submit button
• Score slide timeline: identical setup as for question slides - pause is linked to the Continue button
• Interactive object timeline:  if you insert a pausing Click box, the pause will be at the end of its timeline; for buttons, shape buttons, Text Entry Boxes, the pausing time is by default 1.5secs after the start of the timeline, it can be changed by dragging the thin vertical Pausing line or with the Timing Properties panel. That same panel can be used if to uncheck the pause.
  
  Other timeline pauses that are NOT visible on the timeline, only to be found in the Timing Properties panel:
  

• A pausing shape button on the master slide. The pause is at the end of each slide timeline, but not visible on any slide timeline
  
• Drag&Drop slide is by default pausing at 1,5secs (under Actions tab in D&D panel), but that pause is not visible on the timeline (linked to the Submit button, playhead will be released by either the Success or the Failure action)
• Interactive widgets/interactions: do have a pause at 1 sec (check the Timing Properties panel). Beware: most widgets/interactions are static, not interactive. Examples of interactive widgets are the games. For a complete overview of interactions, have a look at two older articles on my blog: Learning Interactions  and  Widgets

• Group  indicators: if you group objects, you can collapse the group with the collapse button and expand with the expand button.
  Tip: never group objects having effects, because the effects will be deleted without warning. You can apply an effect to a group.       
  
  
• Effects: if you apply effects to an object the indicator 'fx' will appear on that timeline (and on the stage).  You get the same expand/collapse buttons as for groups. 
  
  
• (Sticky) triangle: red triangle at the end of an object timeline means that this timeline is linked to the end of the slide; if you increase/decrease the slide duration the object timeline will move to keep the end glued to the end of the slide, without changing the duration of the object timeline.
  Do not confuse with an object timeline that is set to Display for the rest of the slide (CTRL-E): such an object timeline will have a fixed start point, its duration will change when the slide duration is changed. It has no special indicator.
  
  
• Double arrows at the end of an object timeline: this object is set to Display for the rest of the project. You'll see its timeline only on this first slide, on following slides the object will be visible on the stage but not in the Timeline panel.
  
  
• A Zoom object has a very thin vertical line in its timeline: this indicated the end of the zoom movement.
  
  
• FMR (Full Motion Recording, created in a software simulation for mouse movements) slides: red line in the center of the slide timeline
  

  

• CPVC slides: identical look to the FMR slide, but editing functionality in the Properties panel is different (will open the Video editor)

Tips 

You can see the slide timeline as one video clip in your course 'movie'. Whether the user will be aware of a transition between those slides depends on your setup. The playhead will continue seamlessly from the last frame of a slide to the first frame of the next slide (which is another video clip) if these conditions are fulfilled:

1. No slide transition between slides
2. Keep the default actions On Enter for the second slide, and On Exit for the first slide (No action)
3. No pausing on the slide (look above for presence of pauses)

Captivate could have put all those 'clips' on one long timeline, but believe me, it is much easier to manage and edit objects on the shorter slide timelines and the learner will never know this.

The default duration of a slide is set to 3 seconds. There are (only) two possible valid reasons to increase that duration:

1. If you add a Voice Over audio clip to the slide (slide audio).  The slide duration will have to match or be superior (allowing small gaps before and after audio) to the duration of the audio clip.
   
   
2. If you want objects to appear in a certain sequence, staggered on the timeline, even if you don't have slide audio.

What is NOT a valid reason to increase the slide duration: to give the user time to see/read everything, or in case of object audio to listen to everything. Captivate is meant to create interactive courses! Give your learner control, by pausing the slide. In that case he can take as much time as he wants to listen, watch the slide. This subject (about adding pauses) is so important that I'll treat it more in detail in a later post.

In that case, give the user control over the movie, by adding Pause(s) to the timeline. 

Intro

In a first article about timelines, I described the common features: timeline ruler, playhead, eye button, lock button, control panel and the tiny icons at the bottom of the second column of the Timeline panel. This post will explain the more specific features of the Timeline panel in a Video Demo project (cpvc file).

Timeline in a CPVC or Video Demo Project

CPVC-files are created with the Video Demo application packed with Captivate. Those projects are pure video files, they can only be published to a video format (MP4 - H264 codec).  It has a dedicated video editor, which has some panels similar to those in a cptx-project. One of those panels is the Timeline panel, which is not hidden when entering the Video editor, contrary to the newbie UI for cptx-projects.. Here is a screenshot of a typical timeline of a video demo in the Video editor:

Similar to other video applications, you'll see one continuous timeline for the whole movie. I will use the word 'track' for each horizontal line in the Timeline panel. Immediately after creating a video demo only one track will be visible in the panel, the bottom track labeled as 'Video/Audio'. This label is automatically attributed to the first track.

The bottom track in the screenshot pointed at with the name 'Video/Audio' because contrary to a cptx project, the audio has no separate timeline, but is included in the video track. Another difference is that the bottom track can have several video clips. In the screenshot you see two full video clips and the start of a third clip.  

The video clips can be in sequence (clip 1 and 2) without a gap, or separated by one or more static objects. Clip 2 and 3 have a text and an image inserted between them. Those objects were added manually, and they appear in new tracks. Only non-interactive, static objects can be added to a video demo. Similar to the multiple video clips for the Video/Audio track, the other tracks can have multiple objects (which is not possible in a cptx project). New tracks are only added when necessary, when two or more objects overlap in time. In the screenshot you see multiple objects in three tracks. This explains the generic name 'Objects' for the tracks (first column). The names of the tracks cannot be changed, customized which is another difference with the object/style timelines in a cptx project. The Properties panel has not field 'Name'. 

Due to the possible presence of multiple items on a track, clicking a dot linked to the Eye and Lock button will affect all the objects on that track. It is not possible to lock or hide one object timeline (or one video clip). That is another big difference with the Timeline in cptx projects. 

More specific features are:

1.  Just below the time ruler in seconds, you'll see diamond icons (and a half icon at the start). Those diamonds indicate the start/end of a video clip. Their color is grey by default. You can click such a diamond, and the color will be green. You can add a transition from the Video Effects panel that will appear automatically in the right docking station.After adding a transition the diamond's color changes to orange. You can add a transition to the start of the first clip, hence the half-diamond appearing at the start of the Video/Audio Track.
   

   

2. The orange In/out markers are the same vertical position as the playhead. You'll find them at the beginning and the end of the Video/audio track. If you want to focus on one video clip, you can drag the In marker to the start of that video clip, and the Out marker to its end. When you use the Play button from the Control panel (or the shortcut key Space bar), the playhead will move only within that video clip. You can also use the Trim command to delete the darkened part by dragging the In/Out markers. If I did that for the situation in this screenshot, only the second video clip would be preserved.
   

   

3.  In the Pan/Zoom status (which is the default status of the timeline, visible in the Screenshot images so far) the track with the video clips can have Zoom indicators (loupe icon). They appear when you add a zoom and/or pan effect. The duration of the zoom/pan transition is visualized by the width of the shadow triangle before the zoom indicator.
   In this Pan/zoom status you'll find under the timeline tracks the buttons 'Split', 'Pan and Zoom' and 'Trim' to be active.
   
   
4. The second status, Mouse status can be made active with Edit, Edit Mouse points (use the same work flow to return to the Pan/Zoom status). The 'Pan and Zoom' button will be dimmed, inactive but 'Split' and 'Trim' buttons remain available. In this status the start of mouse trails are visible on the video/audio track as mouse icons(screenshot below): you can select them individually and edit or delete the mouse object.
   

   

5. To trim away part of a video clip, you have to position the playhead near the location that you want to delete. When clicking the Trim button two black triangles, the Trim markers (In and Out) will appear. The gap between them will be greyed out and will be deleted when you click on the Trim button again. You can drag both Trim In and Trim out markers to select precisely the part to be trimmed. You'll end up after the trim action with two video clips, and a transition point (diamond marker) separating them.
   

   

The objects in the CPVC timeline have no real color coding (for cptx projects, this will be explained in a later blog post): everything is blue, the Video/Audio track is bit different but still blue. A selected video clip or object will be in a more saturated blue.

CPVC or Video Demo slide

You can embed a Video Demo in a normal cptx-project. This can be done either by recording directly from within the cptx-project with the big button, Slides, Video Demo or by inserting an exisiting (raw) cpvc project using the menu Insert, CPVC-slide. The look of such a slide, in the filmstrip and in the Timeline panel is identical to the look of the (old) FMR-slides (Full Motion Recording) that are created in a software simulation for movements that cannot be captured in static slides (like dragging, moving objects). The only way to recognize a cpvc slide is by the presence of the button 'Edit Video Demo' in the Properties panel.

Next post?

Soon I'll publish a longer article about the ins and outs of the Timeline(s) in a cptx-project: master slides, normal slides, effects....

Intro

Happy New Year 2017 to all Captivate users!

Quite a few years ago I wrote an article about Timeline secrets in Captivate 5: Tiny Timeline Tidbits

Since the change in the UI with Captivate 8 , the newbie User Interface minimizes the Timeline panel by default which is a pity IMO. Some of the questions I read, at least partially due to that decision to hide the Timeline: 

•  'I want to get rid of the timeline, don't need it at all'
  (user thinking that Captivate is just a Powerpoint clone).

•  'Why is the timeline not showing the whole project, so user unfriendly'  
  (user supposing Captivate is a mini video application)
  
  
•  'Why do I see all the objects on the slide, even when the playhead is in a part where some objects shouldn't be visible, not intuitive'  
  (user with  an Animation background)

For those reasons I suspect it is Time to update that old article, to explain the ins and outs of the Timeline panel with its latest additions like CPVC-projects and slides, Effect Timelines, Drag&Drop. 

Timeline panel, in collaboration with the Timing Properties panel is at the core of the Captivate applications. Personally I'm persuaded that it should be a top priority in the skillset of any Captivate developer, whatever its level.

Since I cannot offer you a 'digestive' (limoncello, grappa, schnapps, single malt;;;) I will split up this (broad) subject in several articles. You are reading the introduction. Following posts will treat topics like 'Timeline in a cpvc-project', 'Timelines in a cptx-project, master slides and normal slides', 'Color coding and Shortcut keys for Timelines', 'Why/how to pause a timeline?'. 

Why a Timeline?

Many users talk about the output of a Captivate project as 'a movie'. Although this is only completely true for a file published to a video format (MP4), this indicates well that Captivate is related to video applications like Premiere Pro and After Effects.

No one will have doubts about the importance of 'time' for video. A movie has a playhead, which moves at a certain speed. That speed is usually indicated by the term 'frames per second', or FPS.

Frames remind me always of the traditional way of producing cartoon movies: each frame, drawn by a graphic artist, was slightly different from the previous and the next frame. By playing those frames at a certain speed,  movement could be simulated: the slowness of our eye/brain made it possible to see fluid movements from those frames.

Common features

You can either read the following text, or watch this interactive Captivate slide (SWF output):

This is the HTML5 version, also visible on mobile devices:

1. Contrary to some video or animation applications, the Timeline ruler in Captivate is always in Time units (seconds), cannot be changed to frames (look at the horizontal ruler in the top of the Timeline panel). The smallest increment in the timeline is 0,1 seconds. With a default rate of 30FPS (which can be changed) 0,1seconds = 3 frames
   

   

   
   
2. The Playhead is represented by a red rectangle. When you use the play button in the control panel (see 4), you'll see its movements. You can also drag the Playhead to a certain position on the timeline. The size of the rectangle is bit different between a cptx and a cpvc project as you can see in the screenshot.
   
   
3. In the first column of the panel, on top you find the Eye button, and each track (horizontal line in the panel) in the Timeline has a (blue, filled with orange) dot under this button. See the screenshots:
   

   

   

   When clicking the Eye button on top of the column, all objects in all tracks will be hidden on the stage. This is only meant for editing reasons, it will not affect the published course.To hide items after publishing you need to click that 'other' Eye button in the Properties panel of the objects (hidden in Output). When clicking on a dot under the Eye button, next to a track, all objects on that track will be hidden. In the exampled on the screenshot, the second tracks from the top have been hidden.
   
   
4. Next to the Eye button is a Lock button, also with dots next to each track. When you click the button itself all objects on all tracks will be locked: not available for selection nor for editing properties. However, if you click a dot next to a track, there are two states. On the first click only size and position will be locked. In that state you can still select /style the objects. The blue Lock icon is surrounded by 4 arrows, as you can see in the screenshot: for the cpvc it is the track immediately above the Video/Audio track, for the cptx project the uppermost timeline. Clicking twice on a dot results in full lock: no selecting/editing is possible. This is the case for the uppermost Objects track in the cpvc-screenshot and for the image I_topics in the cptx project. Watch the different look of the lock icons.
   
   
5. The Control panel at the bottom of the first column (see screenshot above) has the classical (video) buttons:  'Move Playhead to start', 'Stop', 'Play', 'Move Playhead to the end'. Play and Stop can also be activated with the space bar if the timeline panel is active.
   

   

   Warning: Play Slide under the button Preview has the same function as Play in this control panel. Although it is under the Preview button it is NOT a preview at all! It is just meant to be used for editing, will not show how the slide will look after publishing. This is a common misunderstanding.
   The last button on the control panel: 'Audio' is a toggle, will mute/unmute Audio when watching using the Play button. Like the Eye button, this will not affect audio when publishing. The state of this button will apply to all open projects.
   
   
6. In the second column at the same vertical position as the control panel described under 6 and the horizontal scrollbar, you'll find 4 tiny icons in all normal slides (they have no sense for the Master slide which has no real duration)
   

   

   
   
1. Hourglass icon: indicates the location of the playhead from the start of the track; its tooltip is 'Elapsed Time'; this indicator is always available, even when no track nor object is selected.
2. Vertical line + right arrow (Selected Start Time) will only have a value when a video clip or a static object is selected; it will indicate the start time of the selected video/object. In the screenshot the Smartshape on top is selected.
3. Vertical line + right arrow + vertical line (Selected duration) will show the duration of the selected clip/object, is only available when a video/object is selected on a track.
4. Chrono icon: Total duration of the slide 
   
   The Zoom slider to the right of this total duration,  allows the timeline to zoom in/out. 

Next post

Intro

In the previous blog post I introduced you to the common JS API, and you used the method 'setVariableValue' to populate a variable defined in the Captivate project. That value was a random number generated in the JS window, using the Math.random() and the Math.floor methods. The values were integers, between fixed numbers 10 (included) and 100 (not included). In this second article you'll learn to know a new method 'getVariableValue' from the JS API, which lets you transfer a value to JS. We started with the mathematical operation 'Sum', now we'll switch to 'Subtractions' needing again the command 'Expression'. Because CP cannot handle well negative values, we'll have to take care of that as well.

The progress bar introduced with the Sum exercises, will be continued. You'll see that it is possible to change the state of an object, displayed for the rest of the project, from a slide where that object is not inserted. 

Scenario Subtract Slide

Used objects

The same multistate objects are used as on the Sum slide (see state panels on previous post):

• Sticky figure with its states and a motion effect for the minus sign
• OK button, which changes to a New button after the first exercise
• Progress bar, which has been displayed for the rest of the project.

In this slide I only used TEB's, which I can control due to the presence of the CpExtra widget (InfoSemantics). The consequence is that this description is only valid for HTML output. For SWF output the TEB can be replaced by a Scrolling Text Interaction:

• TEB_max accepts only numbers and is empty when starting - associated variable is v_max
• TEB_min accepts only numbers and has a default value of 10 (changeable)  - associated variable is v_min
• TEB_result accepts only numbers - associated variable is v_result (reused from sum slide)

Two shape buttons, that are alternatively enabled/disabled:

• SB_Number is the OK/New button, triggers the advanced conditional action SubtractTerms
• SB_CheckSubtract is the Check button, triggers the advanced conditional action CheckSubtract

Variables

Some variables created for the Sum slide are reused:

• v_one, v_two, v_three, v_four: are reused for the values of the two terms, which will end up in v_one (first term) and v_two; those variables will be reset by the On Enter action of the Subtract slide

• v_result: will store the result value typed in by the user in TEB_result, has to be reset as well.

• v_check: will be calculated and used to validate the result given by the learner. 

• v_progress: is a counter for the correct answers, will be used to change the state of the progress bar; this variable is not reset but starts with the value 5 (end value after the Sum slide)

• v_null: empty variable used to clear the content of the displayed result for a new sum (see Where is Null?)

• xprefTEBUpdateFromVariable:  for HTML output, one of the CpExtra variables. When assigning the value 1 to this variable (with CpExtra widget loaded either in the file, or headless) it is possible to change the associated variable of a TEB by an action, and it will be reflected immediately in the TEB. I used this to clear TEB_Result.

New variables are:

• v_max associated with TEB_max will store the maximum value for the terms
  
  
• v_min associated with TEB_min will store the minimum value for the terms

Advanced Actions

Shared actions were not possible. One Standard advanced action was needed (to reset vars) and two Conditional actions.

EnterSubtract

This very simple standard action, triggered by the On Enter event of the slide, clears several variables that are reused from the Sum slide:

SubtractTerms

This conditional action is triggered by the OK/New button SB_Number. It has 3 decisions:

1. "CheckCorrect" will compare the values stored in v_max en v_min. If the maximum value is not exceeding the minimum value, the maximum value will be calculated by adding 200 to the minimum value.
   
   
2. "RandomNum" will generate two random numbers and store them in the variables v_three and v_four. Reason is that the last decision will have to put the largest number into v_one and  the smallest in v_two. This could have been checked in the JS script window as well, but I wanted to keep the JS as simple as possible and checked with the last decision. 
   
   
3. "CheckMax" compares the values in v_three and v_four. The largest value will be assigned to v_one, the other to v_two. This decision also calculates the result of the subtraction to be stored in the variable v_check (will be used to check the user's entry).
   
   

CheckSubtract

This conditional action is triggered by the check shape button SB_CheckSubtract and has 6 decisions

The first decision 'Checker', will check the entered value (v_result) with the correct value (v_check). It is the only decision with a Then and Else part. For correct answer, the state of the sticky character is changed, the counter (v_progress) is incremented,  the state of the button SB_Number is changed to another state and enabled again, while the button SB_CheckSubtract is disabled. For an incorrect answer, the counter is not incremented, and the sticky character is changed to another state.

The 5 other decisions 'ProgressXxxx' check the value of v_counter and show the appropriate state for the progress bar. The last decision 'ProgressTen' will also change the sticky Character to its state GoNext and enable the click box to proceed to the next slide (subject of the next blog post, with Multiply exercises).

Javascript 

In the previous post you learned to use 'window.cpAPIInterfaceSetVariable (x,y)' method to populate a variable x (to be entered as a string between quotes) with a value y. You calculated y by using a combination of two Math methods in JS: 

• Math.random() which generates a random number between 0 and 1 (not included)
• Math.floor() which will convert a decimal number to an integer by rounding it down (cutting off the decimals).

For the sum slide we used a combination of those two methods, to end up with a random number between 10 and 100 (not included):

Math.floor(Math.random()*(100-10)+10))

For the Subtraction, the maximum and minimum values are not fixed, but stored in Captivate variables v_max and v_min. Due to the first decision in SubtractTerms action, we are sure that v_max > v_min. Those value will be transferred to JS variables with the method 'window.cpAPIInterfaceGetVariable(x)' where 'x' is the name of the Captivate variable, entered as a string (between quotes). Example:

var max = window.cpAPIInterfaceGetVariable("v_max");       stores value of v_max in JS variable max

var first = Math.floor(Math.random()*(max-min)+min);

var second= Math.floor(Math.random()*(max-min)+min);

You are already familiar with SetVariableValue to store the result of first in v_three - Captivate variable, and second in v_four. 

window.cpAPIInterface.setVariableValue("v_three",first);
window.cpAPIInterface.setVariableValue("v_four",second);

Conclusion

You earned a second star, soon a third part will be ready, up to multiplications and bit more of randomness.

Intro

How to use Adobe Captivate to create a course for simple calculations, has been popping up on the forums several times. You can use Text Entry Boxes, MCQ's to reach that goal, but that is pretty limiting. Some examples can be found in this older blog post where the real goal was to have the score being linked to the attempts.

I started using JavaScript in Captivate projects since the release of the common API for JS (version 8) whenever the advanced actions did lack the wanted functionality. For those who want to start using JS, I wanted to explain some very simple use cases in a sequence of 4 articles that will focus on the 4 basic operators that are available in the Expression command: sum, subtract, multiply and divide. Each of the posts will introduce a JS example. The Expression command is not available as a simple command from the dropdown list in the Actions tab, it is only available in advanced/shared actions. 

This article will focus on the Sum operator, and introduce JS to make it possible to generate random numbers. You'll also see how to assign that generated number to a Captivate variable with the function setVariableValue from the API. That will allow to use the same slide for several sum questions. I will use the Multi-state object feature of Captivate 9 several times as well. In the next parts you'll also learn about retrieving a Captivate variable value with getVariableValue, how to format a number to specific number of decimals, how to avoid dividing by 0 (zero).

Scenario Summing slide

User will be allowed to choose for sums consisting of 2 up to 4 terms. The number of terms can be changed after completion of one exercise.

For a correct answer, the stick figure will change to another state, and a star will be added to the progress bar (also a multi-state object). For an incorrect answer the stick figure also changes to a state but no star will be ended to the progress bar.

After completion of 5 correct sums, the stick figure will change to a Next button. The user could still add more questions, but no more 'stars' will be added to the progress bar. 

In this screenshot, from HTML output, you'll see the situation after one successful answer, second sum has been created with 4 terms:

Used objects

Multi-state objects

Stick Character: see image Object States in Library below

OK/New shape button: see image Object States in Library below

Progress bar: see image Object States in Library below 

Special objects

Radio buttons - works perfectly for SWF output but formatting is not preserved for HTML output; labeled "Wd_TermNumber"

Scrolling Text interaction for SWF output, labeled "Wd_SumResult". It is possible to change the shown content in this interaction by changing the associated variable (v_result). However that functionality only works for SWF, not for HTML output. For that reason I needed an alternative which is a  

Text Entry Box, labeled "TEB_result" combined with the CpExtra widget and a specific command variable for HTML output. Since there is a bug in Captivate 9, which prevents using a TEB multiple times on a slide, I used a workaround. The default Submit button was deleted. It was replaced by a custom shape button (SB_CheckSum in the timeline) to trigger an advanced action. In this case an easy workaround, since I used that same shape button for the Scrolling Text Interaction for SWF output. The associated variable for the TEB is the same as for the Scrolling Text Interaction (v_result). Nothing had to be changed to the advanced action 'CheckSum' when replacing the Scrolling Text Interaction by a TEB.

Variables

v_one, v_two, v_three, v_four: will get the values for the (possible) 4 terms of the sum which are generated by the advanced action 'SumTerms'

v_result: will store the result value typed in by the user in the Scrolling Text interaction (SWF) or the TEB (HTML)

v_check: will be calculated and used to validate the result given by the learner in the advanced action 'CheckSum'

v_progress: is a counter for the correct answers, will be used to change the state of the progress bar

v_null: empty variable used to clear the content of the displayed result for a new sum (see Where is Null?)

xprefTEBUpdateFromVariable: only for HTML output, one of the CpExtra variables. When assigning the value 1 to this variable (with CpExtra widget loaded either in the file, or headless) it is possible to change the associated variable of a TEB by an action, and it will be reflected immediately in the TEB. I used this to clear the result when defining a new sum.

Advanced Actions

In this particular case it was not possible to use shared actions. Two advanced actions, both conditional, were needed:

SumTerms, triggered by the OK button (SB_Terms) after choosing the number of terms

CheckSum, triggered by the Check button (SB_CheckSum) to validate the answer

This conditional action has 6 decisions.

The first decision 'Checker', will check the entered value (v_result) with the correct value (v_check). It is the only decision with a Then and Else part. For correct answer, the state of the sticky character is changed, the counter (v_progress) is incremented,  the state of the button SB_Terms is changed to another state and enabled again, while the button SB_CheckSum is disabled. For an incorrect answer, the counter is not incremented, and the sticky character is changed to another state.

The 5 other decisions 'ProgressXxxx' check the value of v_progress and show the appropriate state for the progress bar. The last decision 'ProgressFive' will also change the sticky Character to its state GoNext and enable the click box to proceed to the next slide (subject of the next blog post, with Subtract exercises).

JavaScript for random numbers

In the documentation provide by the Captivate team about using the common JS interface, you'll find a description of creating random numbers:

Common JS Interface

In this example I wanted to generate a random number between 10 included) and 100 (not included). The script window for the decision 'TwoTerms' of the action SumTerms (see above) had to generate two random numbers, to be stored in v_one and v_two; for the decision 'FourTerms' 4 variables had to get a random number:

Short explanation of this code:

The JS method Math.random() generates a decimal number between 0 (included) and 1 (not included).

The multiplication Math.random()*(100-10) will result in a random (decimal) number between 0 (included) and 90 (not included).

The sum Math.random()*(100-10) + 10 will result in a random (decimal) number between 10 (included) and 100 (not included).

The JS method Math.floor(e) will cut off the decimals of the argument e, round iit down to the nearest integer. As a result the full expression used in the JS window  Math.floor(Math.random()*(100-10) + 10) will result in an integer between 10 (included) and 99 (included). 

The method from the common API setVariableValue(x,y) allows to assign the value from the second argument to the variable indicated in the first argument. Beware: the variable name has to be identified as a string (text) by putting it between single or double quotes. For the value, which is a number, you can use the expression explained above. It is a method of the cpAPIInterface which is in the window object. That explains the total line of code, which in JS always ends with a semicolon:
window.cpAPIInterface.setVariableValue("v_one", Math.floor(Math.random()*(100-10) + 10));

Conclusion

Intro

Knowledge Check Slides have been introduced as one of the new quizzing features with version 9. The Help documentation is 'spartan' as usual. You can read this as Features (quote from the Help):

• Knowledge check slide imbibes similar features of question slide without any results, reporting structure and interaction ids. 
• Knowledge check slides do not participate in reviews. 
• Random questions are not applicable to this knowledge check slide. 
• Master slide and controls usage is similar to question slide. 
• Knowledge check slides can be used to impart the learning on specific topics. 

I explored those KC slides in preparation for a workshop about new Quizzing features, and want to give you some more tips. Since the KC slides are very similar to normal quiz slides, I'll start with 'Recognizing KC slides'. Then I'll show the differences in default setup, and in some other aspects not mentioned in the Help,  the relationship with the quizzing system variables and - what did you expect? - a tweaking tip.

Recognizing KC slides

• in the Filmstrip, KC slides get a special indicator at the bottom right, which the Quiz slides do not have; in this screenshot slides 1&3 are KC slides and have that indicator:
  

  

• in the Quiz Properties panel you see more differences with normal quiz slides, most are due to the fact that KC slides are not scored by default:
  

The mention (KC) next to the type of question
The lack of the possibility to choose between Graded and Survey (because KC slides are not scored)
No partial scoring for MCQ slides with multiple correct answers 
No points
No penalty



• in the Advanced Interaction panel you don't see a specific indicator. The score of the KC slides is set to 0,  they are not set to be reported but... contrary to what the Help tells, the KC slides have an individual Interaction ID. This is probably not used. Look at this screenshot:
  

  

There is no way to convert a KC slide into a question slide, nor a question slide into a KC slide!

Default setup KC slide

The default settings for a KC slide are bit different from those for a question slide:

1. For a KC slide only the Incomplete feedback message is activated, not the Correct message as for Quiz slides
2. For both KC and Question slide only the Submit button is checked off. The Back, Skip and Clear buttons can be activated, but they are not by default.
3. Attempts are set to Infinite, with the Retry Message enabled. For question slides by default Attempts is set to 1. Because the attempts are set to infinite, you don't have a Failure message enabled for KC slides. You can decrease the attempts and in that case you can provide up to 3 Failure message, same as for Question slides.

You read in the Help that KC slides will not be visited during Review, they are not in the Quiz scope, except of course if they are nested in between normal quiz slides. Contrary to Pretest slides, the KC slides will not prevent navigation by playbar or TOC.

It is not possible to use question pools (see Help), random questions but it is also not possible to use GIFT format to import KC slides. 

Some options in the Quiz Preferences do work for KC-slides: if you check the option to Hide Playbar in Quiz, this will be valid both for question slides and KC slides. Unchecking the option 'Allow Backwards Movement' will only prevent backwards movement on question slides, not on KC slides. However, KC slides do not get a Progress indicator! IIf you want a progress indicator (question X of Y) you can have a look at this older blog post..

When you leave a KC slide, it is reset immediately which is not the case for question slides which are frozen until a new attempt on Quiz level is started. In that way a KC slide behaves like a Drag&Drop slide that is not set to be reported, had no score. There is no possibility to freeze the answer on a KC slide, which may be a game stopper sometimes.

As the Help mentioned, design of the KC slides depends on the same master slides as the normal question slides, with the exception of the new Review buttons which will never appear on KC slides. For navigation on KC slides you can use the Back/Skip buttons or add custom shape buttons.

System variables 

Contrary to the Pretest slides, there are no specific system variables available for Knowledge Check slides. I have been looking for quizzing system variables that do get a value from a KC slide. Here is an overview of the variables that are not used by KC slides:

• cpInQuizScope and cpInReviewMode, both Booleans will not be toggled from the default 'false' to 'true' when you enter a KC slide. If the KC slide is in between normal question slides, it can be 'true' but that is not due to the KC slides.
• Variables linked with scoring are not used: cpInfoPercentage, cpQuizInfoLastSlidePointScored, cpQuizInfoNegativePointsOnCurrentQuestionSlide, cpQuizInfoPassFail, cpQuizInfoPointsPerQuestionSlide, cpQuizInfoPointsscored, cpQuizInfoPartialScoringOn, cpQuizInfoTotalProjectPoints, cpQuizInfoTotalQuizPoints 
• cpQuizInfoAttempts: gives the attempts on Quiz level, as specified in 'Quiz Preferences, Pass or Fail'. Those attempts have no sense for KC slides, since the user can come back as many times as he wants to retake the KC question which is always reset when leaving the slide.
• cpQuizInfoPassPercent and cpQuizInfoPassPoints: since KC slides have no score, those settings of the Quiz Preferences have no meaning for KC slides.
• cpQuizInfoTotalQuestionsPerProject: contrary to the Pretest questions which are counted in this variable, as are the normal Question slides, the KC slides are not included in this variable. Same for the variables cpQuizInfoTotalCorrectAnswers, and cpQuizInfoTotalUnansweredQuestions

As you see not many variables are used by KC slides, but some are used! Moreover they can be very useful if you want to do more with KC slides:

• cpQuizInfoAnswerChoice: one of my favorites as you could read in this old blog post. It can be used to tweak the work flow with KC slides as you'll read more later on. One exception: it is not populated when you use Advanced Answer option.
• cpQuizInfoMaxAttemptsOnCurrentQuestion: can be useful as well, although having a similar system variable to cpQuizInfoAttempts for current attempt on question level would be even better. You need a user variable as a counter for attempts on question level. If you keep the default setting of Infinite attempts, this variable will have the value 32767 (no idea why?).
• cpQuizInfoQuestionSlideTiming and cpQuizInfoQuestionSlideType are available for KC slides as well.

Tweaking tips

Here are some tips, which I tried out with success but will not explain in detail.

1. If you do not want to keep the Attempts set at Infinite, but to a limited number it would be possible to count the number of correctly answered KC slides. Create a user variable v_counter with a default value of 0. Use the Success action of the KC slides to increment that counter. Later on you can show the obtained value for v_counter, and even use that value in a conditional action to offer feedback or navigate the user back to content slides.
   
   
2. There is no Review possibility for KC slides as mentioned. If you offer limited attempts on question level, you could show a custom feedback message on the KC slide for the questions answered correctly, something like 'You have answered this question correctly'. When simulating a 'Review' situation, the user will be invited to answer only the KC questions that do not show that message. Be careful: all embedded question slide objects are always on top of the stack, you don't want the feedback to be hidden by those objects. That can be done by having a shape before the KC slide, timed for the rest of the project and always on top. This tweaking work flow was described in this article: Buttons on Question/Score slides?
   
   
3. The use case described in this thread of the Captivate forums could be solved using the same system variable cpQuizInfoAnswerChoice in conditional actions, combined with a counter to track the number of attemptsl. You cannot leave a normal question slide to a content slide for remediation unless you follow the strict rules for remediation. If you want to limit the attempts to get a correct answer, remediation rules are broken. With a KC slide, the answers are reset every time, which allows a lot more freedom. However: if you need a real score for the slide, you'll have to use the workaround I described in this blog post: Report Custom Questions - part 2

Intro 

Hyperlink commands

• Continue: since the hyperlink event has no way to prevent 'Continue Playing Project' as is the case for simple actions, this is not that important
• Return to Quiz: is meant for remediation, normally to be triggered by a Next button
• Play Audio/Stop Triggered Audio: can always be done using an advanced action
• Execute Shared Action: which is really a pity :(
  
• Pause: can always be done using an advanced action
• Exit: can always be done using an advanced action
• Toggle: can always be done using an advanced action
  
• Show/Hide TOC: can always be done using an advanced action
• Show/Hide Playbar: can always be done using an advanced action
• Lock/Unlock TOC: can always be done using an advanced action
• State commands: Go to Next State/Go to Previous State cannot be done by advanced action, Go to State is possible.
  

For hyperlink events some commands have been put together in one dialog box, which is the case for the Slide command:

Example

Watch the movie: after the title slide the dropdown menu 'Go To' appears. When you click on that shape button, another shape wlll drop down. It has 6 hyperlinks, I left them underlined to emphasize their type.

When clicking on a hyperlink you'll be navigated to another slide which has a Back button to return to the Menu slide. The content slides are about the same subject as the previous blog post about popups and Close button. Of course it would be possible to have multiple slides in each 'chapter', and have only selected slides in the dropdown list.

Setup, variables and actions

Objects on Dropdown menu slide

The objects on the slide with the Dropdown menu are visible in this screenshot of its Timeline:

User variable v_start

The shape button SB_Menu (Caption 'Go To') is on top of the originally hidden Smart Shape SS_DropDown, and pauses at 2,6 secs, after all effects have been accomplished. To mimick the behavior of a dropdown the Effect 'Stretch From Top' is applied to that shape. The effect starts at time 0 and has a duration of 1 sec. The arrow shape ArrowGoTo has some explanation and the effect EaseInFromLeft is applied. The second arrow ArrowDropDown has a similar effect, starting bit later, but that shape is not visible until the button SB_Menu is clicked.

One user variable was created: v_start. It will be used to store the frame number of the first frame of the slide with the dropdown menu. I learned from experience that effects are much more consistent when you use micronavigation instead of applying the effect by an advanced action. The content of the variable will be used to send the playhead back to the first frame of the slide, to have the time-based effect being played.

Events and Actions

1. On Enter (Dropdown menu slide): standard advanced action EnterDropDown

2. Success event of the shape button SB_Menu: standard advanced action DropAct

This action will hide the arrow shape ArrowGoTo, show the shape SS_DropDown and its arrow ArrowDropdown and return the playhead to the first frame of the slide with the system variable cpGotoFrameAndResume which has 'Continue' built in. That way the effects for the dropdown menu and the arrow with explanation will appear as they are timed from the start of the slide.

3. Hyperlink events

Contrary to the situation explained in the previous blog post where the hyperlink event was used as Close button, in this case it doesn't matter that the playhead is always released when executing a command by a hyperlink because of the navigation to another slide. The command Slide was used, which opens the dialog box slide. Here the LInk is set to point to the correct content slide. In this screenshot you see the hyperlink setting for the navigation with the item 'Decor':

Intro

Example movie

Watch this two-slide example.

1. The title slide has a text hyperlink 'Next' to proceed to the next slide.
   
   
2. The second slide has six shape buttons, each opening a popup (it could have been a lightbox as well, work flow is identical). In the popup information you'll find  the text 'Close X' which is a hyperlink  to close the popup.
   
   Download CloseButton.swf

States and Hyperlink

It is not possible to add interactive objects to a custom state: button, click box, shape button, Text Entry Box, all are greyed out. However it is possible to have a hyperlink within a text container, that will be active for all states of that container. This can be a welcome workaround. It is however not possible to have different actions for the hyperlinks in different states. Since the goal here was to close the popup, I created a shape as text container with 7 states as you can see in this screenshot:

The 'Normal', or default state looks invisible: there is no text in the text container with the exception of the text hyperlink 'Close X'. This was achieved by giving the text hyperlink the color of the background, the text container a Fill with Alpha=0% and no stroke. The other states have a Fill (Alpha=100%), they have information text with a visible color (also for the Text Hyperlink) and an image.

Actions

1. Next Hyperlink - Title Slide

2. Shape buttons to open popup - Second slide 'ActionProcess'

Look at the timeline of the second slide: all shape buttons (name starts with SB_) pause the slide at the same time, 15,5 secs. When triggering an action, the playhead should not be released, to allow clicking as many times as wanted, in any sequence on those shape buttons. The number of attempts is left at Infinite.

The only command to be triggered is to change the state from the default 'Normal' state to one of the custom states. The choice is yours: 

• you can use a simple action (be sure to uncheck the option 'Continue Playing the Project'
• you can use a one-line advanced action, create duplicates for each button; playhead will not be released
• you can use a one-line shared action with two parameters (text container and state).

3. "Close X" hyperlink - in text container second slide

Beware: there is NO option to prevent 'Continue Playing the Project' when you assign a command to a hyperlink. That means that you cannot use a simple action, but have to use a standard advanced in this case.It is again the action 'Change state...to Normal.' 

Another difference for hyperlink events: the command Excecute Shared Action is missing. That is too bad, because if it had been available, one shared action would have been able to achieve both showing popup (with the 6 shape buttons) and close the popup (with the Hyperlink).

Conclusion

Hyperlink makes it possible to have an action in a state for an object, although it has to be the same action for each state of the object. You learned about the differences between hyperlink events and other events to trigger an action:

• There is no way to prevent the playhead from being released if you trigger a simple action; use a standard advanced action.
• You cannot trigger a shared action with a hyperlink.
• Some commands have a different look: example is the Slide command (see screenhot in this article).

Intro

Example project

Download HelpNavigation.swf

Interactive objects/events

• Slide 1 (Title) which uses the master slide 'Title', has a click box covering up the slide. It has the default action
   'Go to Next Slide'. 
  
  
• Master slide 'Content' has the Help button (with the question mark): it is a shape button (no states at this moment in CP9) which triggers a standard advanced action 'ToHelp'. This master slide is used for the content slides.
  
  
• Slide 2 (Content1): has a shape button for Next which pauses the slide at 2.5secs. This shape button is timed for the rest of the project, so that it will show up in all following content slides. A shape button on the master slide is excluded because this Next button has to be hidden on the last content slide. You cannot show/hide an object on the master slide, because it has no ID, no name. This Next button has been labeled 'SB_Next'. For this small example, it can look easier to have a Next button on each slide where it is needed, but if you have a lot of content slides, this approach will save on time and file size.
  

  

  
  
• Slides 2,3 (content slides): to be sure that the Next button is visible, even when coming back from the Help slides, the On Enter event of these slides is used for the simple action 'Show SB_Next'. 
  

  

  
  
• Slide 4 (last content slide): the Next button has to disappear, which is done with an On Enter action 'Hide SB_Next'.
  
  
• Master slide 'Help': this slide has no interactive object, is used by the Help slides
  
  
• Slide 5 (Help slide 1): has another instance of the Help button (SB_Next_Help) with the action  'Go to Next Slide'.
  This slide has a special shape button 'SB_Back1' to allow going back to the content slide. This button triggers a standard action 'BackToSlide'. This shape button has a bubble added in the Rollover state, which functions as Tooltip.
  The On Enter action for this slide is used to hide the button 'SB_Next' (from slide 2), same way as on the last content slide. Why? That button will already been hidden if the user comes from the last content slide, but not when he is getting here from one of the previous content slides.
  

• Slide 6 (Help slide 2): has no need for a Next button, but needs a pausing Back button (to navigate back to the first Help slide) with the action 'Go to Previous Slide'. It has another instance of that special button ''SB_Back2'. I didn't opt to time that button for the rest of the project, because there are only two Help slides and having to hide/show them would have been more work than using two instances.

Variables and advanced actions

Variables

Two system variables are used in this example:

1. cpInfoCurrentSlide: gives the slide number of the current slide. The index starts with 1, which means that for slide 1 this variable is 1.
   
   
2. cpCmndGotoSlide: will be used to navigate the user back to the content slide. Beware: for this variable the index starts with 0. That means that slide 1 has to be indicated as 0, slide 2 as 1.

One user variable has to be created: v_last.  This variable will be used to store the value of cpInfoCurrentSlide when the user leaves the content slide to go to the Help slides. You do not have to define a default value for that user variable.

Standard actions

ToHelp triggered by the shape button on the master slide 'Content'

BackToSlide triggered by the buttons SB_Back1 and SB_Back2 on the Help slides

For the first statement an Expression was needed, because of the different index for the system variables cpInfoCurrentSlide and cpCmndGotoSlide. Example: if the user came to the Help slides from the third content slide, the variables would be:

• cpInfoCurrentSlide = 4   because the third content slide is slide 4
• v_last = 4   because the action ToHelp stored the value of the previous system variable in this user variable
• cpCmndGotoSlide = 3  because this is the indicator for slide 4, since the index starts with 0; for that reason I needed to subtract 1 from the value stored in v_last

Overview

In the Advanced interaction you'll find a great overview of all the actions, events of the slides. Too bad: you'll not see the shape button on the master slide, nor its action.

Intro

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.

A 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

1. Theme colors palette

2. Object Styles - Object Style Manager

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

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

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

Intro

Did you hear me yelling 'Finally' when the last patch for Captivate was released to version 9.0.1.320? We have now Rulers in Captivate and real (Adobe) guides. I am using that name because they are quite different from the existing Smart Guides which are useful when aligning objects. Moreover the implementation of the Rulers and Guides is really very nice,  Kudos to the Captivate engineers!  Just one example: in responsive projects you can choose to have rulers in Percentages instead of pixels, which is the most logical choice! In this article I want to explain you the reasons for my joy, showing you how I use Rulers and Guides.

Grid

Maybe you don't remember that old grid, which is still present in Captivate 9. It consisted of tiny points, with a default distance of 16 px. You cannot change color of those points (black), which makes that grid useless on dark backgrounds. You can change the default distance between points from 16px to another value, but always the same horizontally and vertically. Personally I remember that distance mostly because it will define how much an object will move or resize when you use CTRL in combination with arrows as shortcut keys (see my old blog post: Shortcut keys for moving/resizing objects). Since many years I didn't use the feature for what it was meant to be used: as a 'grid'. If you just now discover its exitence: turn on the 'old' grid, using View, Show Grid.There is a snapping linked to it as well, which you can turn on/off.

A grid can be very useful in some circumstances!  With the new Guides you have now a powerful alternative: create a custom grid, with lines instead of points, maybe with different distances in horizontal/vertical direction, and use a custom color that stands out from the background. It can be especially useful for responsive projects because percentages instead of pixels  I recommend to lock the guides after creation of the grid. Your grid will be saved with the file, you can show/hide the grid whenever you want.

Here is an example of such a grid, created with the option Multiple Rulers in a blank, normal project:

For a responsive project, I would mostly limit the grid to vertical guides, because it is the width that is most important for the design of such a project. Here is a screenshot for a responsive project, with guides in increments of 10%, extra guides at the left and right side at 45% (margins). Only one horizontal guide at 50%. I dragged out an extra guide to 10% for the title.

Theme/Template design

Motion Paths

If you ever created custom motion paths, which has become much more interesting in Captivate 9 where we have three types of custom motion paths, you know how difficult it is to adjust start and end points to a specific location. I remember the example that I created for this blog post:

Reset Effects

All the cards followed a custom motion paths but had to end up in a stack. My work flow was bit cumbersome:

• create a "cross hair" using a horizontal and a vertical line object in a group
• position that group on the exact location, using the X coordinate of the vertical line and the Y coordinate of the horizontal line
• adding a motion path (no curved, I used the zigzag motion path) to each card, and drag the end point carefully over the crosshair
• saving that motion path as a custom path
• applying it in the necessary advanced action

Now I can use a horizontal and a vertical guide, which I can exactly position without using the Options tab with coordinates. Just double-click on the ruler on the exact coordinate that you want.

Watch this screenshot: the thee shapes move each along their individual motion path, but they end at the same location (and paths cross at another location). 

Custom shapes

SVG are a big new feature, but they don't have (yet) the flexibility of shapes which can be used as text container, as button and filled with a texture, and image, a gradient all on the fly. Although Captivate is not meant to have all the editing features of a vector graphics application like Illustrator, you can create pretty nice custom shapes. Any included shape can be converted to a freeform shape, you just have to edit the points and tangent points. 

How can guides help with this process? Have a look at this screenshot. The creation of this symmetrical shield (or highway sign) was lot easier with the help of the rulers when editing the points and tangent points.:

Intro

As promised in a previous article, I explored the enhancements to Drag&Drop in Captivate 9, more specifically added InBuilt States. In previous versions only buttons and shape buttons had those states. Captivate 9 added multistates to all objects and provided InBuilt states for all objects in a Drag&Drop slide: drag sources and drop targets. Custom states can be added as well. Both InBuilt states and custom states have some limitations similar to the Inbuilt states for buttons. Drag&Drop objects have also limitations for added custom states.

Example Movie

Drag Sources: states

Drop Targets: states

The Drop Targets have 6 InBuilt States (see slide 3 in movie). Three of those states have a name that is identical to an existing state for the drag sources: DragOver, DropAccept and DropReject. For Drop Targets you can add objects to all states, both InBuilt and custom states. Some states appear immediately, other states only appear after Submitting the exercise. Here is the overview, again with a visual reminder from the first use case in the example movie.

1. Normal state (InBuilt): is the Default state. This state will be the main state before the Submit button is clicked. It can be replaced by another state but that will only be for a short duration. The size of this state is important, because several states are locked to the same size. You can rotate the Normal state, which will also lock some of the states to the same rotation.
   

   

   

   

   

   

   

   

2. Dragover state (InBuilt): this state appears when a drag source is over the drop target and will remain so until the object is dropped on or moved away from the target. This state is not locked, it can be resized and rotated.
   
3. DropAccept state (InBuilt): will appear after dropping a drag source on the drop target, it will replace the Dragover state. However this state will remain visible only for a short duration. Then the Normal state will re-appear. The reason is that a drop target can accept multiple drag sources, and has to be ready to 'accept' or 'reject' the next drag source.  It is totally locked: will keep the same size as the Normal state, cannot be rotated. But, as told, you can add objects, which was the case in the example movie (adding the wings).
   
4. DropReject state (InBuilt):  will appear after dropping an incorrect drag source on the drop target if the target is not set to allow All objects to be dropped. It will replace the Dragover state. The state will appear for a short duration before reverting to the Normal state. State is  It is totally locked: will keep the same size as the Normal state, cannot be rotated. But, as told, you can add objects, which was the case in the example movie (adding the wings).
   
5. DropCorrect state (InBuilt): this state will appear after Submit if the drag source(s) dropped on the target are all correct. It will replace the Normal state permanently. The state is fully locked (to the Normal state): no rotation nor resizing is allowed. You can add objects.
   
6. DropIncorrect state (InBuilt): this state will appear after Submit if the drag source(s) dropped on the target are not all correct. It will replace the Normal state permanently. The state is fully locked (to the Normal state): no rotation nor resizing is allowed. You can add objects.
   
7. Custom state: this state is also fully locked to the rotation and size of the Normal state which is limiting even though you can add objects.  
   

Reset - My Reset

Setup Use Case 1

The advanced action DDSuccess4 has three statements:

Due to hiding the drag sources with this Success event, the On Enter action of the slide has to 'reset' the situation by showing the group Gr_Draggers again. This was combined with the assignment of the user variable v_enter for this slide in the action:

Setup Use Case 2

Intro

This pretty short article will explain several ways to create a button that will replay a slide from its first frame and is functional on that slide only. The reason is that I have been asked about this use case multiple times. 

Questions

First thing to check is: does this slide have an On Enter action? The default On Enter action for a slide is 'No action'. On Enter actions are however the way to go if you want to reset a slide to its initial configuration, to clean up the 'mess' that can happen on that slide by the user or by the interactivity on that slide. On example: maybe the user has popped up objects  using a hyperlink on a word or iimage? In that case you'll need an On Enter event. The action needed for a Replay button will have to make sure to 're'- enter the slide, in order to have that On Enter action done. To better understand what I mean, I created a short example movie.

Example movie

Watch this movie, which I have been testing both for SWF (version here) and for HTML5 output. You'll see two slides:

1. Slide 'Title': it has an On Enter action to play an audio clip.
   
   
2. Slide 'Pills': a user variable v_counter is used (and displayed) to store the number of clicks on the 'pills'. The timeline of this slide looks like this
   

   

   
   Each of the pills (shape buttons) triggers a shared action, that will show a state (with explanation), increment v_counter, wait for 2 seconds before releasing the playhead.

On both slides you'll see two buttons: 'Replay1' will restart the slide from its first frame, without re-entering the slide. That means that the On Enter action is not executed again. The second button 'Replay2' will re-enter the slide. Listen and watch the difference (look at the counter on the second slide). Refresh the browser when you are ready to watch this example. Refreshing will also get you back to the start of the movie.

'Replay1' - On Enter action is not repeated

    Jump to slide Intro

1. For slide 'Title': the audio clip will not be heard.
2. For slide 'Pills': the variable v_counter is not reset to 0, and will continue to increment.

TIP: 

Replay2 - On Enter action is repeated

Frame enigma - TIP

If you watched the frame number closely, you will have seen that the 'first' frame (on slide 'Title') is not 1 but 3 or 4. Here is the explanation: since I wanted the Replay2 button to be active on this first slide, I needed a slide before that first slide for the micro-navigation. That slide will not be visible to the user because it is only 0,1 sec long. At a frame rate of 30fps, that means ...3 frames.

Intro

In the past I wrote some posts about creating Toggle buttons. The oldest article explained the use of an Expression and a system variable for a button that kept the same style but could turn on/off a functionality (created for versions 5/5.5). My excitement about shape buttons, appearing in version 6, was the inspiration for several scenarios in which the style of the toggle button changed with the on/off situation. 

When shared actions appeared with Captivate 7, I posted some articles about the difference with advanced actions. Captivate 8 enhanced shared actions by allowing variables and literals as candidate parameters. Although Captivate 9 seems not to add any improvements to shared actions (had hoped secretly for an easier way to edit them), combining shared actions with the new multistate objects will save a lot of time. The use case described here is a good example. Start by watching the example movie to understand my interpretation of Toggle buttons.

Example movie

Concept 

All toggle buttons have in common to be associated with a variable that can be toggled by the developer: I'm talking about Boolean variables, which can have only two logical values '0' (False/No) or '1' (True/Yes). Both system and user variables are possible. On this screenshot you see the Timeline with the 6 shape buttons, labeled to identify their functionality (SB is my indication for Shape Buttons):

Variables

The associated variables are in the same sequence as on the timeline, from top to bottom:

• v_visgrp (user variable with Default value = 0) for SB_visib_group
  
  
• v_visib (user variable with Default value = 0) for SB_visib
  
  
• cpCmndShowPlaybar (system variable with Default value = 1) for SB_Playbar
  
  
• cpCmndTOCVisible (system variable with Default value = 0) for SB_TOC
  
  
• cpCmndCC (system variable with Default value = 0) for SB_CC
  
  
• cpCmndMute (system variable with Default value = 0) for SB_Audio

This list shows that one of the system variables doesn't have '0' as default value, cpCmndShowPlaybar. Solution for this discrepancy can be found in switching the states for the associate button, or in switching the variable itself to '0', thus hiding the Playbar. I used the second scenario: with the On Enter action for the third slide I did Hide the Playbar, which toggles cpCmndShowPlaybar to 0

The shared action can be used for any button with such a, associated Boolean variable, system or user variable. Some examples are shown in the last slide of the example movie: cpLockTOC or a user variable to toggle an audio object.

States

The shape buttons have three InBuilt states: Normal, Rollover and Down. For each button I added one custom state. That state will change the shape button to show the 'OFF' state, and if necessary additional objects are added in this state. In this screenshot you see the 4 states for the shape button SB_Audio:

This shape button has a SVG added in each state. At this moment SVG cannot be used as a Fill image for a shape button (maybe in a next version?), they are separate objects. For some states I also changed the style of the shape itself (Fill):

1. Normal: has a SVG indicating you can mute  audio (since cpCmndMute has a default value of 0, which means that audio is playing)
2. Rollover: Speaker only (SVG), Fill different
3. Down: Speaker only (SVG), Fill different
4. AudioOn: has a SVG indication to play audio; this will be the state that is visible when audio is muted, cpCmndMute = 1.

The buttons SB_TOC, SB_CC and SB_Playbar have a similar setup: for the InBuilt states text was inserted in the shape. The custom fourth state adds two line objects (cross) over a duplicate of the Normal state. Look at the screenshot for the SB_Playbar:

Both instances of the Visibility toggle button use SVG's to change the style of the shape button (similar to SB_Audio), but they add other objects for the 4th custom state as you can see here:

Shared Action

1. the button itself (SB_Audio in the screenshot above)
2. the state 'Normal' which is used and
3. the state 'AudioOn' which is used as well

Candidate parameters are:

1. The variable cpCmndMute: it has to be a parameter, because we need other Boolean variables for the other buttons
2. Literal '1': because I choose the 4 th state (custom) for each button with this action in mind, it is not necessary to define this literal as a parameter

This leads to the definition of the shared action with 4 parameters, the compulsory and one candidate parameter. In this last screenshot you see the parameters with their values for another button, SB_Playbar. Watch the description of the parameters.

Conclusion

In many situations using a Captivate playbar is not a good choice, and with states, one single shared action from your script library it is now really simple to create not only Next and Back buttons, but also every other toggle button needed on the course slides. If using shape buttons (as was the case here) you can put them on the first slide of the course, time them for the rest of the project. They will have each a unique ID, which allows you to take control of those shape buttons, to hide them when they are not needed on some slides. Good luck!